https://github.com/dynamsoft/easy-barcode-scanner
https://github.com/dynamsoft/easy-barcode-scanner
Last synced: 21 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/dynamsoft/easy-barcode-scanner
- Owner: Dynamsoft
- License: unlicense
- Created: 2024-09-19T07:48:25.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-08-22T06:38:14.000Z (6 months ago)
- Last Synced: 2025-09-28T00:43:40.454Z (5 months ago)
- Language: TypeScript
- Size: 529 KB
- Stars: 2
- Watchers: 6
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Easy Barcode Scanner
The Easy Barcode Scanner is a lightweight, user-friendly wrapper for the Dynamsoft Barcode Reader SDK. It simplifies the barcode scanning process, making it easier to integrate into your web applications with minimal effort.
**Features**
* Supports video-based barcode scanning
* Handles multiple barcodes with ease
* Simple integration with just a few lines of code
## Out-of-the-box Scanning
The simplest way to use Easy Barcode Scanner requires only one line code to create a video decoding web application.
```html
EasyBarcodeScanner.scan().then(txt=>alert(txt)).catch(ex=>alert(ex.message || ex));
```
[Source Code >>](https://github.com/Dynamsoft/easy-barcode-scanner/blob/main/index.html) | [Run in github.io >>](https://Dynamsoft.github.io/easy-barcode-scanner/index.html)
## Create Your Own Scanner for Further Control
You can also create your own scanner instance to have more control over the entire workflow. For more details on the encapsulated functionality, refer to `src/index.ts`, and feel free to modify it based on your specific needs.
```html
scan
let pScanner, scanner;
document.getElementById('btn-scan').addEventListener('click', async()=>{
try{
scanner = await (pScanner || (pScanner = EasyBarcodeScanner.createInstance()));
// Optional. Insert the UI into the specified element.
// Otherwise the UI will be inserted into `document.body`.
document.querySelector("#camera-view-container").append(scanner.getUIElement());
scanner.onUniqueRead = (txt) => { console.log(txt); };
await scanner.open();
}catch(ex){
// If camera doesn't exist or is occupied, the camera may fail to open.
// So it's better to use `try-catch`.
console.error(ex);
alert(ex.message || ex);
}
});
```
## How to use it in frameworks like Angular, React, and Vue
To integrate Easy Barcode Scanner into your framework, follow these steps:
1. Install the necessary package:
```sh
npm i dynamsoft-barcode-reader-bundle@11.0.3000 -E
```
2. Copy the `src/index.ts`, `src/dm-camera.*` from the library into your project. Rename `index.ts` as needed, for example: `[your-path]/easy-barcode-reader.ts.`
**Example 1: Simple Out-of-the-box Scan**
For a simpler implementation, this example shows how to scan with a single function:
```ts
import EasyBarcodeScanner from '[your-path]/easy-barcode-reader';
EasyBarcodeScanner.license = ""; // Add your license key here
async scan(){
try{
alert(await EasyBarcodeScanner.scan());
}catch(ex){
console.error(ex);
alert(ex.message || ex);
}
}
```
**Example 2: Setting Up a Scanner**
This example shows how to create your own barcode scanner, giving you more control over the details:
```tsx
import EasyBarcodeScanner from '[your-path]/easy-barcode-reader';
EasyBarcodeScanner.license = ""; // Add your license key here
let pScanner = null;
let scanner = null;
async mount(){
try{
scanner = await (pScanner || (pScanner = EasyBarcodeScanner.createInstance()));
cameraViewContainer.append(scanner.getUIElement()); // Optional.
scanner.onUniqueRead = (txt) => { console.log(txt); };
await scanner.open();
}catch(ex){
console.error(ex);
alert(ex.message || ex);
}
}
beforeUnmount(){
// Clean up to free resources
try{ (await pScanner)?.dispose(); }catch(_){}
}
// usage example in a tsx/jsx component
```
* The `mount()` function initializes the scanner and listens for barcode readings.
* The `beforeUnmount()` function disposes of the scanner instance to prevent memory leaks.
## Customize the UI
The built-in UIs are located in files like `xxx.ui.xml`. In fact, it is just HTML, and naming it XML can avoid problems caused by the live server plugin. You can copy `xxx.ui.xml` into your project, modify it as needed, and pass its path to the `createInstance` or `scan` API to use the customized version.
```typescript
// 'https://cdn.jsdelivr.net/gh/Dynamsoft/easy-barcode-scanner@11.0.3003/easy-barcode-scanner.ui.xml' by default
EasyBarcodeScanner.scan(ui?: string|HTMLElement);
// 'https://cdn.jsdelivr.net/gh/Dynamsoft/easy-barcode-scanner@11.0.3003/mobile-native.ui.xml' by default
EasyBarcodeScanner.createInstance(ui?: string|HTMLElement);
```
## All supported barcodes
You can use the code snippet from the [Out-of-the-box Scanning](#out-of-the-box-scanning) section to focus the camera on one or more barcodes. If only one barcode is detected, the result will be displayed immediately. If multiple codes are scanned, an additional interactive step allows you to choose the target.
> Please note that some barcode types are not supported by default for performance concern. Please check [here](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/index.html#customize-the-process) to change settings.
## License Information
The license used in this sample is an automatically requested trial license, only valid for 24 hours and applicable to any newly authorized browser. To test the SDK further, you can request a 30-day free trial license via the Request a Trial License link.
The license can be directly configured within the script tag when including the script file.
```html
```