Dev.to

How to Scan Documents from Document Scanners Over a Local Network Using JavaScript and HTML5

Dynamic Web TWAIN Service is the core component of the Dynamic Web TWAIN SDK. It enables you to acquire documents from document scanners over a local network using REST API. This API overcomes the limitations of traditional browser-based scanning solutions by allowing you to capture documents from scanners connected to any machine on the same local network. This article will guide you through the process of setting up and using the Dynamic Web TWAIN Service to acquire documents from document scanners using HTML5 and JavaScript. Web Document Scanning Application Demo Prerequisites Install Dynamic Web TWAIN Service on your host machine. Windows: Dynamsoft-Service-Setup.msi macOS: Dynamsoft-Service-Setup.pkg Linux: Dynamsoft-Service-Setup.deb Dynamsoft-Service-Setup-arm64.deb Dynamsoft-Service-Setup-mips64el.deb Dynamsoft-Service-Setup.rpm Request a free trial license for Dynamic Web TWAIN Service. Enable Network Access for Dynamic Web TWAIN Service By default, the Dynamic Web TWAIN Service only accepts requests from localhost. To enable access over your local network, bind the service to your machine's IP address via the configuration page http://127.0.0.1:18625/ in your web browser. REST API Documentation To integrate scanning capabilities in your web app, refer to the official REST API documentation: REST API Endpoints Scanner Parameters Steps to Implement Document Acquisition in HTML5 and JavaScript To save time, download the sample code that demonstrates how to use the Dynamsoft Document Viewer. In this tutorial, you'll learn how to extend the sample by integrating the following features: Popup Window for Managing Document Scanners: This window allows users to select a scanner, configure scan settings, and initiate the scanning process via a REST API. Scanned images are automatically added to the Dynamsoft Document Viewer for further processing, such as annotation or saving as PDF. Popup Window for Capturing Images from the Camera: Using the getUserMedia API, this window enables users to capture multiple images with the device's built-in or connected camera. Captured images can then be viewed and annotated in the Document Viewer. Dropdown Menu for Selecting Input Source (File, Camera, Scanner): This menu allows users to choose the input method. Based on the selection, the appropriate popup interface is launched for image acquisition. Step 1: Manage Document Scanners in the Browser To enable document scanning from a local or network scanner: In index.html, add the following code snippet. The layout includes a dropdown to select the scanner source, options for resolution, and an auto feeder checkbox. The buttons will trigger the scanning process or cancel it. Scanner Source: Auto Feeder 100 150 200 300 OK Cancel In main.js, add the following JavaScript code. let host = "http://127.0.0.1:18622"; const acquireDocumentButton = document.getElementById('acquireDocument'); const cancelCaptureButton = document.getElementById('cancelCapture'); cancelCaptureButton.addEventListener('click', () => { document.getElementById("pop-scanner").style.display = "none"; }); acquireDocumentButton.addEventListener('click', async () => { document.getElementById("pop-scanner").style.display = "none"; let select = document.getElementById('sources'); let scanner = select.value; if (scanner == null || scanner.length == 0) { alert('Please select a scanner.'); return; } let license = document.getElementById('licensekey').value; let resolutionSelect = document.getElementById('Resolution'); let adfCheck = document.getElementById('ADF'); let parameters = { license: license, device: JSON.parse(scanner)['device'], }; parameters.config = { PixelType: 2, Resolution: parseInt(resolutionSelect.value), IfFeederEnabled: adfCheck.checked, }; let url = host + '/api/device/scanners/jobs'; try { let response = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(parameters) }); if (response.ok) { let job = await response.json(); let jobId = job.jobuid; let blobs = []; let url = host + '/api/device/scanners/jobs/' + jobId + '/next-page'; while (true) { try { let response = await fetch(url); if (response.status == 200) { const arrayBuffer = await response.arrayBuffer(); const blob = new Bl

Apr 1, 2025 - 10:34
 0
How to Scan Documents from Document Scanners Over a Local Network Using JavaScript and HTML5

Dynamic Web TWAIN Service is the core component of the Dynamic Web TWAIN SDK. It enables you to acquire documents from document scanners over a local network using REST API. This API overcomes the limitations of traditional browser-based scanning solutions by allowing you to capture documents from scanners connected to any machine on the same local network. This article will guide you through the process of setting up and using the Dynamic Web TWAIN Service to acquire documents from document scanners using HTML5 and JavaScript.

Web Document Scanning Application Demo

Prerequisites

Enable Network Access for Dynamic Web TWAIN Service

By default, the Dynamic Web TWAIN Service only accepts requests from localhost. To enable access over your local network, bind the service to your machine's IP address via the configuration page http://127.0.0.1:18625/ in your web browser.

Dynamic Web TWAIN Service Configuration

REST API Documentation

To integrate scanning capabilities in your web app, refer to the official REST API documentation:

Steps to Implement Document Acquisition in HTML5 and JavaScript

To save time, download the sample code that demonstrates how to use the Dynamsoft Document Viewer. In this tutorial, you'll learn how to extend the sample by integrating the following features:

  1. Popup Window for Managing Document Scanners: This window allows users to select a scanner, configure scan settings, and initiate the scanning process via a REST API. Scanned images are automatically added to the Dynamsoft Document Viewer for further processing, such as annotation or saving as PDF.
  2. Popup Window for Capturing Images from the Camera: Using the getUserMedia API, this window enables users to capture multiple images with the device's built-in or connected camera. Captured images can then be viewed and annotated in the Document Viewer.
  3. Dropdown Menu for Selecting Input Source (File, Camera, Scanner): This menu allows users to choose the input method. Based on the selection, the appropriate popup interface is launched for image acquisition.

Step 1: Manage Document Scanners in the Browser

capture document from file, camera and scanner

To enable document scanning from a local or network scanner:

  1. In index.html, add the following code snippet. The layout includes a dropdown to select the scanner source, options for resolution, and an auto feeder checkbox. The buttons will trigger the scanning process or cancel it.

     id="pop-scanner" class="overlay">
     class="popup">
         class="form-group">
             for="sources">Scanner Source:
             id="sources">
class="form-group"> type="checkbox" id="ADF" checked="checked">Auto Feeder id="Resolution"> value="100">100 value="150">150 value="200">200 value="300">300