How to Quickly Setup an Online Document Scanning Product Demo for a Client

You received an opportunity or client request to work on an online document scanning project. Time is short. You want to get a MVP (minimal viable product) assembled to demo it to your client ASAP. How can you move fast to secure this opportunity?

In this post we will show you how to quickly arrange a product demo of online document scanning application using Dynamic Web TWAIN (DWT), like the online scan demo below. DWT is a web-based TWAIN scanning SDK which enables you to implement cross-browser scan capabilities within minutes.

Dynamic Web TWAIN Online Demo - Scan in Chrome Browser

Scan documents in Chrome with Dynamic Web TWAIN

So, let’s get to it. How do you use the DWT SDK to quickly deploy a web-based scan product demo? You simply follow the four steps below.

  1. Locate a DWT demo that’s closest to what you or your client’s need in DWT’s sample gallery.

    There are dozens of samples available which demonstrate how to implement key features, like scanning a document, editing images, saving or uploading images to a server or database, etc. The operations, such as scan and image processing , are performed on the client side. You can simply call the DWT APIs in HTML and JavaScript / Jquery.

    Here’s sample code of scan:

    <input type="button" value="Scan" onclick="AcquireImage();" />
    
    
    <div id="dwtcontrolContainer"></div>
    
    
        <script type="text/javascript">
            function AcquireImage() {
                var DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');          
                DWObject.IfDisableSourceAfterAcquire = true;    // Source will be closed automatically after acquisition.
                var bSelected = DWObject.SelectSource();                        
                
                if(bSelected){
    				var OnAcquireImageSuccess, OnAcquireImageFailure;
    				OnAcquireImageSuccess = OnAcquireImageFailure = function (){
    					DWObject.CloseSource();
    				};
    			
    				DWObject.OpenSource();                          
    				DWObject.AcquireImage(OnAcquireImageSuccess, OnAcquireImageFailure);                        
    			}
            }
    

    If you want to upload the scanned images to a server, database or a DMS system, you can write your action page in C#, VB.NET, PHP, JSP, ASP, etc.

  2. Download the source code of the sample code and run it on your development machine.
  3. Deploy the document scanning sample to a test server.

    The server OS could be Windows, Linux or Mac. And you can feel free to use any popular web server, such as Apache, IIS, Tomcat or Nginx, to host the web scanning sample application. If you want to integrate the sample into your own web application, please deploy your scan page along with the DWT Resources folder, which includes the DWT’s JS files and DLLs.

  4. Open a browser – Chrome, Firefox, IE, Edge or Safari – and access the scan page of the sample project from a client machine on Windows or mac OS.

    You will get a prompt to install the DWT control, only on the first visit. Please follow the guide to install the control and refresh / restart the browser. There is also a MSI installer available for batch installation.

    After installation, you can check if your scanner appears in the source list and then click Scan to capture a document image.If you don’t see your scanner, please follow this KB to troubleshoot.

    If you don’t have a TWAIN scanner for testing, you can download and test with this virtual TWAIN scanner.

With the above simple steps, you can immediately set up a working online demo of a document scanning web application to show it to your client, do user testing and get quick feedback. Hopefully it helps you land that next great project.

If you have any questions or comments on implementing a web-based scanning solution, please let us know.

Subscribe Newsletter

Subscribe to our mailing list to get the monthly update.

Subscribename@email.com