How to Scan Documents from eSCL Scanners in Web Applications

#webdev #javascript #programming #scanner

Dynamsoft recently released a new version of Dynamic Web TWAIN SDK v18.0. The new version supports eSCL protocol, which allows you to connect to network scanners. In addition to integrating eSCL into Dynamsoft service for Windows, Linux and macOS, Dynamsoft also brought an eSCL scanner communication application to Android platform. Chromebook users can benefit from the Android app as well. It is a brand-new experience that you can access wireless scanners from any desktop (Windows, Linux, macOS, ChromeOS, Raspberry Pi OS) and Android browsers. This article demonstrates how to use the new Dynamic Web TWAIN API to scan documents from eSCL scanners in web applications.

Why eSCL?

If you are using a document scanner made by Epson, Canon, HP, or Fujitsu, you may find that the scanner supports many protocols, such as TWAIN, SANE, eSCL, WIA, and ICA. The strength of eSCL is that it is a network protocol, which means you can connect to the scanner from any device on the same network without the restriction of the operating system.

The New Dynamic Web TWAIN API for eSCL Scanners

Since from Dynamic Web TWAIN v18.0, the only way to list all supported scanners is to use the GetDevicesAsync() method. For developers who have used the previous version of Dynamic Web TWAIN, you have to change the API to find the eSCL scanner. The old GetSourceNames() method is still compatible with other scanner protocols, such as TWAIN, SANE, WIA, and ICA.

The code snippet for querying scanners is as follows:

var selectSources = document.getElementById("sources");
var sourceList = [];

dwtObject.GetDevicesAsync(Dynamsoft.DWT.EnumDWT_DeviceType.TWAINSCANNER | Dynamsoft.DWT.EnumDWT_DeviceType.ESCLSCANNER).then((sources) => {
sourceList = sources;

selectSources.options.length = 0;
for (let i = 0; i < sources.length; i++) {
    let option = document.createElement("option");
    option.text = sources[i].displayName;
    option.value = i.toString();
    selectSources.add(option);
}
});

To acquire a document image from a scanner, you can use the AcquireImageAsync() method:

dwtObject.SelectDeviceAsync(sourceList[selectSources.selectedIndex]).then(() => {

return dwtObject.OpenSourceAsync()

}).then(() => {

return dwtObject.AcquireImageAsync({
    IfFeederEnabled: document.getElementById("ADF").checked,
    PixelType: pixelType,
    Resolution: parseInt(document.getElementById("Resolution").value),
    IfDisableSourceAfterAcquire: true
})

}).then(() => {
if (dwtObject) {
    dwtObject.CloseSource();
}
}).catch(
    (e) => {
    console.error(e)
    }
)

Note: There are two image acquisition methods in Dynamic Web TWAIN: AcquireImage() and AcquireImageAsync(). The difference between them is that AcquireImage() is used for previous versions of Dynamic Web TWAIN, while AcquireImageAsync() is used for Dynamic Web TWAIN v18.0 and later versions.

The full steps to create a web application that can scan documents from eSCL scanners:

Apply for a Dynamsoft Trial License.
Install Dynamic Web TWAIN SDK.
```
npm install dwt
```

Include the Dynamic Web TWAIN SDK in your web application.

<script src="node_modules/dwt/dist/dynamsoft.webtwain.min.js"></script>

Create a Dynamic Web TWAIN object and bind it to an HTML div element.

Dynamsoft.DWT.ProductKey = "DLS2eyJoYW5kc2hha2VDb2RlIjoiMjAwMDAxLTE2NDk4Mjk3OTI2MzUiLCJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSIsInNlc3Npb25QYXNzd29yZCI6IndTcGR6Vm05WDJrcEQ5YUoifQ==";
  Dynamsoft.DWT.ResourcesPath = "node_modules/dwt/dist/";
  var dwtObject = null;
  Dynamsoft.DWT.CreateDWTObjectEx({ "WebTwainId": "container" }, (obj) => {
    dwtObject = obj;

    dwtObject.Viewer.bind(document.getElementById("document-container"));
    dwtObject.Viewer.width = 640;
    dwtObject.Viewer.height = 640;
    dwtObject.Viewer.show();
    onReady();
  }, (errorString) => {
    console.log(errorString);
  });

  function onReady() {
    if (dwtObject != null) {

      dwtObject.IfShowUI = false;

      dwtObject.GetDevicesAsync(Dynamsoft.DWT.EnumDWT_DeviceType.TWAINSCANNER | Dynamsoft.DWT.EnumDWT_DeviceType.ESCLSCANNER).then((sources) => {
        sourceList = sources;

        selectSources.options.length = 0;
        for (let i = 0; i < sources.length; i++) {
          let option = document.createElement("option");
          option.text = sources[i].displayName;
          option.value = i.toString();
          selectSources.add(option);
        }
      });
    }
  }

Create a button to scan documents from eSCL scanners.

<button onclick="acquireImage()">Scan Documents</button>

function acquireImage() {
    if (!dwtObject)
      return;

    if (selectSources) {
      var pixelTypeInputs = document.getElementsByName("PixelType");
      for (var i = 0; i < pixelTypeInputs.length; i++) {
        if ((pixelTypeInputs[i]).checked) {
          pixelType = (pixelTypeInputs[i]).value;
          break;
        }
      }
      dwtObject.SelectDeviceAsync(sourceList[selectSources.selectedIndex]).then(() => {
        return dwtObject.OpenSourceAsync()
      }).then(() => {
        return dwtObject.AcquireImageAsync({
          IfFeederEnabled: document.getElementById("ADF").checked,
          PixelType: pixelType,
          Resolution: parseInt(document.getElementById("Resolution").value),
          IfDisableSourceAfterAcquire: true
        })
      }).then(() => {
        if (dwtObject) {
          dwtObject.CloseSource();
        }
      }).catch(
          (e) => {
            console.error(e)
          }
        )
    } else {
      alert("No Source Available!");
    }
  }

Run the web application and scan documents from eSCL scanners.
```
python -m http.server
```

Scan Documents from Android Web Browser

On desktop operating systems, to make Dynamic Web TWAIN API work, you need to first install the Dynamsoft service. It is the same to Android. In Google Play, search for Dynamsoft Service and install it.