How to Access SANE Scanners from Browser JavaScript on Linux

Dynamic Web TWAIN is a cross-platform document scanning SDK that allows developers to build document management applications using HTML5 and JavaScript on Windows, Linux, and macOS. The Linux edition of Dynamic Web TWAIN supports both x64 and amr64 Linux OS, which means in addition to desktop PCs, you can also scan documents on embedded devices such as Raspberry Pi and Jetson Nano which save lots of money for developer. This post will illustrate how to build a simple web application to scan documents from a SANE scanner on Ubuntu 14.04.

What you’ll build: A browser-based document scanning web app that accesses SANE-compatible scanners on Linux using JavaScript and the Dynamic Web TWAIN SDK, deployable on x64 and arm64 devices.

Key Takeaways

  • Dynamic Web TWAIN provides a JavaScript API for accessing SANE scanners directly from a web browser on Linux without native code.
  • The SDK supports both x64 and arm64 Linux, enabling document scanning on embedded devices like Raspberry Pi and Jetson Nano.
  • A lightweight nginx deployment is sufficient to host the scanning web app — no complex backend required.
  • The SANE backend must be properly configured and the scanner visible via scanimage -L before the web app can detect it.

Common Developer Questions

  • How do I access a SANE scanner from browser JavaScript on Linux?
  • Does Dynamic Web TWAIN support arm64 Linux devices like Raspberry Pi?
  • Why is my SANE scanner not detected by the web scanning app on Ubuntu?

What Is SANE and Why Use It for Linux Scanning?

SANE stands for “Scanner Access Now Easy” and is an application programming interface (API) that provides standardized access to any raster image scanner hardware. It is written for UNIX (including GNU/Linux). The equivalent of SANE is TWAIN on Windows.

Linux SANE document scanning

Build a Web Document Scanner with SANE and JavaScript

Step 1: Download the Dynamic Web TWAIN SDK

  • Dynamic Web TWAIN SDK

    The package contains Dynamic Web TWAIN JavaScript libraries and a backend SANE scanning service.

Step 2: Activate Your License Key

Get a 30-day free trial license and update the following JavaScript code:

Dynamsoft.DWT.ProductKey = 'LICENSE KEY';

Step 3: Create the Scanning Web App

  1. Create a project folder and a helloworld.html file.
  2. Copy Resources folder from Dynamic Web TWAIN SDK package to your project.
  3. Include webtwain.initiate.js and dynamsoft.webtwain.config.js to the HTML file.

     <head>
         <title>Use Dynamic Web TWAIN to Scan</title>
         <script type="text/javascript" src="Resources/dynamsoft.webtwain.initiate.js"></script>
         <script type="text/javascript" src="Resources/dynamsoft.webtwain.config.js"></script>
     </head>
    
  4. Create a div element for Dynamic Web TWAIN control.

     <div id="dwtcontrolContainer"></div>
    

    If you want to rename the id, you should also change the id in the dynamsoft.webtwain.config.js accordingly.

  5. Register an onReady event, which will be triggered as Dynamic Web TWAIN is initialized and ready to be used.

     Dynamsoft.DWT.RegisterEvent('OnWebTwainReady', Dynamsoft_OnReady);  
        
     var DWObject;
        
     function Dynamsoft_OnReady() {
        
         DWObject = Dynamsoft.DWT.GetWebTwain('dwtcontrolContainer');  
        
         if (DWObject) {
             var count = DWObject.SourceCount;
        
             for (var i = 0; i < count; i++)
                 document.getElementById("source").options.add(new Option(DWObject.GetSourceNameItems(i), i)); 
        
         }
     }
    
  6. Acquire an image according to the selected SANE scanner source.

     function AcquireImage() {
         if (DWObject) {
             var OnAcquireImageSuccess, OnAcquireImageFailure;
        
             OnAcquireImageSuccess = OnAcquireImageFailure = function (){
                 DWObject.CloseSource();
             };
        
             DWObject.SelectSourceByIndex(document.getElementById("source").selectedIndex);
             DWObject.OpenSource();
             DWObject.IfDisableSourceAfterAcquire = true;   
             DWObject.AcquireImage(OnAcquireImageSuccess, OnAcquireImageFailure);
         }
     }
    

    Remember to close the source when the scanning is finished!

Step 4: Deploy to an Nginx Web Server

  1. Install and start nginx:

     sudo apt-get update
     sudo apt-get install nginx
     sudo nginx
    
  2. Create a folder linux-dwt under /usr/share/nginx/html/.
  3. Copy Resources and helloworld.html to /usr/share/nginx/html/linux-dwt.
  4. Open http://localhost/dwt-linux/helloworld.html in your web browser to scan documents. If there is no source listed, please check the scanner status using scanimage in terminal:

     sudo scanimage -L
    

    When Dynamic Web TWAIN is working, you should see the relevant processes as follows:

     ps aux | grep WebTwain
    

    Linux DWT process

Try the Online Demo

https://demo.dynamsoft.com/web-twain/

Common Issues & Edge Cases

  • Scanner not listed in the web app: Run sudo scanimage -L in the terminal to verify the SANE backend detects your scanner. If it doesn’t appear there, install the correct SANE driver for your hardware before troubleshooting the web app.
  • Permission denied when accessing the scanner: The Dynamic Web TWAIN service process needs permission to access the scanner device files under /dev/. Add your user to the scanner group (sudo usermod -aG scanner $USER) and restart the service.
  • Blank or corrupted scan output on arm64 devices: Some arm64 boards have limited USB bandwidth. Try scanning at a lower DPI or connecting the scanner directly without a USB hub.

Source Code

https://github.com/yushulx/web-twain-document-scan-management/tree/main