Introduction

When digitizing physical documents - whether for easier storage, better accessibility, or streamlined processing - a hardware scanner is often the preferred choice. However, when hardware scanners are not feasible or convenient, mobile device cameras can serve as effective alternatives. To address this need, Dynamsoft created the Mobile Document Scanner JavaScript Edition (MDS) SDK.

If you are integrating hardware scanners into web applications, you may be interested in Dynamsoft’s Dynamic Web TWAIN solution.

Common Usage Scenarios

1. Single Page Capture – Capture a single, clear image of a physical document, such as an invoice or patient-intake form. This is the core functionality of MDS. You can try this feature in the MDS demo. If it meets your needs, feel free to go directly to the MDS user guide.
2. Document Management – Capture images of multiple document pages (e.g., a contract) and compile them into a single PDF. Please contact Dynamsoft Support if you need this feature.
3. Advanced Document Management – Handle multi-page documents, multiple documents, PDF files, annotations, and more with the Mobile Web Capture advanced sample project. Check out the online demo, or read the developer guide to try it for yourself.

Design Principles

We designed MDS with three core principles in mind:

1. Minimal Code - High-level APIs provide full functionality with just a couple of lines of code, significantly reducing development and maintenance costs.
2. Ready-to-Use UI - Pre-integrated components and a pre-designed UI enable a quick setup while minimizing design efforts.
3. Effortless Customization - Tailored configuration objects allow for easy workflow customization, addressing common document scenarios without adding development complexity.

The following example demonstrates how simple it is to power a complete document scanning workflow, including all UI elements:

const documentScanner = new Dynamsoft.DocumentScanner({ license: "YOUR_LICENSE_KEY_HERE", }); await documentScanner.launch(); 

The UI elements are modularized into distinct Views, each offering developer-friendly configuration options. These options enable flexible business logic through straightforward configuration objects, helping to reduce development costs and streamline maintenance.

The following section provides a high-level overview of the Views.

Views

MDS workflows are composed of Views, each of which comes ready-to-use and can be easily customized using configuration objects. These include the following Views for document scanning and correction:

1. Document Scanner View – Captures documents using a camera scanner.
2. Document Correction View – Applies further perspective cropping and adjustments.
3. Document Result View – Provides a preview of the scanned document.

Highlight: Document Scanner View

The Document Scanner View captures scans of documents. It automatically detects document boundaries in the video feed and can optionally select the best frame for scanning, eliminating the need for users to manually snap the image.

System Requirements

Secure Context (HTTPS Deployment)

When deploying your web application for production, ensure it is served over a secure HTTPS connection. This is required for the following reasons:

1. Browser Security Restrictions – Most browsers only allow access to camera video streams in a secure context.

   Some browsers like Chrome may grant access to camera video streams for http://127.0.0.1, http://localhost, or even pages opened directly from the local file system (file:///...). This can be helpful during development and testing.

2. Dynamsoft License Requirements – A secure context is required for Dynamsoft licenses to function properly.

Required Browser Features

The following** browser features** are required for the DCE and DDN components of MDS:

1. WebAssembly
2. Blob
3. URL/createObjectURL
4. Web Workers

Supported Browsers

The table below lists the minimum supported versions of browsers based on these requirements:

Next Step

Proceed to the Mobile Document Scanner Developer Guide to build your own document scanning web application.