How to Access Scanner and Scan Documents from iOS Web Browsers via Network
Tags: ios, webdev, javascript, document
Published: 2022-12-29 07:08:33

Assume you have a document scanner at home or in the office. Is it possible to use iPhone or iPad web browsers to scan documents from the scanner? Before [Dynamic Web TWAIN v18](https://www.dynamsoft.com/web-twain/overview/), the answer is no, because there is no standard JavaScript API for scanner access. **Remote scan** is the most exciting feature of Dynamic Web TWAIN v18. It turns any scanners into network scanners and allows you to access them from any web browsers on **iOS**, **iPadOS**, **Android**, **ChomeOS**, **Raspberri Pi OS**, **Windows**, **Linux** and **macOS**. This article aims to help you figure out how Dynamic Web TWAIN remote scan works and how to integrate the remote scan functionality into your web applications.

## How Dynamic Web TWAIN Remote Scan Works
![Dynamic Web TWAIN remote scan](https://www.dynamsoft.com/remote-scan/docs/assets/imgs/image1.png)

**Dynamsoft service** was originally a local service that runs on the same machine as the web application. The first time you open a web document scanning application developed with Dynamic Web TWAIN, you must install the Dynamsoft service on your machine and refresh the web page. Dynamsoft service can find the available wired and wireless scanners. The communication between Dynamsoft service and web applications is implemented by HTTP requests and web sockets. The Dynamsoft service of Dynamic Web TWAIN v18 evolved from a local service to a network service by adding **Bonjour** support. It can now be discovered on a local network. 

**Dynamsoft proxy** is responsible for discovering Dynamsoft services on a local network and transferring the requests from web applications to Dynamsoft services and vice versa. It can be deployed independently on Windows, Linux or macOS.

Web applications communicate with Dynamsoft proxy server to get remote Dynamsoft services and corresponding scanners. The document scanning functionality provided by Dynamic Web TAWIN remote scan API only relies on HTTP requests.

## The Scenarios to Use Remote Scan
- You only have wired document scanners and you want to scan documents from them to your mobile web browsers.
- Your scanner is only compatible with Windows and you want to scan documents from it to your Linux or macOS web browsers.
- You are sick of the wired scanner, but don't want to purchase a more expensive network scanner to replace the existing one.
- You are reluctant to install Dynamsoft service on every machine in your office.
- You want an economical document management solution for your small business.


## Steps to Implement Web Document Scanning with Remote Scan
In the following sections, you will see how to set up the remote scan service and how to implement a web document scanning application with a few lines of JavaScript code.

### Establish the Remote Scan Solution
The remote scan solution requires the deployment of Dynamsoft service and Dynamsoft proxy. You can install Dynamsoft services on multiple machines running different operating systems, and install Dynamsoft proxy on one machine. 

#### Dynamsoft Service
Dynamsoft service is a part of Dynamic Web TWAIN SDK. You can download it via npm command:

```bash
npm install dwt
```

The service installers are located in the `node_modules/dwt/dist/dist` folder.

```bash
dist
|-- DynamsoftServiceSetup.deb
|-- DynamsoftServiceSetup.msi
|-- DynamsoftServiceSetup.pkg
|-- DynamsoftServiceSetup.rpm
|-- DynamsoftServiceSetup-arm64.deb
```

As you can see, Dynamsoft service support **Windows**, **Linux (x64, arm64)** and **macOS**. You can not only deploy Dynamsoft service on PCs and servers, but also on embedded devices like **Raspberry Pi** and **Jetson Nano**.

After installing Dynamsoft service, you need to configure the host address, port and SSL port by visiting `http://127.0.0.1:18625/` in your web browser. 

- host: Your local IP address. E.g. `192.168.0.72`
- port: `18622`
- SSL port: `18623`

By default, the built-in Bonjour service is disabled. To make Dynamsoft service discoverable on the local network, you need to enable the Bonjour service option.

#### Dynamsoft Proxy
The Dynamsoft proxy is available for download on [Dynamsoft customer portal](https://www.dynamsoft.com/customer/download). It also supports Windows, Linux and macOS.
    
![Dynamsoft proxy](https://www.dynamsoft.com/codepool/img/2022/12/dynamsoft-proxy-download.png)

After installing the proxy, open `http://127.0.0.1:18625/admin/proxy.html` in your web browser to configure the host address, host name, port, SSL port and certificate.

- host: Your local IP address. E.g. `192.168.0.129`
- host name: A custom name for the proxy server
- port: `80`
- SSL port: `443`
- Certificate: An SSL certificate is required for the proxy to work. If you don't have one, you can download the developer certificate provided by Dynamsoft from the [customer portal](https://www.dynamsoft.com/customer/account/certificate). 

Click the `UPDATE` button to save the configurations, and then verify the proxy status by opening `http://<YOUR-IP-ADDRESS>` in your web browser. If the proxy works, you will see the following page.

![Dynamsoft proxy works](https://www.dynamsoft.com/codepool/img/2022/12/dynamsoft-proxy-work.png)

When connecting to the proxy server, you can either use the **IP address** with **HTTP** or a **custom domain name** with **HTTPS**. To use HTTPS, create a custom domain name and bind it to your IP address in the customer portal.
![Dynamsoft domain certificate](https://www.dynamsoft.com/codepool/img/2022/12/dynamsoft-domain-certificate.png)        


### Scan Documents from Any Web Browsers
1. Install Dynamic Web TWAIN SDK via npm command:

    ```bash
    npm install dwt
    ```
    
    Include the SDK in your HTML file and configure the resource path:
    ```html
    <script src="node_modules/dwt/dist/dynamsoft.webtwain.min.js"></script>

    <script type="text/javascript">
    Dynamsoft.DWT.ResourcesPath = "node_modules/dwt/dist/";
    </script>
    ```
2. Apply for a [license key](https://www.dynamsoft.com/customer/license/trialLicense?product=dwt) and set the license key in JavaScript code:

    ```js
    Dynamsoft.DWT.ProductKey = "LICENSE-KEY";
    ```
3. Create a Dynamic Web TWAIN object and bind it to an HTML div element:
    
    ```javascript
    <div id="document-container"></div>
    <script type="text/javascript">
      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);
      });
    </script>
    ```
4. Look for Dynamsoft services via Dynamsoft proxy server:
    
    ```javascript
    var url = 'https://xiao.scannerproxy.com'; // Configure your domain name on https://www.dynamsoft.com/customer/account/certificate
    // var url = 'http://192.168.0.129';
    function onReady() {
      Dynamsoft.DWT.FindDynamsoftServiceAsync(url).then(function (services) {
        allServices = services;
        if (services && services.length > 0) {
          var ddlService, i = 0;
          ddlService = document.getElementById('selServices');
          ddlService.options.length = 0;
          ddlService.options.add(new Option('--Select a service--', '-1'));

          for (; i < services.length; i++) {
            var service = services[i];
            ddlService.options.add(new Option(service.attrs.ty, i));
          }

          ddlService.selectedIndex = 0;
        }
      }, function (err) {
        console.log(err);
      });
    }
    ```

5. Scan documents from a selected scanner:
    
    ```javascript
    function acquireImage() {
      if (dwtRemoteScanObject) {
        var selDevices = document.getElementById('selDevices');
        if (selDevices) {
          if (selDevices.selectedIndex - 1 >= 0) {
            dwtRemoteScanObject.selectDevice(allDevices[selDevices.selectedIndex - 1]).then(function () {
              return dwtRemoteScanObject.acquireImage({
                IfDisableSourceAfterAcquire: true 
              }, dwtObject);
            }).then(function () {
              return dwtRemoteScanObject.closeSource();
            }).catch(function (exp) {
              alert(exp.message);
            });
          }
        }
      }
    }
    ```    
6. Run Python HTTP server to host the HTML file:

    ```bash
    python -m http.server 8000 --bind YOUR-IP-ADDRESS
    ```

You can now scan documents from any web browsers on any devices, such as **iPad**:

![Dynamic Web TWAIN UI-less API sample](https://www.dynamsoft.com/codepool/img/2022/12/remote-scan-document-network-scanner.jpg)


## Source Code
[https://github.com/yushulx/dynamic-web-twain-custom-ui/blob/main/dwt-remote.html](https://github.com/yushulx/dynamic-web-twain-custom-ui/blob/main/dwt-remote.html)