Building Web Apps to Scan Documents with eSCL Scanners on a Local Network
Starting from version 18.0, the Dynamic Web TWAIN SDK has expanded its support for the eSCL protocol. This enhancement enables the SDK to support not only USB-connected scanners but also network scanners. Furthermore, Dynamsoft has released an Android app for eSCL communication, benefiting both Android and Chromebook users. This breakthrough allows for a seamless experience, granting access to wireless scanners from any desktop (Windows, Linux, macOS, ChromeOS, Raspberry Pi OS) and Android browsers. The article will provide a step-by-step guide on how to utilize the new Dynamic Web TWAIN API to remotely scan documents via local network eSCL scanners.
What you’ll build: A browser-based web app that discovers eSCL scanners on the local network, acquires document images from them with Dynamic Web TWAIN, and displays the scanned pages directly in the browser.
Key Takeaways
- Dynamic Web TWAIN v18+ can enumerate eSCL scanners through
GetDevicesAsync()alongside TWAIN and other supported device types. - The
AcquireImageAsync()flow works for network eSCL scanners after a device is selected and opened with the async device APIs. - eSCL support makes wireless scanner access practical from desktop, Chromebook, Raspberry Pi, and Android browser environments.
- Browser-based network scanning is possible without writing raw eSCL protocol code yourself.
Common Developer Questions
How do I scan documents from an eSCL scanner in a browser-based web app?
Use Dynamic Web TWAIN’s async device APIs to enumerate devices that include the ESCLSCANNER type, select the desired network scanner, open it, and call AcquireImageAsync() with the chosen feeder, resolution, and pixel settings. The scanned pages are then available in the browser viewer immediately.
Why should I use GetDevicesAsync() instead of GetSourceNames() for eSCL scanners?
Because GetDevicesAsync() is the newer API that can return typed device objects for eSCL alongside TWAIN, WIA, SANE, and other supported sources. GetSourceNames() does not provide the same device-model coverage for the newer network scanning workflow.
Can Dynamic Web TWAIN scan wireless documents from Android or Chromebook browsers?
Yes. The article’s eSCL workflow is specifically designed to extend network scanning to browser environments such as Android and ChromeOS, where USB TWAIN access is not the usual path. That is one of the main advantages of using a network protocol-backed acquisition flow.
Why eSCL?
If you are using a document scanner from manufacturers like Epson, Canon, HP, or Fujitsu, you might notice that these scanners support various protocols including TWAIN, SANE, eSCL, WIA, and ICA. The advantage of eSCL lies in its network protocol nature, allowing you to connect to the scanner from any device on the same network, irrespective of the operating system.
The New Dynamic Web TWAIN API for eSCL Scanners
Starting with Dynamic Web TWAIN v18.0, the preferred method to list all supported scanners is to use the GetDevicesAsync() method. Developers familiar with previous versions will need to update their API usage to locate eSCL scanners. The old GetSourceNames() method remains compatible with other scanner protocols, such as TWAIN, SANE, WIA, and ICA.
Here is the code snippet for querying scanners:
var selectSources = document.getElementById("sources");
var sourceList = [];
dwtObject.GetDevicesAsync(Dynamsoft.DWT.EnumDWT_DeviceType.TWAINSCANNER | Dynamsoft.DWT.EnumDWT_DeviceType.TWAINX64SCANNER | 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, 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: Dynamic Web TWAIN offers two image acquisition methods: AcquireImage() and AcquireImageAsync(). AcquireImage() is intended for use with earlier versions, while AcquireImageAsync() is designed for use starting with Dynamic Web TWAIN v18.0.
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. Replace the license key with your own.
Dynamsoft.DWT.ProductKey = "LICENSE-KEY"; 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 | EnumDWT_DeviceType.TWAINX64SCANNER | 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 by hosting the HTML file with a Python HTTP server.
python -m http.server
Scan Documents from an Android Web Browser
On desktop operating systems, to make the Dynamic Web TWAIN API work, you first need to install the Dynamic Web TWAIN Service. The same applies to Android. Search for Dynamic Web TWAIN Service in Google Play and install it.
Alternatively, you can directly download the APK from Dynamsoft’s website.
Launch the Android application to start the background eSCL scanner service.
You can click the Online Demo link to launch the online demo.
As long as you have an eSCL scanner connected to your local network, the scanner will be discovered automatically.
Then, you can place paper documents on the scanner and conveniently scan them to your Android device.