前端調(diào)用手機(jī)攝像頭權(quán)限進(jìn)行掃碼解析（demo含Vue及原生）

• 前端調(diào)用手機(jī)攝像頭權(quán)限進(jìn)行掃碼解析（demo含Vue及原生js寫法）
• • 引子
  • 實(shí)踐
  • 此時(shí)已經(jīng)可以成功調(diào)用攝像頭，接下來集成進(jìn)Vue工程中
  • • 最后

前端調(diào)用手機(jī)攝像頭權(quán)限進(jìn)行掃碼解析（demo含Vue及原生js寫法）

項(xiàng)目必須基于HTTPS協(xié)議！！！

引子

本人馬上畢業(yè)了，現(xiàn)在在新單位實(shí)習(xí)前端，有個(gè)需求需要在移動(dòng)Web端調(diào)用攝像頭進(jìn)行掃碼，這方面之前沒有接觸過，但時(shí)間有限，只能走一步看一步，首先收集資料：

調(diào)用設(shè)備掃碼功能在安卓app上有api可以調(diào)用，Hbulider 5+app中也有現(xiàn)成的api，但我這個(gè)項(xiàng)目已經(jīng)開發(fā)了很久了，只能新加模塊，顯然不符合上面的情況。

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

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

實(shí)踐

// 調(diào)用攝像頭方法，原生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("無設(shè)備信息。" ); } }

其中 ‘facingMode’:‘environment’ 則可以穩(wěn)定調(diào)用后置攝像頭，不會(huì)再出現(xiàn)網(wǎng)上大家所說的調(diào)用前置的情況。
此時(shí)需要與前端元素配合

// html 樣式自調(diào) <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(); } // 此處借鑒了導(dǎo)師給的方法，構(gòu)建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);}

此時(shí)已經(jīng)可以成功調(diào)用攝像頭，接下來集成進(jìn)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; //第二個(gè)攝像頭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);// 將字符串轉(zhuǎn)換成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有一點(diǎn)不好就是攝像頭可控性不強(qiáng)，他的源碼構(gòu)造函數(shù)中沒有把facingMode放出來，這也就不太好控制攝像頭順序，因?yàn)槊總€(gè)手機(jī)攝像頭順序都不一定是相同的。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。