前端調用手機攝像頭權限進行掃碼解析（demo含Vue及原生）

• 前端調用手機攝像頭權限進行掃碼解析（demo含Vue及原生js寫法）
• • 引子
  • 實踐
  • 此時已經可以成功調用攝像頭，接下來集成進Vue工程中
  • • 最后

前端調用手機攝像頭權限進行掃碼解析（demo含Vue及原生js寫法）

項目必須基于HTTPS協議！！！

引子

本人馬上畢業了，現在在新單位實習前端，有個需求需要在移動Web端調用攝像頭進行掃碼，這方面之前沒有接觸過，但時間有限，只能走一步看一步，首先收集資料：

調用設備掃碼功能在安卓app上有api可以調用，Hbulider 5+app中也有現成的api，但我這個項目已經開發了很久了，只能新加模塊，顯然不符合上面的情況。

原生Web有個api叫 Navigator.mediaDevices。
mediaDevices 是 Navigator 只讀屬性，返回一個 MediaDevices 對象，該對象可提供對相機和麥克風等媒體輸入設備的連接訪問，也包括屏幕共享。

掃碼解析則可以使用 qrcode.js 這一個js庫。

實踐

// 調用攝像頭方法，原生Navigator.mediaDevices api function setwebcam(){ var options = true; if(navigator.mediaDevices && navigator.mediaDevices.enumerateDevices) {try{navigator.mediaDevices.enumerateDevices().then(function(devices) {devices.forEach(function(device) {if (device.kind === 'videoinput') {options={'deviceId': {'exact':device.deviceId}, 'facingMode':'environment'} ;console.log(device);}console.log(device.kind + ": " + device.label +" id = " + device.deviceId);});console.log(options)setwebcam2(options);});}catch(e){console.log(e);} } else{console.log("無設備信息。" ); } }

其中 ‘facingMode’:‘environment’ 則可以穩定調用后置攝像頭，不會再出現網上大家所說的調用前置的情況。
此時需要與前端元素配合

// html 樣式自調 <div class="container"><div id="scan"><video id="vcode" autoplay></video><canvas id="code-canvas"></canvas></div></div> start() // function function start(){createCanvas(800,600);setwebcam(); } // 此處借鑒了導師給的方法，構建canvas function createCanvas(w,h){n = navigator;v = document.getElementById("vcode");var gCanvas = document.getElementById("code-canvas");gCanvas.style.width = w + "px";gCanvas.style.height = h + "px";gCanvas.width = w;gCanvas.height = h;gCtx = gCanvas.getContext("2d");gCtx.clearRect(0, 0, w, h);console.log("canvas complete！"); } function setwebcamres(options){var setvideo = n.mediaDevices.getUserMedia({video: options, audio: false});setvideo.then(success, error);}

此時已經可以成功調用攝像頭，接下來集成進Vue工程中

安裝zxing.js依賴

npm i @zxing/library --save
npm install --save webrtc-adapter

<template><div class="container"><videoid="video"ref="video"width="421"height="400"class="video-container"></video><div>{{ textContent }}</div></div> </template><script>import adapter from 'webrtc-adapter';// WebRTC適配器 只需要引入import { BrowserMultiFormatReader } from '@zxing/library';export default {data() {return {codeReader: new BrowserMultiFormatReader(),textContent: undefined,};},async created() {this.codeReader.getVideoInputDevices().then((videoInputDevices) => {const selectedDeviceId = videoInputDevices[1].deviceId; //第二個攝像頭this.codeReader.decodeFromInputVideoDeviceContinuously(selectedDeviceId, 'video', (result, err) => {if (result) {console.log(result);this.textContent = result.text;this.scanRoomResult(this.textContent);}if (err && !(err)) {console.error(err);}});console.log(`Started continous decode from camera with id ${selectedDeviceId}`);}).catch((err) => {console.error(err);});},methods: {scanRoomResult(roomName) {this.scanRoomInfo = roomName;this.scanRoomInfo = JSON.parse(this.scanRoomInfo);// 將字符串轉換成json對象if (!this.scanRoomInfo.locationId) {this.textContent = 'QrCode Error!';} else {this.textContent = this.scanRoomInfo.locationId;const selector = this.$refs['inspectionRuleSelector'];selector && (selector.showRulePicker = true);}}}}; </script><style scoped lang="less"> .container{position: relative; }.video-container{margin-top: 5vh;} </style>

最后

以上，在Vue中使用zxing有一點不好就是攝像頭可控性不強，他的源碼構造函數中沒有把facingMode放出來，這也就不太好控制攝像頭順序，因為每個手機攝像頭順序都不一定是相同的。

總結

以上是生活随笔為你收集整理的前端调用手机摄像头权限进行扫码解析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。