How to Scan Documents from eSCL Scanners in Web Applications
Tags: webdev, javascript, programming, scanner
Published: 2022-12-27 01:15:37

Dynamsoft recently released a new version of [Dynamic Web TWAIN SDK](https://www.dynamsoft.com/web-twain/overview/) 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()](https://www.dynamsoft.com/web-twain/docs/info/api/WebTwain_Acquire.html#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()](https://www.dynamsoft.com/web-twain/docs/info/api/WebTwain_Acquire.html#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: 
```javascript
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()](https://www.dynamsoft.com/web-twain/docs/info/api/WebTwain_Acquire.html#acquireimageasync) method:

```javascript
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:
1. Apply for a [Dynamsoft Trial License](https://www.dynamsoft.com/customer/license/trialLicense?product=dwt).
2. Install Dynamic Web TWAIN SDK.
    
    ```bash
    npm install dwt
    ```
3. Include the Dynamic Web TWAIN SDK in your web application.
    
    ```html
    <script src="node_modules/dwt/dist/dynamsoft.webtwain.min.js"></script>
    ```
4. Create a Dynamic Web TWAIN object and bind it to an HTML div element.
    ```javascript
    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);
            }
          });
        }
      }
    ```
5. Create a button to scan documents from eSCL scanners.
    ```javascript
    <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!");
        }
      }
    ```
6. Run the web application and scan documents from eSCL scanners.
    
    ```bash
    python -m http.server
    ```

    ![scan documents from eSCL scanners](https://www.dynamsoft.com/codepool/img/2022/12/eSCL-document-scanner.png)

## 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. 

![install Dynamsoft service from Google Play](https://www.dynamsoft.com/codepool/img/2022/12/google-play-install-web-twain.png)

You can also download the [https://demo.dynamsoft.com/dwt/Resources/dist/DynamsoftServiceSetup.apk](https://demo.dynamsoft.com/dwt/Resources/dist/DynamsoftServiceSetup.apk) directly.

Launch the Android application to start the background eSCL scanner service.

![Web TWAIN Android service](https://www.dynamsoft.com/codepool/img/2022/12/web-twain-android-service.jpg)

You can click the `Online Demo` link to launch the online demo. 

![acquire documents from scanner and camera in Android web browsers](https://www.dynamsoft.com/codepool/img/2022/12/web-scanner-camera-capture.jpg)

As long as you have an eSCL scanner connected to your local network, the scanner will be discovered automatically.

![Access eSCL scanner from Android browser](https://www.dynamsoft.com/codepool/img/2022/12/android-browser-access-escl-scanner.jpg)

Then, you can put paper documents on the scanner and scan them to your Android device conveniently.

## Source Code
[https://github.com/yushulx/dynamic-web-twain-custom-ui/blob/main/dwt-ui.htm](https://github.com/yushulx/dynamic-web-twain-custom-ui/blob/main/dwt-ui.html)