Dynamsoft Mobile Web Capture (MWC) is an advanced sample designed to extend the features of Dynamsoft Mobile Document Scanner (MDS) with multi-document management, annotation, and uploading.
npm install dynamsoft-mobile-web-capture> Prerequisites: read the Introduction before proceeding.
Mobile Web Capture (MWC) is an advanced sample designed to extend the features of Mobile Document Scanner (MDS) for managing and scanning multi-page documents. It integrates Mobile Document Scanner (MDS) functionality while offering additional features such as multi-document management, annotation, and uploading by integrating Dynamsoft Document Viewer (DDV), making it a comprehensive solution for managing complex document workflows.
> See it in action with the Mobile Web Capture Demo.
This guide walks you through building a web application that scans multi-page documents using MWC, with pre-defined configurations.
Table of Contents
- License
- Get a Trial License
- Get a Full License
- Quick Start
- Option 1: Build from Source
- Option 2: Use Precompiled Script
- Hello World Sample Explained
- Reference MWC
- Instantiate MWC
- Launch MWC
- Next Step
<<<<<<< HEAD
If you haven't requested a DDS trial, you can try MWC by requesting a trial license through our customer portal. The trial can be renewed twice for up to two months of free access.
=======
If you do not have a trial license for MWC, you can request one through our customer portal. The trial can be renewed twice for up to two months of free access.
>>>>>>> 5dd7a76 (docs(readme): bump README sample code package versions and sync with guide)
> MDS and MWC share the same license keys. If you already have a MDS license, you can use it for MWC, and vice versa.
To purchase a full license, contact us.
To use MWC, the first step is to obtain its library files. You can acquire them from one of the following sources:
1. GitHub – Contains the source files for the MWC sample, which can be compiled into library files.
2. npm – Provides precompiled library files via npm for easier installation.
3. CDN – Delivers precompiled library files through a CDN for quick and seamless integration.
You can choose one of the following methods to set up a Hello World page:
1. Build from Source – Download the source files from GitHub and compile the resource scripts yourself.
2. Using Precompiled Script – Use the precompiled resource scripts from npm or the CDN for a quicker setup.
This method retrieves all MWC source files from its GitHub Repository, compiles them into a distributable package, and then runs a ready-made Hello World sample page included in the repository.
Follow these steps:
1. Download MWC from GitHub as a compressed folder.
2. Extract the contents of the archive.
3. Enter the license key you received from Get a Trial License.
> In your code editor, open the Hello World sample located at /samples/hello-world.html. Search for "YOUR_LICENSE_KEY_HERE" and replace it with your actual license key.
4. Install project dependencies
In the terminal, navigate to the project root directory and run:
``shell`
npm install
5. Build the project
After the dependencies are installed, build the project by running:
shell`
npm run build
6. Serve the project locally
Start the local server by running:
shell`
npm run serve
Once the server is running, open the application in a browser using the address provided in the terminal output after running .
> See the server configuration details in /dev-server/index.js.
Since the MWC library files are published on npm, it's easy to reference them from a CDN.
To use the precompiled script, simply include the following URL in a
`
Below is the complete Hello World sample page that uses this precompiled script from a CDN.
> This code is identical to the /samples/hello-world.html file mentioned in the Build from Source section, except for the script source.
> Don't forget to replace "YOUR_LICENSE_KEY_HERE" with your actual license key.
`html`
To run the sample, create a new file called hello-world.html, then copy and paste the code above into the file. Next, serve the page from a local web server.
If you are using VS Code, a quick and easy way to serve the project is to use the Live Server (Five Server) VSCode extension. Simply install the extension, open the hello-world.html file in the editor, and click "Go Live" in the bottom-right corner of the editor. This will serve the application at http://127.0.0.1:5500/hello-world.html.
Alternatively, you can use other servers like IIS or Apache, but they are outside the scope of this guide for brevity.
Let’s walk through the code in the Hello World sample to understand how it works.
> Instead of using the code above, an alternative way to view the full code is by visiting the Mobile Web Capture Hello World Sample.
`html`
In this step, MWC is referenced using a relative local path in the
section of the HTML.`html
`Alternatively, the script can be referenced from a CDN:
html
`MWC wraps all its dependency scripts, so a MWC project only needs to include MWC itself as a single script. No additional dependency scripts are required.
> Even if you reference the script locally, supporting resources like
engine files are still loaded from the CDN at runtime. If you require a fully offline setup, follow the instructions in Self-Hosting Resource File.$3
`javascript
// Instantiate a Mobile Web Capture Object
const mobileWebCapture = new Dynamsoft.MobileWebCapture({
license: "YOUR_LICENSE_KEY_HERE", // Replace this with your actual license key
});
`This step creates the MWC UI, which, when launched, occupies the entire visible area of the browser window by default. If needed, you can specify a container to restrict the UI's size. For more details, refer to Specify the UI Container.
> A license key is required for the instantiation.
$3
javascript
const fileName = New_Document_${Date.now().toString().slice(-5)}; // Generates a unique filename to use as the initial document name
await mobileWebCapture.launch(fileName);
`This step launches the UI, starting in
, where the user can begin building a document in two ways:> The
DocumentView requires a document name, which is passed as a parameter in the launch() method.1. Capture: Capture image(s) of the document pages.
2. Import: Import one or multiple images or PDF files.
Once a document has been created, the user can navigate between three views:
#### The DocumentView
The user can:
1. Share: Share the document as a multi-page PDF file.
- Download is enabled where Share is not supported (e.g., in Firefox).
2. Manage: Select one or multiple pages for further actions.
3. Manage → Select all: Select all pages.
4. Manage → Delete: Delete selected pages from the document.
5. Manage → Share: Share individual pages as images (.PNG).
- Download is enabled where Share is not supported (e.g., in Firefox).
The user can also enable the Upload feature. See Enable File Upload.
#### The PageView
When the user selects a page thumbnail, the
PageView` opens for that page, where the user can:1. Delete: Remove the current page.
2. Add Page: Add more pages to the document.
3. Share: Share the current page as an image (.png).
- Download is enabled where Share is not supported (e.g., in Firefox).
4. Edit: Display additional editing features to further process the page.
5. Edit → Crop: Select a portion of the page and crop.
6. Edit → Rotate: Rotate the page 90 degrees counterclockwise.
7. Edit → Filter: Adjust the page's pixels.
8. Edit → Annotate: Add annotations to the page.
The user can also enable the Upload feature. See Enable File Upload.
<<<<<<< HEAD
MWC provides extensive customization options. Read on to explore the available customizations in the MWC Customization Guide.
If you have any questions, feel free to contact Dynamsoft Support.
=======
Mobile Web Capture provides extensive customization options. Read on to explore the available customizations in the MWC Customization Guide.
>>>>>>> 5dd7a76 (docs(readme): bump README sample code package versions and sync with guide)