Convert Your Scanner to an IP Scanner | Remote Document Scanning

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.

This article is Part 1 in a 3-Part Series.

Requirements

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.

Dynamsoft service configuration

Implementing Remote Document Scanning App in HTML5

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

JavaScript files

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>

Create the first (localhost) Web TWAIN object

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 = 'DLS2eyJoYW5kc2hha2VDb2RlIjoiMjAwMDAxLTE2NDk4Mjk3OTI2MzUiLCJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSIsInNlc3Npb25QYXNzd29yZCI6IndTcGR6Vm05WDJrcEQ5YUoifQ==';

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

Note: don’t forget to set the license key.

[optional] Thumbnails

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();

Create the 2nd (remote by IP) Web TWAIN object

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, 
        Port: '18622',
        PortSSL: '18623', 
        UseLocalService: 'true'
    };

Dynamsoft.DWT.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) });

Transfer the image data from remote to localhost for display

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.DWT.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);
        }
    );
}
);

Test

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

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. You can also add the following code to capture documents from your smartphone camera.