Resources Base
Table of contents

Development

How To Enable Remote Scan?

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.0
    • Version 16.2
    • Version 16.1.1
    Change +
    © 2003–2021 Dynamsoft. All rights reserved.
    Privacy Statement / Site Map / Home / Purchase / Support