Web Demos

BARCODE READER SDK DEMO

Explore the flexibe barcode reading settings to optimize for your specific usage scenario.

WEB TWAIN SDK DEMO

Try the most popular web scanner features: scan images, import local images and PDF files, edit, save to local, upload to database, and etc.

BARCODE READER JAVASCRIPT DEMO

Transform any camera-equipped devices into real-time, browser-based barcode and QR code scanners.

MRZ SCANNER WEB DEMO

Detects the machine-readable zone of a passport, scans the text, and parses into human-readable data.

APP STORE DEMOS

BARCODE READER SDK FOR IOS

BARCODE READER SDK FOR ANDROID

VIEW MORE DEMOS >

Dynamic Web TWAIN 17.2 Released All-in-One Web-based Document Scanning Widget

Dynamic Web TWAIN 17.2 Released All-in-One Web-based Document Scanning Widget

In Dynamic Web TWAIN 17.2, Dynamsoft brings a new API called scanDocument(), which launches a full-fledged HTML5 document scanning widget based on the WebAssembly technology. With a few lines of JavaScript code, you can develop a web-based document management app for both desktop and mobile web browsers.

SDK Installation

Steps to Deploy and Activate Dynamic Web TWAIN SDK

If you are new to Dynamic Web TWAIN, here are the steps to get started:

  1. Open <Dynamic Web TWAIN version>/Resources/dynamsoft.webtwain.config.js to configure the license key:

     Dynamsoft.DWT.ProductKey = 'LICENSE KEY';
    
  2. Copy <Dynamic Web TWAIN version>/Resources to the static resource folder of your web project.
  3. Create an index.html file. The following code snippet demonstrates how to scan documents from scanners or cameras.

    Scanner

     <!DOCTYPE html>
     <html>
        
     <head>
         <title>Scan Document from Scanner</title>
         <script type="text/javascript" src="Resources/dynamsoft.webtwain.initiate.js"></script>
         <script type="text/javascript" src="Resources/dynamsoft.webtwain.config.js"></script>
     </head>
        
     <body>
         <input type="button" value="scan" onclick="acquireScanner();" />
        
         <div id="container"></div>
        
         <script type="text/javascript">
             var scannerObj;
             Dynamsoft.DWT.CreateDWTObjectEx({
                 WebTwainId: 'scanner',
                 UseLocalService: true,
             }, function (obj) {
                 scannerObj = obj;
                 scannerObj.Viewer.bind(document.getElementById('container'));
                 scannerObj.Viewer.width = 480;
                 scannerObj.Viewer.height = 640;
                 scannerObj.Viewer.show();
             }, function (ec, es) {
                 console.log(es);
             });
        
             function acquireScanner() {
                 if (scannerObj) {
                     var OnacquireScannerSuccess, OnacquireScannerFailure;
                     OnacquireScannerSuccess = OnacquireScannerFailure = function () {
                         scannerObj.CloseSource();
                     };
        
                     scannerObj.SelectSource();
                     scannerObj.OpenSource();
                     scannerObj.IfDisableSourceAfterAcquire = true;
                     scannerObj.AcquireImage(OnacquireScannerSuccess, OnacquireScannerFailure);
                 }
             }
         </script>
     </body>
     </html>
    

    capture documents from scanners

    Camera

    Create an index2.html file.

     <!DOCTYPE html>
     <html>
    
     <head>
         <title>Use Dynamic Web TWAIN to Scan from Camera</title>
         <script type="text/javascript" src="Resources/dynamsoft.webtwain.initiate.js"></script>
         <script type="text/javascript" src="Resources/dynamsoft.webtwain.config.js"></script>
         <script type="text/javascript" src="Resources/addon/dynamsoft.webtwain.addon.camera.js"></script>
     </head>
    
     <body>
         <div id="container" style="width: 720px;height:720px"></div>
    
         <script type="text/javascript">
             var cameraObj;
             Dynamsoft.DWT.CreateDWTObjectEx({
                 WebTwainId: 'camera',
                 UseLocalService: false
             }, function (obj) {
                 cameraObj = obj;
                 cameraObj.Viewer.bind(document.createElement('div'));
                 cameraObj.Addon.Camera.scanDocument({
                     element: document.getElementById("container"),
                     scannerViewer: {
                         fullScreen: true
                     }
                 }).then(
                     function () { console.log("OK"); },
                     function (error) { console.log(error.message); });
    
             }, function (ec, es) {
                 console.log(es);
             });
    
         </script>
     </body>
    
     </html>
    

    capture documents from cameras

The boolean parameter UseLocalService is used to control the API behavior. If set to true, the SDK would communicate with the local Dynamsoft service to acquire images from scanners. If set to false, the SDK would directly call JavaScript APIs to capture images from cameras.

What You Can Do with the Document Scanning Widget

As you can see in the paragraph above, the scanDocument() API creates a full-functional widget that supports setting camera resolution, triggering document edge detection, loading images from local storage, switching between front and rear cameras, auto-capturing documents and managing multiple documents.

web-based document scanning widget

You can enter the document management viewer to edit and save documents. Perspective correction is applied to all auto-captured documents in the viewer.

perspective correction

If the document quality is not good enough, you can also use the filter to post-process the scanned document.

document filter

The widget is customizable by setting the following configurations:

  • element: an HTML5 element used to bind and show the widget.
  • scannerViewer: the primary window of the widget.
  • filterViewer: a toolbox consisting of filters.
  • cropViewer: the viewer used to crop the document.

Multiple Camera Switching

More and more mobile devices have more than one back-facing cameras. By default, the document scanning widget will open the main back-facing camera and the front-facing camera. If you want to select other back-facing cameras, you can get the camera list first and then specify the camera ID in the scannerViewer configuration:

<select size="1" id="CameraSource" style="position: relative; width: 220px;" onchange="onCameraChange()"></select>

function updateCameraList() {
    if (!cameraObj) return;
    var source = document.getElementById('CameraSource');
    source.options.length = 0;
    cameraObj.Addon.Camera.getSourceList().then((list) => {
        for (var i = 0; i < list.length; i++) {
            var option = document.createElement('option');
            option.text = list[i].deviceId || list[i].label
            source.options.add(option);
        }
        createCameraScanner(source.options[source.options.length - 1].text);
    });

}

function onCameraChange() {
    if (!cameraObj) return;
    var source = document.getElementById('CameraSource');
    var index = source.selectedIndex;
    if (index < 0) return;
    var option = source.options[index];
    cameraObj.Addon.Camera.selectSource(option.text).then(function (camera) {
        createCameraScanner(option.text);
    });
}

async function createCameraScanner(deviceId) {
    await cameraObj.Addon.Camera.closeVideo();
    cameraObj.Addon.Camera.scanDocument({
        scannerViewer: {
            deviceId: deviceId,
            fullScreen: true
        }

    }).then(
        function () { console.log("OK"); },
        function (error) { console.log(error.message); });
}

Release Notes

https://www.dynamsoft.com/web-twain/docs/info/schedule/stable.html

Online Documentation

https://www.dynamsoft.com/web-twain/docs/info/api/?ver=latest

Sample Code

https://www.dynamsoft.com/web-twain/resources/code-gallery/

Try Online Demo

https://demo.dynamsoft.com/web-twain/mobile-online-camera-scanner/

Subscribe Newsletter

Subscribe to our mailing list to get the monthly update.

Subscribename@email.com