Thanks for downloading Dynamsoft Barcode Reader Package!
Your download will start shortly. If your download does not begin, click here to retry.
- Getting Started
- Basic Customizations
- Advanced Customizations
- Deployment Activation
- Features Requirements
Getting Started - Hello World
Let’s start by using the library to build a simple web application that will decode barcodes from a live video stream.
- Internet connection
- Supported Browser
- Camera access
Step One: Write the code in one minute
Create an HTML file with the following content. Deploy this to your web server and run the application over HTTPS.
- You will need to replace
PRODUCT-KEYSwith a trial key for the sample code to work correctly. You can acquire a trial key here.
- If you don’t have a ready-to-use web server but have a package manager like npm or yarn, you can set up a simple HTTP server in minutes. Check out
http-serveron npm or yarn.
onFrameRead: This event is triggered after each single frame is scanned. The
results object contains all the barcode results that the library found on this frame. In this example, we will print the results found in every frame to the console.
onUnduplicatedRead: This event is triggered when a new barcode (not a duplicate) is found.
txt holds the barcode text value while
result is an object that holds details of the found barcode. In this example, an alert will be displayed for each unique barcode found.
Step Two: Enable camera access
Open the HTML page in your browser and you should see a pop-up asking for permission to access the camera. Once camera access is granted, the video stream will start in the default UI of the BarcodeScanner object.
Note: If you don’t see the pop-up, wait a few seconds for the initialization to finish.
In this step, you might run into the following issues:
getUserMedia non-HTTPS access issue
If you open the HTML file as
http://, the following error may appear in the browser console:
[Deprecation] getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.
In Safari 12 the equivalent error is:
Trying to call getUserMedia from an insecure document.
To access the camera with the API getUserMedia, HTTPS is required.
Note: If you use Chrome or Firefox, you might not get the error because these two browsers allow camera access via file:/// and http://localhost.
To make sure your web application can access the camera, please configure your web server to support HTTPS. The following links may help.
- NGINX: Configuring HTTPS servers
- IIS: Create a Self Signed Certificate in IIS
- Tomcat: Setting Up SSL on Tomcat in 5 minutes
- Node.js: npm tls
Self-signed certificate issue
For testing purposes, a self-signed certificate can be used when configuring HTTPS. When accessing the site, the browser might say “the site is not secure”. In this case, go to the certificate settings and set to trust this certificate.
In a production environment, you will need a valid HTTPS certificate.
Step Three: Time to scan
Place a barcode in front of the camera. You should see an alert pop up with the decoded barcode result and a coloured region on the video to highlight the barcode location.
Demos and Examples
This page is compatible for:
In this article: