Skip to content

Commit

Permalink
Initial release
Browse files Browse the repository at this point in the history
  • Loading branch information
Ellie-dynamsoft committed Dec 28, 2023
1 parent 339a795 commit 771f621
Show file tree
Hide file tree
Showing 11 changed files with 46 additions and 56 deletions.
33 changes: 17 additions & 16 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Document Web Capture from Mobile Cameras - User Guide
# Mobile Web Capture - User Guide

[Document Web Capture from Mobile Cameras](https://www.dynamsoft.com/use-cases/mobile-web-capture-sdk/?utm_content=nav-solutions) (DWC) a solution designed for iOS and Android browsers. It helps developers to build document scanning web applications for mobile users to load, edit, save, and capture images from the camera right in mobile browsers.
[Mobile Web Capture](https://www.dynamsoft.com/use-cases/mobile-web-capture-sdk/?utm_content=nav-solutions) is a solution designed for iOS and Android browsers. It helps developers to build document scanning web applications for mobile users to load, edit, save, and capture images from the camera right in mobile browsers.


Featured Products:
Expand All @@ -20,30 +20,31 @@ Featured Products:

## Samples

- Hello World - [Guide](https://www.dynamsoft.com/doc-web-capture/docs/gettingstarted/helloworld.html) \| [Github](https://github.com/Dynamsoft/DocWebCapture-MobileCam/tree/master/samples/hello-world/hello-world) \| [Run](https://dynamsoft.github.io/DocWebCapture-MobileCam/samples/hello-world/hello-world/)
- Angular App - [Github](https://github.com/Dynamsoft/DocWebCapture-MobileCam/tree/master/samples/hello-world/hello-world-angular) \| [Run](https://dynamsoft.github.io/DocWebCapture-MobileCam/samples/hello-world/hello-world-angular/)
- React App - [Github](https://github.com/Dynamsoft/DocWebCapture-MobileCam/tree/master/samples/hello-world/hello-world-react) \| [Run](https://dynamsoft.github.io/DocWebCapture-MobileCam/samples/hello-world/hello-world-react/)
- Vue3 App - [Github](https://github.com/Dynamsoft/DocWebCapture-MobileCam/tree/master/samples/hello-world/hello-world-vue3) \| [Run](https://dynamsoft.github.io/DocWebCapture-MobileCam/samples/hello-world/hello-world-vue3/)
- Hello World - [Guide](https://www.dynamsoft.com/mobile-web-capture/docs/gettingstarted/helloworld.html) \| [Github](https://github.com/Dynamsoft/mobile-web-capture/tree/master/samples/hello-world/hello-world) \| [Run](https://dynamsoft.github.io/mobile-web-capture/samples/hello-world/hello-world/)
- Angular App - [Github](https://github.com/Dynamsoft/mobile-web-capture/tree/master/samples/hello-world/hello-world-angular) \| [Run](https://dynamsoft.github.io/mobile-web-capture/samples/hello-world/hello-world-angular/)
- React App - [Github](https://github.com/Dynamsoft/mobile-web-capture/tree/master/samples/hello-world/hello-world-react) \| [Run](https://dynamsoft.github.io/mobile-web-capture/samples/hello-world/hello-world-react/)
- Vue3 App - [Github](https://github.com/Dynamsoft/mobile-web-capture/tree/master/samples/hello-world/hello-world-vue3) \| [Run](https://dynamsoft.github.io/mobile-web-capture/samples/hello-world/hello-world-vue3/)
- Popular use cases
- Review and Adjust the detected boundaries - [Guide](https://www.dynamsoft.com/doc-web-capture/docs/codegallery/usecases/review-adjust-detected-boundaries.html) \| [Github](https://github.com/Dynamsoft/DocWebCapture-MobileCam/tree/master/samples/review-adjust-detected-boundaries) \| [Run](https://dynamsoft.github.io/DocWebCapture-MobileCam/samples/review-adjust-detected-boundaries/)
- Capture continuously & Edit result images - [Guide](https://www.dynamsoft.com/doc-web-capture/docs/codegallery/usecases/capture-continuously-edit-result-images.html) \| [Github](https://github.com/Dynamsoft/DocWebCapture-MobileCam/tree/master/samples/capture-continuously-edit-result-images) \| [Run](https://dynamsoft.github.io/DocWebCapture-MobileCam/samples/capture-continuously-edit-result-images/)
- Relatively complete document capturing workflow - [Guide](https://www.dynamsoft.com/doc-web-capture/docs/codegallery/usecases/relatively-complete-doc-capturing-workflow.html) \| [Github](https://github.com/Dynamsoft/DocWebCapture-MobileCam/tree/master/samples/relatively-complete-doc-capturing-workflow) \| [Run](https://dynamsoft.github.io/DocWebCapture-MobileCam/samples/relatively-complete-doc-capturing-workflow/)
- Detect boundaries on the existing images - [Guide](https://www.dynamsoft.com/doc-web-capture/docs/codegallery/usecases/detect-boundaries-on-existing-images.html) \| [Github](https://github.com/Dynamsoft/DocWebCapture-MobileCam/tree/master/samples/detect-boundaries-on-existing-images) \| [Run](https://dynamsoft.github.io/DocWebCapture-MobileCam/samples/detect-boundaries-on-existing-images/)
- Review and Adjust the detected boundaries - [Guide](https://www.dynamsoft.com/mobile-web-capture/docs/codegallery/usecases/review-adjust-detected-boundaries.html) \| [Github](https://github.com/Dynamsoft/mobile-web-capture/tree/master/samples/review-adjust-detected-boundaries) \| [Run](https://dynamsoft.github.io/mobile-web-capture/samples/review-adjust-detected-boundaries/)
- Capture continuously & Edit result images - [Guide](https://www.dynamsoft.com/mobile-web-capture/docs/codegallery/usecases/capture-continuously-edit-result-images.html) \| [Github](https://github.com/Dynamsoft/mobile-web-capture/tree/master/samples/capture-continuously-edit-result-images) \| [Run](https://dynamsoft.github.io/mobile-web-capture/samples/capture-continuously-edit-result-images/)
- Relatively complete document capturing workflow - [Guide](https://www.dynamsoft.com/mobile-web-capture/docs/codegallery/usecases/relatively-complete-doc-capturing-workflow.html) \| [Github](https://github.com/Dynamsoft/mobile-web-capture/tree/master/samples/relatively-complete-doc-capturing-workflow) \| [Run](https://dynamsoft.github.io/mobile-web-capture/samples/relatively-complete-doc-capturing-workflow/)
- Detect boundaries on the existing images - [Guide](https://www.dynamsoft.com/mobile-web-capture/docs/codegallery/usecases/detect-boundaries-on-existing-images.html) \| [Github](https://github.com/Dynamsoft/mobile-web-capture/tree/master/samples/detect-boundaries-on-existing-images) \| [Run](https://dynamsoft.github.io/mobile-web-capture/samples/detect-boundaries-on-existing-images/)

## License Key

[![](https://img.shields.io/badge/Get-30--day%20FREE%20Trial%20License-blue)](https://www.dynamsoft.com/customer/license/trialLicense/?product=dwc&utm_source=npm)
[![](https://img.shields.io/badge/Get-30--day%20FREE%20Trial%20License-blue)](https://www.dynamsoft.com/customer/license/trialLicense/?product=mwc&utm_source=npm)

## System Requirements

DWC requires the following features to work:
Mobile Web Capture requires the following features to work:

- Secure context (HTTPS deployment)

When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons

- Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.
> Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.

> Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.

- Dynamsoft License requires a secure context to work.

Expand All @@ -53,9 +54,9 @@ DWC requires the following features to work:

## Documentation

You can check out the detailed documentation of the solution [here](https://www.dynamsoft.com/doc-web-capture/docs/introduction/index.html).
You can check out the detailed documentation of the solution [here](https://www.dynamsoft.com/mobile-web-capture/docs/introduction/index.html).

## Release Notes

Check out the [release notes](https://www.dynamsoft.com/doc-web-capture/docs/releasenotes/index.html).
Check out the [release notes](https://www.dynamsoft.com/mobile-web-capture/docs/releasenotes/index.html).

6 changes: 3 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
{
"name": "mobile-web-capture",
"version": "1.0.0",
"version": "1.0.0.0",
"author": {
"name": "Dynamsoft",
"url": "https://www.dynamsoft.com"
},
"license": "SEE LICENSE IN LICENSE.txt",
"dependencies": {
},
"description": "Document Web Capture from Mobile Cameras is a solution designed for iOS and Android browsers. It helps developers to build document scanning web applications for mobile users to load, edit, save, and capture images from the camera right in mobile browsers.",
"description": "Mobile Web Capture is a solution designed for iOS and Android browsers. It helps developers to build document scanning web applications for mobile users to load, edit, save, and capture images from the camera right in mobile browsers.",
"devDependencies": {},
"directories": {},
"files": [
Expand Down Expand Up @@ -38,6 +38,6 @@
"optionalDependencies": {},
"repository": {
"type": "git",
"url": "https://github.com/Dynamsoft/docWebCapture-mobileCam"
"url": "https://github.com/Dynamsoft/mobile-web-capture"
}
}
8 changes: 3 additions & 5 deletions samples/capture-continuously-edit-result-images/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>DocWebCapture</title>
<title>Mobile Web Capture - Capture continuously & Edit result images</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/ddv.css">
<link rel="stylesheet" href="./index.css">
</head>
Expand All @@ -21,10 +21,6 @@
console.warn(message);
alert(message);
};

Dynamsoft.DDV.on("error", (e) => {
alert(e.message)
});
</script>
<script type="module">
import { isMobile, initDocDetectModule } from "./utils.js";
Expand Down Expand Up @@ -69,6 +65,8 @@
// Play video stream in 1080P
captureViewer.play({
resolution: [1920,1080],
}).catch(err => {
alert(err.message)
});

// Create an edit viewer
Expand Down
6 changes: 1 addition & 5 deletions samples/detect-boundaries-on-existing-images/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>DocWebCapture</title>
<title>Mobile Web Capture - Detect boundaries on the existing images</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/ddv.css">
<link rel="stylesheet" href="./index.css">
</head>
Expand All @@ -21,10 +21,6 @@
console.warn(message);
alert(message);
};

Dynamsoft.DDV.on("error", (e) => {
alert(e.message)
});
</script>
<script type="module">
import { isMobile, createFileInput } from "./utils.js";
Expand Down
6 changes: 3 additions & 3 deletions samples/hello-world/hello-world-angular/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,9 @@ Environment: Node.js v18.13.0

```javascript
await DDV.setConfig({
// your license key
license: 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9',
engineResourcePath: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/engine'
// your license key
license: 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9',
engineResourcePath: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/engine'
});

// your license key
Expand Down
6 changes: 3 additions & 3 deletions samples/hello-world/hello-world-react/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,9 @@ Environment: Node.js v18.13.0

```javascript
await DDV.setConfig({
// your license key
license: 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9',
engineResourcePath: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/engine'
// your license key
license: 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9',
engineResourcePath: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/engine'
});

// your license key
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* eslint-disable react-hooks/exhaustive-deps */
import { CaptureVisionRouter, LicenseManager } from "dynamsoft-capture-vision-router"
import { DDV } from "dynamsoft-document-viewer"
import { useEffect, useState } from "react"
Expand Down Expand Up @@ -53,7 +54,7 @@ export default function CaptureViewer(props) {
}

useEffect(() => {
init();
init();
},[]);

useEffect(() => {
Expand Down
6 changes: 3 additions & 3 deletions samples/hello-world/hello-world-vue3/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,9 @@ Environment: Node.js v18.13.0

```javascript
await DDV.setConfig({
// your license key
license: 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9',
engineResourcePath: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/engine'
// your license key
license: 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9',
engineResourcePath: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/engine'
});

// your license key
Expand Down
8 changes: 3 additions & 5 deletions samples/hello-world/hello-world/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>DocWebCapture</title>
<title>Mobile Web Capture - HelloWorld</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/ddv.css">
<link rel="stylesheet" href="./index.css">
</head>
Expand All @@ -28,10 +28,6 @@
console.warn(message);
alert(message);
};

Dynamsoft.DDV.on("error", (e) => {
alert(e.message)
});
</script>
<script type="module">
import { isMobile, initDocDetectModule } from "./utils.js";
Expand Down Expand Up @@ -67,6 +63,8 @@
// Play video stream in 1080P
captureViewer.play({
resolution: [1920,1080],
}).catch(err => {
alert(err.message)
});

// Display the result image
Expand Down
10 changes: 4 additions & 6 deletions samples/relatively-complete-doc-capturing-workflow/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>DocWebCapture</title>
<title>Mobile Web Capture - Relatively complete document capturing workflow</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/ddv.css">
<link rel="stylesheet" href="./index.css">
</head>
Expand All @@ -21,10 +21,6 @@
console.warn(message);
alert(message);
};

Dynamsoft.DDV.on("error", (e) => {
alert(e.message)
});
</script>
<script type="module">
import { isMobile, initDocDetectModule } from "./utils.js";
Expand Down Expand Up @@ -71,6 +67,8 @@
// Play video stream in 1080P
captureViewer.play({
resolution: [1920,1080],
}).catch(err => {
alert(err.message)
});

// Register an event in `captureViewer` to show the perspective viewer
Expand All @@ -93,7 +91,7 @@
// Register an event in `perspectiveViewer` to go back the capture viewer
perspectiveViewer.on("backToCaptureViewer",() => {
switchViewer(1,0,0);
captureViewer.play();
captureViewer.play().catch(err => {alert(err.message)});
});

// Register an event in `perspectiveViewer` to show the edit viewer
Expand Down
10 changes: 4 additions & 6 deletions samples/review-adjust-detected-boundaries/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>DocWebCapture</title>
<title>Mobile Web Capture - Review and Adjust the detected boundaries</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/ddv.css">
<link rel="stylesheet" href="./index.css">
</head>
Expand All @@ -26,10 +26,6 @@
console.warn(message);
alert(message);
};

Dynamsoft.DDV.on("error", (e) => {
alert(e.message)
});
</script>
<script type="module">
import { isMobile, initDocDetectModule } from "./utils.js";
Expand Down Expand Up @@ -64,6 +60,8 @@
// Play video stream in 1080P
captureViewer.play({
resolution: [1920,1080],
}).catch(err => {
alert(err.message)
});

// Register captured event
Expand Down Expand Up @@ -113,7 +111,7 @@
function viewerSwitch(capture, perspective){
if(capture) {
captureViewer.show();
captureViewer.play();
captureViewer.play().catch(err => {alert(err)});
} else {
captureViewer.hide();
captureViewer.stop();
Expand Down

0 comments on commit 771f621

Please sign in to comment.