Skip to content

Commit 9bd1a5d

Browse files
Cube-JCube-J
authored
Merge pull request #63 from Dynamsoft/main
update readme
2 parents 9ccb9a2 + ae0b959 commit 9bd1a5d

File tree

2 files changed

+58
-46
lines changed

2 files changed

+58
-46
lines changed

‎4.use-case/README.md‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,26 @@
11
# Use Case Sample Set
22

3-
This sample set explores some of the most popular real world applications of the `DBR` library that our team has encountered throughout our many years of experience.
3+
This sample set explores some of the most popular real world applications of Dynamsoft's barcode reader library:
44

5-
## Filling a Form Field with the Barcode Scanner
5+
- [fill a form with barcode reading](./1.fill-a-form-with-barcode-reading.html)
6+
- [read driver license](./2.read-a-drivers-license.html)
67

7-
The first sample will demonstrate how to implement one of, if not the most common usage scenario our library encounters: Filling a form or form field based on the barcode result.
8+
## Filling a Form using Barcode Scanner
89

9-
Usually this scenario involves oopening the video scanner on the click of a button, and then once the barcode is scanned, the barcode result would show up in a corresponding form field. In some cases, the form field would come with a tooltip style of button to allow the user to open the scanner on the click of that icon.
10+
The first sample demonstrates how to automatically fill out a form using barcode scanning.
1011

11-
## Filling out Driver's License Info via the Barcode Scanner
12+
Users can click a button to read barcodes from a video, and once a barcode is scanned, the barcode result will be filled to the corresponding form field. You can customize it further to show a tooltip-style button for users to click and open the scanner.
1213

13-
Another very popular scenario is extracting the driver license info that is encoded on the back of driver licenses into a readable text. The text that is normally encoded in the barcode comes as one large string, separated by abbreviations only. The string will in turn require parsing and mapping to have all the info in its corresponding fields.
14+
## Filling Out Driver's License Info via Barcode Scanner
1415

15-
In order to ensure that the scanner picks up only PDF417 barcode types, we first ensure that the `barcodeFormatIds` of the `RuntimeSettings` is set to `BF_PDF417`. This way, the scanner is better configured to pick up the driver license barcodes.
16+
Another popular usage scenario is to scan the barcodes on driver licenses for automatic ID data extraction.
1617

17-
The core information extraction happens in the function `extractResultAlert`, in which we are using the SDK Dynamsoft Code Parser to parse the raw string and get the actual encoded information.
18+
With the barcode reader library, you can get a large text string from the driver license PDF417 barcode. You can then parse the string and get the value of corresponding fields.
19+
20+
In this use case, we want the scanner to pick up PDF417 barcode only, so we set `barcodeFormatIds` in `RuntimeSettings` to `BF_PDF417`.
21+
22+
The core information extraction happens in the function `extractResultAlert()`, in which we are using the SDK **Dynamsoft Code Parser** to parse the raw string and get the actual encoded information.
1823

1924
## Support
2025

21-
If you have any questions, feel free to contact Dynamsoft support via [email](mailto:support@dynamsoft.com) or [live chat](https://www.dynamsoft.com/barcode-reader/overview/) via the "Let's Chat" button.
26+
If you have any questions, feel free to [contact Dynamsoft](https://www.dynamsoft.com/company/contact/).

‎README.md‎

Lines changed: 44 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,61 @@
11
# Dynamsoft Barcode Reader samples for the web
22

3-
This repository contains multiple samples that demonstrates how to use the [Dynamsoft Barcode Reader JavaScript Edition](https://www.dynamsoft.com/barcode-reader/sdk-javascript/).
3+
This repository contains multiple samples that demonstrates how to use the [Dynamsoft Barcode Reader JavaScript Edition](https://www.dynamsoft.com/barcode-reader/sdk-javascript/?utm_source=sampleReadme) for creating web-based barcode scanning applications.
44

5-
## Hello World
5+
## Request a trial license
66

7-
Get the basic features of the library working with plain/native JavaScript or within a framework like [Angular](https://angular.io/), [React](https://reactjs.org/) or [Vue](https://vuejs.org/), etc.
7+
A default license is included which allows you to test the sample apps for up to 24 hours. You can [request a trial license](https://www.dynamsoft.com/customer/license/trialLicense?product=dbr&package=js&utm_source=sampleReadme) via Dynamsoft customer portal to evaluate further.
88

9-
* **Hello World**: Minimum necessary JavaScript code to get the BarcodeScanner (video) up and running.
10-
* **Read an Existing Image**: Decode barcodes using images that are stored locally, whether on mobile or desktop.
11-
* **Hello World in Angular**: Decode video stream in an Angular Application from a USB-connected or built-in camera (mobile or desktop).
12-
* **Hello World in React**: Decode video stream in a React Application from a USB-connected or built-in camera (mobile or desktop).
13-
* **Hello World in Vue 2**: Decode video stream in a Vue 2 Application from a USB-connected or built-in camera (mobile or desktop).
14-
* **Hello World in Vue 3**: Decode video stream in a Vue 3 Application from a USB-connected or built-in camera (mobile or desktop).
15-
* **Hello World in Next.js**: Decode video stream in a Next.js Application from a USB-connected or built-in camera (mobile or desktop).
16-
* **Hello World in Nuxt**: Decode video stream in a Nuxt Application from a USB-connected or built-in camera (mobile or desktop).
17-
* **Hello World in Electron**: Decode video stream in a Electron Application from a USB-connected or built-in camera (desktop only).
18-
* **Hello World in PWA**: Decode video stream in a PWA Application from a USB-connected or built-in camera (mobile or desktop).
19-
* **Hello World with RequireJS**: Decode video stream in a simple Application using RequireJS from a USB-connected or built-in camera (mobile or desktop).
20-
* **Hello World with ES6**: Decode video stream in a simple Application using ES6 from a USB-connected or built-in camera (mobile or desktop).
21-
* **Hello World in React with TypeScript**: Decode video stream in a React Application with TypeScript from a USB-connected or built-in camera (mobile or desktop).
9+
## Documentation
2210

23-
## Customize Camera UI
11+
For the developer guide and full API reference of Dynamsoft Barcode Reader JavaScript library, please check out the [documentation](https://www.dynamsoft.com/barcode-reader/programming/javascript/?ver=latest&utm_source=sampleReadme).
2412

25-
* **Use the Default Camera UI**: Show the default camera UI to decode video stream from a USB-connected or built-in camera (mobile or desktop).
26-
* **Hide Display Controls**: Hide built-in UI elements (camera selection, resolution selection, etc.) and show only the video stream.
27-
* **Set up External Controls**: Use custom controllers to manipulate the Camera UI.
28-
* **Changing Size of Video Viewer**: Enlarge the video stream temporarily to read a barcode.
29-
* **Customize the Camera UI**: Show the custom camera UI to decode video stream from a USB-connected or built-in camera (mobile or desktop).
13+
## Support
3014

31-
## Parameter Settings
15+
If you have any questions, feel free to [contact Dynamsoft support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme).
3216

33-
How to configure different settings of the library.
17+
## Sample list
3418

35-
* **Formats and Count**: Set the barcode formats and control the number of barcodes to read per image/frame.
36-
* **Localization and Binarization**: Set how localization and binarization are done during barcode decoding.
37-
* **Blurry or Small codes**: Set DeblurModes and ScaleUpModes for decoding blurry or small barcodes.
38-
* **Deformed or Incomplete codes**: Set DeformationResistingModes or BarcodeComplementModes for decoding deformed or incomplete barcodes.
39-
* **Define or Detect the Region**: Set the region of interest manually or regionPredetectionModes to speed up the reading process.
19+
### Hello World
4020

41-
## Use Case
21+
Get the basic features of the library working with plain/native JavaScript or within a framework like [Angular](https://angular.io/), [React](https://reactjs.org/) or [Vue](https://vuejs.org/), etc.
4222

43-
Use cases of the library.
23+
* [**Hello World**](https://demo.dynamsoft.com/samples/dbr/js/1.hello-world/1.hello-world.html?utm_source=sampleReadme): Scan barcodes from video stream with minimum code in JavaScript.
24+
* [**Read an Existing Image**](https://demo.dynamsoft.com/samples/dbr/js/1.hello-world/2.read-an-image.html?utm_source=sampleReadme): Decode barcodes from existing images that are stored locally, whether on mobile or desktop.
25+
* [**Hello World in Angular**](https://demo.dynamsoft.com/samples/dbr/js/1.hello-world/3.read-video-angular/dist/hello-world/?utm_source=sampleReadme): Decode video stream in an Angular application from a USB-connected or built-in camera (mobile or desktop).
26+
* [**Hello World in React**](https://demo.dynamsoft.com/samples/dbr/js/1.hello-world/4.read-video-react/build/?utm_source=sampleReadme): Decode video stream in a React application from a USB-connected or built-in camera (mobile or desktop).
27+
* [**Hello World in Vue 2**](https://demo.dynamsoft.com/samples/dbr/js/1.hello-world/5.read-video-vue/dist/?utm_source=sampleReadme): Decode video stream in a Vue 2 application from a USB-connected or built-in camera (mobile or desktop).
28+
* [**Hello World in Vue 3**](https://demo.dynamsoft.com/samples/dbr/js/1.hello-world/6.read-video-vue3/dist/?utm_source=sampleReadme): Decode video stream in a Vue 3 application from a USB-connected or built-in camera (mobile or desktop).
29+
* [**Hello World in Next.js**](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-nextjs.html?utm_source=sampleReadme): Decode video stream in a Next.js application from a USB-connected or built-in camera (mobile or desktop).
30+
* [**Hello World in Nuxt**](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-nuxtjs.html?utm_source=sampleReadme): Decode video stream in a Nuxt application from a USB-connected or built-in camera (mobile or desktop).
31+
* [**Hello World in Electron**](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-electron.html?utm_source=sampleReadme): Decode video stream in a Electron application from a USB-connected or built-in camera (desktop only).
32+
* [**Hello World in PWA**](https://demo.dynamsoft.com/samples/dbr/js/1.hello-world/10.read-video-pwa/helloworld-pwa.html?utm_source=sampleReadme): Decode video stream in a PWA application from a USB-connected or built-in camera (mobile or desktop).
33+
* [**Hello World with RequireJS**](https://demo.dynamsoft.com/samples/dbr/js/1.hello-world/11.read-video-requirejs.html?utm_source=sampleReadme): Decode video stream in an application using RequireJS from a USB-connected or built-in camera (mobile or desktop).
34+
* [**Hello World with ES6**](https://demo.dynamsoft.com/samples/dbr/js/1.hello-world/12.read-video-es6.html?utm_source=sampleReadme): Decode video stream in an application using ES6 from a USB-connected or built-in camera (mobile or desktop).
4435

45-
* **Read Video and Fill a Form**: Read barcodes to fill a form.
46-
* **Read a Driver's License**: Read the PDF417 barcode on a driver's license (AAMVA compliant) and parse it.
36+
### Customize Camera UI
4737

48-
## Others
38+
* [**Use the Default Camera UI**](https://demo.dynamsoft.com/samples/dbr/js/2.ui-tweaking/1.read-video-show-result.html?utm_source=sampleReadme): Show the default camera UI to decode video stream from a USB-connected or built-in camera (mobile or desktop).
39+
* [**Hide Display Controls**](https://demo.dynamsoft.com/samples/dbr/js/2.ui-tweaking/2.read-video-no-extra-control.html?utm_source=sampleReadme): Hide built-in UI elements (camera selection, resolution selection, etc.) and show only the video stream.
40+
* [**Set up External Controls**](https://demo.dynamsoft.com/samples/dbr/js/2.ui-tweaking/3.read-video-with-external-control.html?utm_source=sampleReadme): Use custom controllers to manipulate the Camera UI.
41+
* [**Changing Size of Video Viewer**](https://demo.dynamsoft.com/samples/dbr/js/2.ui-tweaking/4.difference-video-size.html?utm_source=sampleReadme): Enlarge the video stream temporarily to read a barcode.
42+
* [**Customize the Camera UI**](https://demo.dynamsoft.com/samples/dbr/js/2.ui-tweaking/5.read-video-with-custom-default-ui.html?utm_source=sampleReadme): Show the custom camera UI to decode video stream from a USB-connected or built-in camera (mobile or desktop).
4943

50-
* **Debug**: Collect the actual image frames for debugging purposes.
44+
### Parameter Settings
5145

52-
## Support
46+
How to configure different settings of the barcode scanning library.
47+
48+
* [**Formats and Count**](https://demo.dynamsoft.com/samples/dbr/js/3.settings/1.barcodeFormats-expectedBarcodes.html?utm_source=sampleReadme): Set the barcode formats and control the number of barcodes to read per image/frame.
49+
* [**Localization and Binarization**](https://demo.dynamsoft.com/samples/dbr/js/3.settings/2.localizationModes-binarizationModes.html?utm_source=sampleReadme): Set how localization and binarization are done during barcode decoding.
50+
* [**Blurry or Small codes**](https://demo.dynamsoft.com/samples/dbr/js/3.settings/3.blurred-small-barcodes.html?utm_source=sampleReadme): Set `DeblurModes` and `ScaleUpModes` for decoding blurry or small barcodes.
51+
* [**Deformed or Incomplete codes**](https://demo.dynamsoft.com/samples/dbr/js/3.settings/4.deformed-incomplete-barcodes.html?utm_source=sampleReadme): Set `DeformationResistingModes` or `BarcodeComplementModes` for decoding deformed or incomplete barcodes.
52+
* [**Define or Detect the Region**](https://demo.dynamsoft.com/samples/dbr/js/3.settings/5.regionOfInterest-regionPredetection.html?utm_source=sampleReadme): Set the region of interest manually or `regionPredetectionModes` to speed up the barcode reading process.
53+
54+
### Use Cases
55+
56+
* [**Read Video and Fill a Form**](https://demo.dynamsoft.com/samples/dbr/js/4.use-case/1.fill-a-form-with-barcode-reading.html?utm_source=sampleReadme): Read barcodes to fill a form.
57+
* [**Read a Driver's License**](https://demo.dynamsoft.com/samples/dbr/js/4.use-case/2.read-a-drivers-license.html?utm_source=sampleReadme): Read the PDF417 barcode on a driver's license (AAMVA compliant) and parse it.
58+
59+
### Others
5360

54-
If you have any questions, feel free to contact Dynamsoft support via [email](mailto:support@dynamsoft.com) or [live chat](https://www.dynamsoft.com/barcode-reader/overview/) via the "Let's Chat" button.
61+
* [**Debug**](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/debug.html?utm_source=sampleReadme): Collect the actual image frames for debugging purposes.

0 commit comments

Comments
 (0)