Dynamsoft Barcode Reader教程：HTML5中的移动QR码扫描仪

Dynamsoft Barcode Reader SDK一款多功能的条码读取控件，只需要几行代码就可以将条码读取功能嵌入到Web或桌面应用程序。这可以节省数月的开发时间和成本。能支持多种图像文件格式以及从摄像机或扫描仪获取的DIB格式。使用Dynamsoft Barcode Reader SDK，你可以创建强大且实用的条形码扫描仪软件，以满足你的业务需求。

点击下载Dynamsoft Barcode Reader最新版

最初是为汽车行业1设计的，QR码（缩写为快速响应代码）已在各种使用场景中流行。从网站URL到很小的图像，QR码都可以编码比一维条形码更丰富的内容。它们可以显示在屏幕上，也可以打印在海报，包装盒等上。人们可以轻松地用手机扫描它们。

Dynamsoft条码读取器（DBR）对QR码有很好的支持。自2017年5月25日起具有JavaScript软件包。使用DBR创建移动QR码扫描仪很容易，它可以高效，准确地进行解码。由于它是HTML5格式，因此用户无需下载和安装应用程序，并且将其集成到不同平台上的应用程序也很方便。

这里是一个不折不扣的现成在线HTML5的移动演示这里。它可以用相机扫描或从本地图像库中读取。它仅在客户端运行。

创建自己的移动扫描仪很简单。GitHub上有很多示例。一些示例演示了如何将DBR与Vue，React和Angular结合使用。有些被设计为PWA或混合应用程序。您可以从基本版本开始：helloworld.html。

QR码扫描仪的Helloworld示例

它首先通过加载其js文件来加载DBR。

<!-- Please visit https://www.dynamsoft.com/customer/license/trialLicense to get a trial license. -->
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.1.3/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>

该页面包含一个用于显示扫描仪的按钮和一个用于选择要解码的本地图像的按钮。
HTML：

Choose image(s) to decode:
<input id="ipt-file" type="file" multiple accept="image/png,image/jpeg,image/bmp,image/gif">
<br><br>
<button id="btn-show-scanner">show scanner</button>

JavaScript：

// reader for decoding picture
let reader = null;
// scanner for decoding video
let scanner = null;

// decode input picture
document.getElementById('ipt-file').addEventListener('change', async function(){
   
    try{
   
        reader = reader || await Dynamsoft.DBR.BarcodeReader.createInstance(