Thanks for downloading Dynamsoft Barcode Reader Package!
Your download will start shortly. If your download does not begin, click here to retry.
Let’s start by using the library to build a simple web application that will decode barcodes from a live video stream.
Creat a text file anywhere on your local disk and name it “helloworld.html”. Copy the following content in the file and save.
About the code
onFrameRead: This event is triggered after the library finishes scanning a frame from the video stream. The
results object contains all the barcode results that the library found on this frame. In this example, we print the results to the browser 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 barcode. In this example, an alert will be displayed for each unique barcode found. Notice that if the same barcode is found on multiple consecutive frames, this event is only triggered once.
The recommendation is to deploy this page to your web server and run it over HTTPS. 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-server on npm or yarn. However, for simple testing purposes, it’s perfectly fine to just open the file directly from your local disk.
You will need to replace
PRODUCT-KEYS with a trial key (or your Handshake Code if you have got one) for the sample code to work correctly. You can acquire a trial key here. Notice that the library will still read barcodes without a valid key (Code), but will return an annotated result string.
The library only scans a new frame when it has finished scanning the previous frame. Generally, frames come in faster than the library processes a frame (for 30 FPS, the interval is about 33 ms), therefore not all frames are scanned.
Open the HTML page in your browser and you should see a pop-up asking for permission to access the camera. Once the access is granted, the video stream will start in the default UI of the BarcodeScanner object.
In this step, you might run into the following issues:
If you opened 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.
You get this error because to access the camera with the API getUserMedia, HTTPS is required.
To make sure your web application can access the camera, please configure your web server to support HTTPS. The following links may help.
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 trust this certificate.
In a production environment, a valid HTTPS certificate is required.
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.
For evaluation purposes, we recommend that you get the official package of the library for developers. The following shows how to acquire the package.
From the website
If you want to start building your application right away, you can also just make use of the library via CDN as shown in the previous helloworld sample code.
This page is compatible for:
In this article: