You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When using a framework such as **React**, **Vue** or **Angular**, we recommend adding the package as a dependency using a package manager such as **npm** or **yarn**:
> When using a package manager like **npm** or **yarn**, you likely need to specify the location of the engine files as a link to a CDN. Please see the [MRZScannerConfig API](https://www.dynamsoft.com/mrz-scanner/docs/web/api/mrz-scanner.html#mrzscannerconfig) for a code snippet on how to set the *engineResourcePaths*.
52
+
> When using a package manager like **npm** or **yarn**, you likely need to specify the location of the engine files as a link to a CDN. Please see the [MRZScannerConfig API](https://www.dynamsoft.com/mrz-scanner/docs/web/api/mrz-scanner.html#mrzscannerconfig) for a code snippet on how to set the _engineResourcePaths_.
53
53
54
54
Below is the complete Hello World sample page that uses the precompiled script served via a CDN.
55
55
@@ -60,7 +60,7 @@ Below is the complete Hello World sample page that uses the precompiled script s
@@ -82,7 +82,7 @@ Below is the complete Hello World sample page that uses the precompiled script s
82
82
83
83
> [!NOTE]
84
84
>
85
-
> This code is identical to the Hello World file mentioned in *Build from Source*, except for the script source.
85
+
> This code is identical to the Hello World file mentioned in _Build from Source_, except for the script source.
86
86
>
87
87
> Please do not forget to replace `YOUR_LICENSE_KEY_HERE` with your own license key, whether it is trial or full.
88
88
@@ -98,33 +98,35 @@ In this guide, we will show the developer how to build the scanner themselves fr
98
98
99
99
Please note that we also offer a pre-compiled script reference to make the inclusion of the library even easier. To learn how to use that, please visit the full User Guide for the MRZ Scanner.
100
100
101
-
This method requires retrieving the **MRZ Scanner for Web** source files from its [Github repository](https://github.com/Dynamsoft/mrz-scanner-javascript), compiles them into a distributable package, and then runs a *ready-made* Hello World sample page that is already included in the repo.
101
+
This method requires retrieving the **MRZ Scanner for Web** source files from its [Github repository](https://github.com/Dynamsoft/mrz-scanner-javascript), compiles them into a distributable package, and then runs a _ready-made_ Hello World sample page that is already included in the repo.
102
102
103
103
Please follow these steps in order to build from the source:
104
104
105
105
1. Download the **MRZ Scanner for Web** source files from [Github](https://github.com/Dynamsoft/mrz-scanner-javascript) as a compressed folder ("Download ZIP" option).
106
106
107
107
2. Extract the contents of the compressed folder.
108
108
109
-
3. Open the *Hello World* sample included with the source files located at `samples/hello-world.html`
109
+
3. Open the _Hello World_ sample included with the source files located at `samples/hello-world.html`
110
110
111
111
4. Search for 'YOUR_LICENSE_KEY_HERE' and replace that with your own license key, whether it is trial or full.
112
112
113
113
5. Install project dependencies - in the terminal, navigate to the project root directory and run the following:
114
-
```bash
115
-
npm install
116
-
```
114
+
115
+
```bash
116
+
npm install
117
+
```
117
118
118
119
6. Build the project - once the dependencies are installed, build the project by running:
119
-
```bash
120
-
npm run build
121
-
```
120
+
121
+
```bash
122
+
npm run build
123
+
```
122
124
123
125
7. Serve the project via localhost:
124
-
```bash
126
+
`bash
125
127
npm run serve
126
-
```
127
-
Once the server is running, open the application in a browser using the address provided in the terminal output after running `npm run serve`.
128
+
`
129
+
Once the server is running, open the application in a browser using the address provided in the terminal output after running `npm run serve`.
128
130
129
131
## Breaking down Hello World
130
132
@@ -139,19 +141,18 @@ Let's now go through the code of the Hello World sample and understand the purpo
The first step in setting up the HTML in a Hello World implementation is to include the SDK. The ways to include the SDK has already been addressed in the [Quick Start](#quick-start---including-the-sdk-and-creating-hello-world) section, so please refer to that if you have not already. In this example, we are including the MRZ Scanner via the precompiled script as that is the easiest way to get started.
153
154
154
-
Since this is a Hello World implementation, the HTML body will be kept quite simple. Since the MRZ Scanner comes with a **Ready-to-Use UI**, it is not necessary to place any `<div>` placeholder elements or anything like. Once the scanner is launched, the **Ready-to-Use UI** will come up and occupy the page.
155
+
Since this is a Hello World implementation, the HTML body will be kept quite simple. Since the MRZ Scanner comes with a **Ready-to-Use UI**, it is not necessary to place any `<div>` placeholder elements or anything like. Once the scanner is launched, the **Ready-to-Use UI** will come up and occupy the page.
155
156
156
157
<!-- The main DOM element that is required in the `<body>` is a `<div>` element where the MRZ result (or lack thereof) and the original image of the MRZ document will be displayed once the user clicks *Done* in the result view. Feel free to customize the styling of the `<div>` element to your liking. -->
157
158
@@ -174,7 +175,7 @@ Above you will see the **simplest** way that you can initialize the MRZ Scanner.
174
175
(async () => {
175
176
// Launch the scanner and wait for the result
176
177
constresult=awaitmrzscanner.launch();
177
-
console.log(result);
178
+
console.log(result);
178
179
})();
179
180
```
180
181
@@ -194,7 +195,7 @@ Here is a quick breakdown of the UI elements that make up the main view of the M
194
195
195
196
5.**Load Image Button**: When this button is clicked, the user can select a MRZ document image from the device's local storage to be recognized.
196
197
197
-
6. **Sound Button**: By toggling this on, the MRZ Scanner will play a *beep* sound to signal that the MRZ has been successfully recognized.
198
+
6.**Sound Button**: By toggling this on, the MRZ Scanner will play a _beep_ sound to signal that the MRZ has been successfully recognized.
198
199
199
200
7.**Flash Button**: This button is responsible for toggling the flash of the camera should it have one. If the device doesn't have the flash feature or if the browser being used doesn't support flash, this flash icon will not show up.
200
201
@@ -212,9 +213,8 @@ Here is a quick breakdown of the UI elements that make up the result view
212
213
213
214
4.**Done Button**: Clicking this button basically closes the scanner and destroys the **MRZScanner** instance. At that point, the application will go back to the landing page, but the developer can dictate the action to take once this button is clicked. These actions can include allowing the user to perform some extra actions with the MRZ result, or navigating to another page, or really anything that the developer would like to do once the scanning operation is done.
214
215
215
-
> [!NOTE]
216
-
> In the Hello World sample, no action is taken once the Done button is clicked. The scanner closes and the user is met with an empty page. In order to open the scanner again, the user must refresh the page. You may choose to implement a more user-friendly behavior in a production environment, such as presenting the user with an option to re-open the MRZ Scanner upon closing it.
217
-
216
+
> [!NOTE]
217
+
> In the Hello World sample, no action is taken once the Done button is clicked. The scanner closes and the user is met with an empty page. In order to open the scanner again, the user must refresh the page. You may choose to implement a more user-friendly behavior in a production environment, such as presenting the user with an option to re-open the MRZ Scanner upon closing it.
0 commit comments