H5调摄像头并扫描条形码初探

最近公司有个业务，是要在pad版调取摄像头并扫描条形码。一开始以为这个功能无从下手，光是调取一个摄像头就应该挺费事的，更况且还要扫描条形码。

可是诸如微信这些流行的APP也都内嵌了这种功能，惋惜大厂们是不会把这些核心技术开源共享的，没办法只能本身弄一个了。

H5调取摄像头API

<input type="file" accept="image/*;capture=camera" capture="camera" />复制代码

很简单嘛，已经测试过了，三端均可以完美适配。

接下来就是扫描二维码了，可是找了很久仍是没能找到能够scan的方法，只能经过上传图片读取条形码来获取数据了。

目前解码的插件主要有两个比较出名

• quagga.js 

github地址

官方js

• barcode-reader

npm地址

这两个我都试了，果断选择了后者，一是代码通俗易懂，而是解码效率高速度快。

下面就主要江夏barcode-reader的用法

这里只是作了一个简短的demo，并无将其放入vue,react等框架中。

1. 引入外部的js文件

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>  <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/40076/DecoderWorker.js"></script>  <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/40076/exif.js"></script>  <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/40076/BarcodeReader.js"></script>复制代码

2. 核心JS代码

$(function () {      BarcodeReader.Init();      BarcodeReader.SetImageCallback(function (result) {        console.dir(result);        if (!result.length) {            $("#livestream_scanner").modal("hide");            $(".container .codeInfo").html(`<p>条形码读取失败</p>`);            return        }        var barcode = result[0];        if(barcode.Value){            $("#livestream_scanner").modal("hide");            $(".container .codeInfo").html(`<p>条形码的信息为:${barcode.Value}</p>`);        }      });      document.querySelector("#barCode")        .addEventListener('change',          function (evt) {            var file = evt.target.files[0]            reader = new FileReader();            reader.onloadend = function () {              var img = new Image();              img.src = reader.result;              BarcodeReader.DecodeImage(img);            }            reader.readAsDataURL(file);          },          false        );});复制代码

主要就是上传图片，获取图片的src，而后经过插件自带的静态方法来解析图片，最后经过判断回调函数返回的result进行判断解析是否成功。

最终效果图