How to Enable QR code Scanning from Mobile Cameras in Web
You have a requirement to enable web-based barcode scanning for your mobile browsers. But, you don’t want to do it via an app since it requires extra effort for both users and developers. How do you build an online QR code scanner using mobile camera? There are mainly two ways to decode barcodes in mobile browsers:
-
Client-Side scanning
With a web-based barcode scanner, the barcode decoding happens on the client side. As a result, uploading the video stream to the server is not necessary.
-
Server-Side scanning
Users can access the web page via their mobile browsers, take a snapshot with the camera load an existing one, upload it to the server, and the server will decode the barcode content, and then return the decoded result.
In this post, we introduce a solution for web based barcode scanning from mobile browsers.
Read Barcodes in Web Using Mobile Cameras
Dynamsoft’s JavaScript barcode reader SDK based on WebAssembly technology enables you to read barcodes from live video stream within desktop and mobile browsers. It supports real-time localization and decoding from live camera feed. Supported barcodes include:
- 1D Barcode
- QR Code
- DataMatrix
- Aztec Code
- PDF417
- More barcode types
See it in action: QR code web scanner >
Hello World
With the JavaScript SDK, you can easily integrate barcode and QR code scanning into your browser-based workflow. On mobile phones, your customers and employees will no longer have to download an app.
<!DOCTYPE html>
<html>
<body>
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.3.1/dist/dbr.js"></script>
<script>
// Specifies a license, you can visit https://www.dynamsoft.com/customer/license/trialLicense?ver=9.3.1&product=dbr&package=js to get your own trial license good for 30 days.
Dynamsoft.DBR.BarcodeScanner.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
// Initializes and uses the SDK
(async () => {
let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
scanner.onFrameRead = results => {
if (results.length > 0) console.log(results);
};
scanner.onUniqueRead = (txt, result) => {
alert(txt);
};
await scanner.show();
})();
</script>
</body>
</html>
Integrate online QR code scanner in your application
As an enterprise-grade barcode scanning SDK, Dynamsoft Barcode Reader SDK helps you embed barcode reading functionality into your applications. Contact us to learn more, or try the 30-day free trial to explore its features on your own.
Learn more about Dynamsoft Barcode Reader SDK.