# Scan Multi-Page Documents with Mobile Web Capture **Mobile Web Capture (MWC)** is an advanced sample designed to extend the features of [Mobile Document Scanner (MDS)](https://www.dynamsoft.com/mobile-document-scanner/docs/web/guide/index.html) 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. > [!TIP] > See it in action with the [Mobile Web Capture Demo](https://demo.dynamsoft.com/mobile-web-capture/). This guide walks you through building a web application that scans multi-page documents using **MWC**, with **pre-defined configurations**. > [!TIP] > If you are looking for a solution that scans single-page documents, read the [Mobile Document Scanner User Guide](https://www.dynamsoft.com/mobile-document-scanner/docs/web/guide/index.html) instead. ## Views MWC features are organized into configurable UI **Views**, each of which comes ready-to-use and can be customized with a configuration object. ### Library View - Organize and manage multiple scanned documents - Export, delete, share, or print documents - View upload history for server-stored documents ![Library View](./library-view-demo.png) ### Document View - View page thumbnails - Reorder or delete pages - Export or share documents ### Page View - Close-up view of single pages - Upload or save individual pages - Full-featured annotations, including inking, shapes, highlighting, text boxes, signatures, and more ### Transfer View - Copy or move pages between documents ### History View - View upload history > [!NOTE] > The following three Views are powered by **Mobile Document Scanner (MDS)**. Learn more in the [MDS user guide](https://www.dynamsoft.com/mobile-document-scanner/docs/web/guide/index.html). ### Document Scanner View - Camera viewfinder with resolution toggle and more - Automatic document detection and capture from the optimal frame in the video feed - Manual capture for greater control ### Document Correction View - Fine-tune automatically detected document boundaries ### Document Result View - Preview the corrected scan - Quickly re-scan and inspect documents until the desired result is achieved - Share the scanned document or save it locally ## System Requirements **MWC** runs wherever **MDS** runs, and inherits its requirements — a secure context (HTTPS) and a browser with `WebAssembly`, `Blob`, `URL`/`createObjectURL`, and `Web Workers` support. See [System Requirements](https://www.dynamsoft.com/mobile-document-scanner/docs/web/index.html#system-requirements) in the MDS introduction for the minimum supported browser versions. ## License ### Get a Trial License If you do not have a trial license for **MWC**, you can request one through our [customer portal](https://www.dynamsoft.com/customer/license/trialLicense?product=mwc&source=guide). The trial can be renewed twice for up to two months of free access. > [!NOTE] > **MDS** and **MWC** share the same license keys. If you already have an **MDS** license, you can use it for **MWC**, and vice versa. ### Get a Full License To purchase a full license, [contact us](https://www.dynamsoft.com/company/contact?product=mwc&utm_source=docs). ## Quick Start To use **MWC**, the first step is to obtain its library files. You can acquire them from one of the following sources: 1. [**GitHub**](https://github.com/Dynamsoft/mobile-web-capture) – contains the source files for the **MWC** sample, which can be compiled into library files. 2. [**npm**](https://www.npmjs.com/package/dynamsoft-mobile-web-capture) – provides precompiled library files via npm for easier installation. 3. [**CDN**](https://cdn.jsdelivr.net/npm/dynamsoft-mobile-web-capture) – 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. **Use precompiled scripts** – use the precompiled resource scripts from npm or the CDN for a quicker setup. ### Option 1: Build from Source This method retrieves all **MWC** source files from its [GitHub Repository](https://github.com/Dynamsoft/mobile-web-capture), 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](https://github.com/Dynamsoft/mobile-web-capture) as a compressed folder. 2. Extract the contents of the archive. 3. Set the license key you received from [Get a Trial License](#get-a-trial-license): > [!TIP] > In your code editor, open the Hello World sample located at [`/samples/hello-world.html`](https://github.com/Dynamsoft/mobile-web-capture/blob/main/samples/hello-world.html). Search for `"YOUR_LICENSE_KEY_HERE"` and replace it with your actual license key. 4. In the terminal, navigate to the project root directory and run the following to a. install project dependencies, b. build the library, and c. serve the sample: ```shell npm install npm run build npm run dev ``` Once the server is running, open the application in a browser using the address printed in the terminal. > [!TIP] > See the server configuration details in [`/dev-server/index.js`](https://github.com/Dynamsoft/mobile-web-capture/blob/main/dev-server/index.js). ### Option 2: Use Precompiled Script Since the **MWC** library files are published on [npm](https://www.npmjs.com/package/dynamsoft-mobile-web-capture), it's easy to reference them from a CDN. To use the precompiled script, include the following URL in a ` ``` Below is the complete Hello World sample page that uses this precompiled script from a CDN. > [!NOTE] > The repository's [`/samples/hello-world.html`](https://github.com/Dynamsoft/mobile-web-capture/blob/main/samples/hello-world.html), used in the [Build from Source](#option-1-build-from-source) section, is the same workflow with two differences: it loads the script from a local build rather than the CDN, and it sets `showLibraryView: true` so the app opens on the document library. See [Enable the LibraryView](/customization-guide.md#enable-the-libraryview). > [!WARNING] > **Don't forget** to replace `"YOUR_LICENSE_KEY_HERE"` with your actual license key. ```html Mobile Web Capture - Hello World ``` 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](https://marketplace.visualstudio.com/items?itemName=yandeu.five-server). 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 serves 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. ## Hello World Sample Explained Next we walk through the code above to understand how it works. ### Reference MWC ```html Mobile Web Capture - Hello World ``` When building from source, **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 an **MWC** project only needs to include **MWC** itself as a single script. No additional dependency scripts are required. > [!IMPORTANT] > Even if you reference the script locally, supporting resources like `.wasm` engine files are still loaded from the CDN at runtime. If you require a **fully offline setup**, follow the instructions in [Self-Hosting Resource Files](/customization-guide.md#self-hosting-resource-files). ### Instantiate MWC ```javascript // Instantiate a Mobile Web Capture Object const mobileWebCapture = new Dynamsoft.MobileWebCapture({ license: "YOUR_LICENSE_KEY_HERE", // Replace this with your actual license key }); ``` API Reference: - [`MobileWebCapture()`](/api/classes/MobileWebCapture.md#constructor) - [`MobileWebCaptureConfig`](/api/interfaces/MobileWebCaptureConfig.md) 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](/customization-guide.md#specify-the-ui-container). > [!WARNING] > A **license key** is required for the instantiation. ### Launch MWC ```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); ``` API Reference: [`launch()`](/api/classes/MobileWebCapture.md#launch) This step launches the UI, starting in **`DocumentView`**, where the user can begin building a document in two ways: > [!NOTE] > The document name passed to `launch()` becomes the name of the document the `DocumentView` opens on, and the default filename when it is shared or uploaded. If omitted, **MWC** names the document `Doc-`. 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 two 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](/customization-guide.md#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](/customization-guide.md#enable-file-upload). ## Next Step Mobile Web Capture provides extensive customization options. Read on to explore the available customizations in the [MWC Customization Guide](/customization-guide.md), or see the [Framework Samples](/frameworks.md) for complete Angular, React, and Vue projects.