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

5,195 阅读1分钟

最近公司有个业务,是要在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进行判断解析是否成功。

最终效果图