{"id":18696334,"url":"https://github.com/dynamsoft/mobile-web-capture","last_synced_at":"2026-02-03T02:09:25.333Z","repository":{"id":214410787,"uuid":"736198943","full_name":"Dynamsoft/mobile-web-capture","owner":"Dynamsoft","description":null,"archived":false,"fork":false,"pushed_at":"2024-05-17T10:04:44.000Z","size":5633,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-05-18T09:39:51.446Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Dynamsoft.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-12-27T08:49:35.000Z","updated_at":"2024-05-27T12:44:33.003Z","dependencies_parsed_at":null,"dependency_job_id":"d7fcf9db-8bb6-4cc9-af65-022272c7ea70","html_url":"https://github.com/Dynamsoft/mobile-web-capture","commit_stats":null,"previous_names":["dynamsoft/docwebcapture-mobilecam"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dynamsoft%2Fmobile-web-capture","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dynamsoft%2Fmobile-web-capture/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dynamsoft%2Fmobile-web-capture/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dynamsoft%2Fmobile-web-capture/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Dynamsoft","download_url":"https://codeload.github.com/Dynamsoft/mobile-web-capture/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239558914,"owners_count":19658927,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-07T11:18:14.970Z","updated_at":"2026-02-03T02:09:25.324Z","avatar_url":"https://github.com/Dynamsoft.png","language":null,"readme":"# Scan Multi-Page Documents with Mobile Web Capture\n\n**Mobile Web Capture (MWC)** is an SDK designed for scanning multi-page documents.  It integrates **Dynamsoft Document Scanner (DDS)** functionality  while offering additional features such as multi-document management, annotation, and uploading, making it a comprehensive solution for managing complex document workflows.\n\n\u003e See it in action with the [Mobile Web Capture Demo](https://demo.dynamsoft.com/mobile-web-capture/).\n\nThis guide walks you through building a web application that scans multi-page documents using **MWC**, with **pre-defined configurations**.\n\n\u003e If you are looking for a solution that scans single-page documents, please read [Dynamsoft Document Scanner User Guide](https://www.dynamsoft.com/mobile-web-capture/docs/guides/document-scanner.html) instead.\n\n**Table of Contents**\n- [License](#license)\n  - [Get a Trial License](#get-a-trial-license)\n  - [Get a Full License](#get-a-full-license)\n- [Quick Start](#quick-start)\n  - [Option 1: Build from Source](#option-1-build-from-source)\n  - [Option 2: Use Precompiled Script](#option-2-use-precompiled-script)\n- [Hello World Sample Explained](#hello-world-sample-explained)\n  - [Reference MWC](#reference-mwc)\n  - [Instantiate MWC](#instantiate-mwc)\n  - [Launch MWC](#launch-mwc)\n- [Next Step](#next-step)\n\n## License\n\n### Get a Trial License\n\nIf you haven't requested a **DDS** trial, you can try **MWC** by requesting a trial license through our [customer portal](https://www.dynamsoft.com/customer/license/trialLicense?product=mwc\u0026utm_source=github_readme). The trial can be renewed twice for up to two months of free access.\n\n\u003e **DDS** and **MWC** share the same license keys. If you already have a **DDS** license, you can use it for **MWC**, and vice versa.\n\n### Get a Full License\n\nTo purchase a full license, [contact us](https://www.dynamsoft.com/company/contact?product=mwc\u0026utm_source=github_readme).\n\n## Quick Start\n\nTo use **MWC**, the first step is to obtain its **library files**. You can acquire them from one of the following sources:\n\n1. [**GitHub**](https://github.com/Dynamsoft/mobile-web-capture) – Contains the source files for the **MWC** SDK, which can be compiled into library files.\n2. [**npm**](https://www.npmjs.com/package/dynamsoft-mobile-web-capture) – Provides precompiled library files via **npm** for easier installation.\n3. [**CDN**](https://cdn.jsdelivr.net/npm/dynamsoft-mobile-web-capture) – Delivers precompiled library files through a **CDN** for quick and seamless integration.\n\nYou can choose one of the following methods to set up a **Hello World** page:\n\n1. **Build from Source** – Download the source files from **GitHub** and compile the resource script yourself.\n2. **Using Precompiled Script** – Use the precompiled resource scripts from **npm** or the **CDN** for a quicker setup.\n\n### Option 1: Build from Source\n\nThis 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.\n\nFollow these steps:\n\n1. **Download** **MWC** from [GitHub](https://github.com/Dynamsoft/mobile-web-capture) as a compressed folder.\n   \u003e Alternatively, you can [download the same file from Dynamsoft WebSite](https://www.dynamsoft.com/mobile-web-capture/downloads/).\n2. **Extract** the contents of the archive.\n3. **Open** the root directory in a code editor.\n   \u003e We recommend using [VS Code](https://code.visualstudio.com) to follow along with this guide, though any code editor will work.\n4. **Enter** the license key you received in [Get a Trial License](#get-a-trial-license).\n   \u003e 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.\n5. **Install** project dependencies\n    In the terminal, navigate to the project root directory and run:\n    ```bash\n    npm install\n    ```\n6. **Build** the project\n    After the dependencies are installed, build the project by running:\n    ```bash\n    npm run build\n    ```\n7. **Serve** the project locally\n    Start the local server by running:\n    ```bash\n    npm run serve\n    ```\nOnce the server is running, open the application in a browser using the address provided in the terminal output after running `npm run serve`.\n\u003e See the server configuration details in [`/dev-server/index.js`](https://github.com/Dynamsoft/mobile-web-capture/blob/main/dev-server/index.js).\n\n### Option 2: Use Precompiled Script\n\nSince 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.\n\nTo use the precompiled script, simply include the following URL in a `\u003cscript\u003e` tag:\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/dynamsoft-mobile-web-capture@3.1.0/dist/mwc.bundle.js\"\u003e\u003c/script\u003e\n```\n\nBelow is the complete **Hello World** sample page that uses this precompiled script from a CDN.\n\u003e This code is identical to the [`/samples/hello-world.html`](https://github.com/Dynamsoft/mobile-web-capture/blob/main/samples/hello-world.html) file mentioned in the [Build from Source](#option-1-build-from-source) section, except for the script source.\n\u003e\n\u003e **Don't forget** to replace `\"YOUR_LICENSE_KEY_HERE\"` with your actual license key.\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"utf-8\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\n    \u003ctitle\u003eMobile Web Capture - Hello World\u003c/title\u003e\n    \u003cscript src=\"https://cdn.jsdelivr.net/npm/dynamsoft-mobile-web-capture@3.1.0/dist/mwc.bundle.js\"\u003e\u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cscript\u003e\n      // Instantiate a Mobile Web Capture Object\n      const mobileWebCapture = new Dynamsoft.MobileWebCapture({\n        license: \"YOUR_LICENSE_KEY_HERE\", // Replace this with your actual license key\n      });\n      (async () =\u003e {\n        // Launch the Mobile Web Capture Instance\n        const fileName = `New_Document_${Date.now().toString()}`;\n        await mobileWebCapture.launch(fileName);\n      })();\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nTo 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 directly by deploying it to a server.\n\nIf you are using VS Code, a quick and easy way to serve the project is using the [**Five Server** VSCode extension](https://marketplace.visualstudio.com/items?itemName=yandeu.five-server). 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`.\n\nAlternatively, you can use other methods like `IIS` or `Apache` to serve the project, though we won't cover those here for brevity.\n\n## Hello World Sample Explained\n\nLet’s walk through the code in the **Hello World** Sample to understand how it works.\n\n\u003e Instead of using the code above, an alternative way to view the full code is by visiting the [Mobile Web Capture Hello World Sample](https://github.com/Dynamsoft/mobile-web-capture/blob/main/samples/hello-world.html).\n\n### Reference MWC\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"utf-8\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\n    \u003ctitle\u003eMobile Web Capture - Hello World\u003c/title\u003e\n    \u003cscript src=\"../dist/mwc.bundle.js\"\u003e\u003c/script\u003e\n    \u003c!--Alternatively, reference the script from CDN\n    \u003cscript src=\"https://cdn.jsdelivr.net/npm/dynamsoft-mobile-web-capture@3.1.0/dist/mwc.bundle.js\"\u003e\u003c/script\u003e\n    --\u003e\n  \u003c/head\u003e\n```\n\nIn this step, **MWC** is referenced using a relative local path in the `\u003chead\u003e` section of the HTML.\n\n```html\n\u003cscript src=\"../dist/mwc.bundle.js\"\u003e\u003c/script\u003e\n```\n\nAlternatively, the script can be referenced from a CDN:\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/dynamsoft-mobile-web-capture@3.1.0/dist/mwc.bundle.js\"\u003e\u003c/script\u003e\n```\n\n**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.\n\n\u003e ⚠**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 File](https://www.dynamsoft.com/mobile-web-capture/docs/guides/mobile-web-capture-customization.html#self-hosting-resource-files).\n\n### Instantiate MWC\n\n```javascript\n// Instantiate a Mobile Web Capture Object\nconst mobileWebCapture = new Dynamsoft.MobileWebCapture({\n    license: \"YOUR_LICENSE_KEY_HERE\", // Replace this with your actual license key\n});\n```\n\nAPI Reference: [`MobileWebCapture()`](https://www.dynamsoft.com/mobile-web-capture/docs/api/mobile-web-capture.html#mobilewebcapture)\n\nThis 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](https://www.dynamsoft.com/mobile-web-capture/docs/guides/mobile-web-capture-customization.html#example-1-specify-the-ui-container).\n\n\u003e A **license key** is required for the instantiation.\n\n### Launch MWC\n\n```javascript\nconst fileName = `New_Document_${Date.now().toString()}`; // Generates a unique filename to use as the initial document name\nawait mobileWebCapture.launch(fileName);\n```\n\nAPI Reference: [`launch()`](https://www.dynamsoft.com/mobile-web-capture/docs/api/mobile-web-capture.html#launch)\n\nThis step launches the UI, starting in **`DocumentView`**, where the user can begin building a document in two ways:\n\u003e Note: The `DocumentView` requires a document name, which is passed as a parameter in the `launch()` method.\n\n1. **Capture** : Capture image(s) of the document pages.\n2. **Import** : Import one or multiple images or PDF files.\n\nOnce a document has been created, the user can navigate between three views:\n\n#### The DocumentView\nThe user can:\n\n1. **Share** : Share the document as a multi-page PDF file.\n  \u003e  **Download** is enabled where **Share** is not supported (e.g., in Firefox).\n2. **Manage** : Select one or multiple pages for further actions.\n3. **Manage** → **Select All** : Select all pages.\n4. **Manage** → **Delete** : Delete selected pages from the document.\n5. **Manage** → **Share** : Share individual pages as images (**.PNG**).\n  \u003e  **Download** is enabled where **Share** is not supported (e.g., in Firefox).\n\nThe user can also enable the **\"Upload\"** feature. Check out [Enable File Upload](https://www.dynamsoft.com/mobile-web-capture/docs/guides/mobile-web-capture-customization.html#enable-file-upload)\n\n#### The PageView\nWhen the user presses an image, the `PageView` is launched for that page, where the user can\n\n1. **Delete** : Remove the current page.\n2. **Add Page** : Add more pages to the document.\n1. **Share** : Share the current page as an image (**.PNG**).\n  \u003e  **Download** is enabled where **Share** is not supported (e.g., in Firefox).\n4. **Edit** : Display additional editing features to further process the page.\n5. **Edit** → **Crop** : Select a portion of the page and crop.\n6. **Edit** → **Rotate** : Rotate the page **90 degrees counterclockwise**.\n7. **Edit** → **Filter** : Adjust the page's pixels.\n8. **Edit** → **Annotate** : Add annotations to the page.\n\nThe user can also enable the **\"Upload\"** feature. Check out [Enable File Upload](https://www.dynamsoft.com/mobile-web-capture/docs/guides/mobile-web-capture-customization.html#enable-file-upload)\n\n## Next Step\n\n**MWC** provides extensive customization options. Read on to explore the available customizations in the [MWC Customization Guide](https://www.dynamsoft.com/mobile-web-capture/docs/guides/mobile-web-capture-customization.html).\n\n## Support\n\nIf you have any questions, feel free to [contact Dynamsoft Support](https://www.dynamsoft.com/company/contact?product=mwc\u0026utm_source=github_readme).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdynamsoft%2Fmobile-web-capture","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdynamsoft%2Fmobile-web-capture","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdynamsoft%2Fmobile-web-capture/lists"}