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 >
Dev Center
Table of contents

Project Deployment and End-user Installation

How to enable Remote Scan?

Remote Scan means directly scanning documents from a remote document scanner to a web browser client of a client machine. No installation is required on the client machine, which makes it easy for all end users to utilize the web scanning feature of the Dynamic Web TWAIN SDK.

You can learn more detail about the feature via this blog.

On Windows desktop where the scanner is physically connected

  • Install Dynamsoft Service.
  • Configure the Service by adding the following line to the file DSConfiguration.ini .

    Server=192.168.8.221
    

    The file DSConfiguration.ini is located under C:\Windows\SysWOW64\Dynamsoft\DynamsoftServicex64_16. We are assuming the IP of this desktop is 192.168.8.221 and that the firewall will allow requests on the ports 18622 and 18623. From v16.2, you can do the same on this page http://127.0.0.1:18625/admin/

  • Find the service Dynamsoft Service in Windows services list and restart it.

In your application

  • Create a WebTwain instance to connect to that service and list all available scanners.

    <select id="source"></select>
    
    var host = "192.168.8.221",
      DWServiceObject;
    function createDWTForScan() {
      var dwtConfig = {
        WebTwainId: "remoteScan",
        Host: host,
        Port: "18622",
        PortSSL: "18623",
        UseLocalService: true,
      };
      Dynamsoft.DWT.CreateDWTObjectEx(
        dwtConfig,
        function (dwt) {
          DWServiceObject = dwt;
          console.log("service connected!");
          // List the available scanners
          DWServiceObject.GetSourceNamesAsync().then(
            function (devices) {
              for (var i = 0; i < devices.length; i++)
                document
                  .getElementById("source")
                  .options.add(new Option(devices[i], i));
            },
            function (error) {
              console.log(error);
            }
          );
        },
        function (error) {
          console.log(error);
        }
      );
    }
    
  • Create another WebTwain instance to show and process the scanned documents.

    As the WebTwain instance created in the last step is interacting with a Dynamsoft Service running remotely, it’s recommended to only use it for scanning. Therefore, we create another WebTwain instance that receives the scanned data for further processing.

    <div id="dwtcontrolContainer"></div>
    
    var DWObject;
    Dynamsoft.DWT.Containers = [
      { ContainerId: "dwtcontrolContainer", Width: "585px", Height: "513px" },
    ];
    Dynamsoft.DWT.ProductKey = "YOUR-PRODUCT-KEY";
    Dynamsoft.DWT.UseLocalService = false; //Create the `WebTwain` instance in WASM mode as it doesn't need to scan documents
    function Dynamsoft_OnReady() {
      DWObject = Dynamsoft.DWT.GetWebTwain("dwtcontrolContainer");
    }
    
  • Use the first WebTwain instance, DWServiceObject, to scan documents.

    function AcquireImage() {
      var OnAcquireImageSuccess,
        OnAcquireImageFailure = function () {
          DWServiceObject.CloseSource();
        };
      var deviceConfiguration = {
        SelectSourceByIndex: 0,
        IfShowUI: true,
        PixelType: Dynamsoft.DWT.EnumDWT_PixelType.TWPT_RGB,
        Resolution: 300,
        IfFeederEnabled: false,
        IfDuplexEnabled: false,
        IfDisableSourceAfterAcquire: true,
        RemoteScan: true,
        ShowRemoteScanUI: true,
      };
      deviceConfiguration.SelectSourceByIndex =
        document.getElementById("source").selectedIndex;
      DWServiceObject.AcquireImage(
        deviceConfiguration,
        OnAcquireImageSuccess,
        OnAcquireImageFailure
      );
    }
    

    We transfer the scanned documents to the second WebTwain instance, DWObject, in the event OnPostTransferAsync.

    DWServiceObject.RegisterEvent("OnPostTransferAsync", function (outputInfo) {
      DWServiceObject.ConvertToBlob(
        [DWServiceObject.ImageIDToIndex(outputInfo.imageId)],
        Dynamsoft.DWT.EnumDWT_ImageType.IT_PNG,
        function (result, indices, type) {
          DWObject.LoadImageFromBinary(
            result,
            function () {
              console.log("LoadImageFromBinary success");
              DWServiceObject.RemoveImage(
                DWServiceObject.ImageIDToIndex(outputInfo.imageId)
              );
            },
            function (errorCode, errorString) {
              console.log(errorString);
            }
          );
        },
        function (errorCode, errorString) {
          console.log(errorString);
        }
      );
    });
    

The following is the complete code, note that we are referencing the library from the CDN “unpkg” for simplicity.

<script
  type="text/javascript"
  src="https://unpkg.com/dwt@16.2.4/dist/dynamsoft.webtwain.min.js"
></script>
<select id="source"></select>
<input type="button" value="Scan" onclick="AcquireImage();" />
<div id="dwtcontrolContainer"></div>
<script type="text/javascript">
  var DWObject;
  window.onload = function () {
    Dynamsoft.DWT.Containers = [
      { ContainerId: "dwtcontrolContainer", Width: "585px", Height: "513px" },
    ];
    Dynamsoft.DWT.ProductKey = "YOUR_PRODUCT_KEY";
    Dynamsoft.DWT.UseLocalService = false; //Create the `WebTwain` instance in WASM mode as it doesn't need to scan documents
    Dynamsoft.DWT.ResourcesPath = "https://unpkg.com/dwt@16.2.4/dist";
    Dynamsoft.DWT.Load();
  };
  function Dynamsoft_OnReady() {
    DWObject = Dynamsoft.DWT.GetWebTwain("dwtcontrolContainer");
    createDWTForScan();
  }
  var host = "192.168.8.221",
    DWServiceObject;
  function createDWTForScan() {
    var dwtConfig = {
      WebTwainId: "remoteScan",
      Host: host,
      Port: "18622",
      PortSSL: "18623",
      UseLocalService: true,
    };
    Dynamsoft.DWT.CreateDWTObjectEx(
      dwtConfig,
      function (dwt) {
        DWServiceObject = dwt;
        console.log("service connected!");
        DWServiceObject.GetSourceNamesAsync().then(
          function (devices) {
            for (var i = 0; i < devices.length; i++)
              document
                .getElementById("source")
                .options.add(new Option(devices[i], i));
          },
          function (error) {
            console.log(error);
          }
        );

        DWServiceObject.RegisterEvent(
          "OnPostTransferAsync",
          function (outputInfo) {
            DWServiceObject.ConvertToBlob(
              [DWServiceObject.ImageIDToIndex(outputInfo.imageId)],
              Dynamsoft.DWT.EnumDWT_ImageType.IT_PNG,
              function (result, indices, type) {
                DWObject.LoadImageFromBinary(
                  result,
                  function () {
                    console.log("LoadImageFromBinary success");
                    DWServiceObject.RemoveImage(
                      DWServiceObject.ImageIDToIndex(outputInfo.imageId)
                    );
                  },
                  function (errorCode, errorString) {
                    console.log(errorString);
                  }
                );
              },
              function (errorCode, errorString) {
                console.log(errorString);
              }
            );
          }
        );
      },
      function (error) {
        console.log(error);
      }
    );
  }
  function AcquireImage() {
    var OnAcquireImageSuccess,
      OnAcquireImageFailure = function () {
        DWServiceObject.CloseSource();
      };
    var deviceConfiguration = {
      SelectSourceByIndex: 0,
      IfShowUI: true,
      PixelType: Dynamsoft.DWT.EnumDWT_PixelType.TWPT_RGB,
      Resolution: 300,
      IfFeederEnabled: false,
      IfDuplexEnabled: false,
      IfDisableSourceAfterAcquire: true,
      RemoteScan: true,
      ShowRemoteScanUI: true,
    };
    deviceConfiguration.SelectSourceByIndex =
      document.getElementById("source").selectedIndex;
    DWServiceObject.AcquireImage(
      deviceConfiguration,
      OnAcquireImageSuccess,
      OnAcquireImageFailure
    );
  }
</script>

Is this page helpful?

YesYes NoNo

In this article:

latest version

    • Latest Version
    • Version 17.2.1
    • Version 17.1.1
    • Version 17.0
    • Version 16.2
    • Version 16.1.1
    Change +
    © 2003–2022 Dynamsoft. All rights reserved.
    Privacy Statement / Site Map / Home / Purchase / Support