How to Build a Universal Document Scanning App in HTML5

As the world’s top scanner programming SDK, Dynamic Web TWAIN features a lot of compelling functionalities. By upgrading to the latest version, any web document scanning app built with Dynamic Web TWAIN can be compatible with mobile devices seamlessly. What will happen if you invoke the scanner control APIs on mobile devices? Dynamic Web TWAIN can turn your mobile devices into a remote control for document scanners connected to your PC. In addition to scan documents from a remote document scanner, you can open the cellphone camera to capture documents as well. Building a universal document scanning app in HTML5 can never be so easy.

Requirements

• Apply for a 30-day FREE Trial License.

• Download Dynamic Web TWAIN SDK.

• Virtual Scanner for Windows. If you don’t have a document scanner, you can install the virtual scanner app for test on Windows.

Configuring IP and Ports for Document Scanners

After installing Dynamic Web TWAIN, you can open http://127.0.0.1:18625/admin/ in a web browser to view the Dynamsoft Service Setup page. You can change the IP address accordingly for remote access.

Implementing Mobile Document Scanning App in HTML5

Let’s create a new project folder and an index.htm file. And then copy the Resources folder from Dynamsoft\Dynamic Web TWAIN SDK <version>\Resources to the project root directory.

There are two JavaScript files required for Dynamic Web TWAIN programming. You need to include them sequentially:

<script type="text/javascript" src="Resources/dynamsoft.webtwain.initiate.js"></script>
<script type="text/javascript" src="Resources/dynamsoft.webtwain.config.js"></script>

The next step is to instantiate Dynamic Web TWAIN object and create an image viewer based on an HTML Div element. You can implement it either automatically or manually:

// Create a Div element
var element = document.createElement('div');
var containerName = 'container';
element.id = containerName;
document.body.appendChild(element);

// Dynamsoft.WebTwainEnv.ProductKey = 'LICENSE-KEY';

// Load DWT viewer automatically
function initDWT() {
    Dynamsoft.WebTwainEnv.UseLocalService = false;
    Dynamsoft.WebTwainEnv.AutoLoad = true;
    Dynamsoft.WebTwainEnv.Containers = [{ ContainerId: containerName, Width: viewerWidth, Height: viewerHeight }];
    Dynamsoft.WebTwainEnv.RegisterEvent('OnWebTwainReady', function () {
        dwtObj = Dynamsoft.WebTwainEnv.GetWebTwain(containerName);
        if (dwtObj) {
            dwtObj.Width = viewerWidth;
            dwtObj.Height = viewerHeight;
            dwtObj.MouseShape = true;
        }
    });
}

// Load DWT viewer manually
function initDWTManually() {
    Dynamsoft.WebTwainEnv.CreateDWTObjectEx({
        WebTwainId: '1'
    },
        function (obj) {
            dwtObj = obj;
            dwtObj.Viewer.bind(element);
            dwtObj.Viewer.width = viewerWidth;
            dwtObj.Viewer.height = viewerHeight;
            dwtObj.Viewer.show();
        },
        function (err) {
            console.log(err);
        }
    );
}

Note: don’t forget to set the license key. Besides, the two initialization methods are no different for the final DWT object, therefore, you can pick either way you like.

Thumbnails help users to preview and select images. With Dynamic Web TWAIN, you can implement a thumbnail viewer with only two lines of code:

var thumbnailViewer = dwtObj.Viewer.createThumbnailViewer();
thumbnailViewer.show();

Since the image viewer is ready, it is time to code for the document scanning event. You should have connected at least one document scanner to your PC and configured the IP address for Dynamsoft service. To enable remote access, you need to create a new DWT object by IP:

var dwtConfig = { WebTwainId: ip, Host: ip, UseLocalService: 'true' };
Dynamsoft.WebTwainEnv.CreateDWTObjectEx(dwtConfig, function (dwt) {
    dwtRemoteObj = dwt;
    dwtRemoteObj.RegisterEvent('OnPostTransferAsync', function (outputInfo) {
       
    }
    );
    
    // Update the remote scanner list
    dwtRemoteObj.GetSourceNamesAsync().then(function (result) {
        // Remove previous options
        for (var i = 0; i < selectSource.length; i++) {
            selectSource.remove(i);
        }

        for (var i = 0; i < result.length; i++)
            selectSource.options.add(new Option(result[i], i));
    },
        function (fail) {
            console.log(fail);
        });
},
    function (error) { console.log(error) });

When the OnPostTransferAsync event is triggered by the AcquireImage() method, you will receive the image data scanned from a remote document scanner. The data needs to be converted to blob and then loaded to the image viewer for display:

dwtRemoteObj.RegisterEvent('OnPostTransferAsync', function (outputInfo) {
    dwtRemoteObj.ConvertToBlob(
        [dwtRemoteObj.ImageIDToIndex(outputInfo.imageId)],
        Dynamsoft.EnumDWT_ImageType.IT_PNG,
        function (result, indices, type) {
            dwtObj.LoadImageFromBinary(
                result,
                function () {
                    console.log('Load the image successfully');
                    dwtRemoteObj.RemoveImage(dwtRemoteObj.ImageIDToIndex(outputInfo.imageId));
                },
                function (errorCode, errorString) {
                    console.log(errorString);
                }
            );
        },
        function (errorCode, errorString) {
            console.log(errorString);
        }
    );
}
);

You can also add the following code to capture documents from your smartphone camera:

dwtObj.LoadImageEx('', 5,
    function () {
        console.log('success');
    },
    function (errCode, error) {
        alert(error);
    }
);

So far, the coding is done. We can set up an HTTP server with Python for a quick test:

python -m http.server

Source Code

https://github.com/Dynamsoft/web-document-remote-scan

Originally published at https://www.dynamsoft.com on February 1, 2021.