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進行判斷解析是否成功。

最終效果圖