Vue實現瀏覽器端掃碼功能
背景
不久前我做瞭關於獲取瀏覽器攝像頭並掃碼識別的功能，本文中梳理瞭涉及到知識點及具體代碼實現，整理成此篇文章內容。
本文主要介紹，通過使用基於 vue 技術棧的前端開發技術，在瀏覽器端調起攝像頭 📷，並進行掃碼識別功能，對識別到的二維碼進行跳轉或其他操作處理。本文內容分為背景介紹、實現效果、技術簡介、代碼實現、總結等部分組成。
實現效果
本實例中主要有兩個頁面首頁和掃碼頁，具體實現效果如下圖所示。
- 首頁：點擊
SCAN QRCODE按鈕，進入到掃碼頁。 - 掃碼頁：首次進入時，或彈出
獲取攝像頭訪問權限的系統提示框，點擊允許訪問，頁面開始加載攝像頭數據並開始進行二維碼捕獲拾取，若捕獲到二維碼，開始進行二維碼解析，解析成功後加載識別成功彈窗。
在線體驗：https://dragonir.github.io/h5-scan-qrcode
提示：需要在有攝像頭設備的瀏覽器中豎屏訪問。手機橫豎屏檢測小知識可前往我的另一篇文章《五十音小遊戲中的前端知識》 中進行瞭解。
技術簡介
WebRTC API
WebRTC (Web Real-Time Communications) 是一項實時通訊技術，它允許網絡應用或者站點，在不借助中間媒介的情況下，建立瀏覽器之間 點對點（Peer-to-Peer） 的連接，實現視頻流和（或）音頻流或者其他任意數據的傳輸。WebRTC 包含的這些標準使用戶在無需安裝任何插件或者第三方的軟件的情況下，創建 點對點（Peer-to-Peer） 的數據分享和電話會議成為可能。
三個主要接口：
MediaStream：能夠通過設備的攝像頭及話筒獲得視頻、音頻的同步流。RTCPeerConnection：是WebRTC用於構建點對點之間穩定、高效的流傳輸的組件。RTCDataChannel：使得瀏覽器之間建立一個高吞吐量、低延時的信道，用於傳輸任意數據。
🔗 前往 MDN 深入學習：WebRTC_API
WebRTC adapter
雖然 WebRTC規范已經相對健全穩固瞭，但是並不是所有的瀏覽器都實現瞭它所有的功能，有些瀏覽器需要在一些或者所有的WebRTC API上添加前綴才能正常使用。
WebRTC 組織在 github 上提供瞭一個WebRTC適配器（WebRTC adapter） 來解決在不同瀏覽器上實現 WebRTC 的兼容性問題。這個適配器是一個 JavaScript墊片，它可以讓你根據 WebRTC 規范描述的那樣去寫代碼，在所有支持 WebRTC 的瀏覽器中不用去寫前綴或者其他兼容性解決方法。
🔗 前往 MDN 深入學習：WebRTC adapter
核心的API navigator.mediaDevices.getUserMedia
網頁調用攝像頭需要調用 getUserMedia API，MediaDevices.getUserMedia()會提示用戶給予使用媒體輸入的許可，媒體輸入會產生一個 MediaStream，裡面包含瞭請求的媒體類型的軌道。此流可以包含一個視頻軌道（來自硬件或者虛擬視頻源，比如相機、視頻采集設備和屏幕共享服務等等）、一個音頻軌道（同樣來自硬件或虛擬音頻源，比如麥克風、A/D轉換器 等等），也可能是其它軌道類型。
它返回一個Promise對象，成功後會 resolve 回調一個MediaStream對象；若用戶拒絕瞭使用權限，或者需要的媒體源不可用，promise 會 reject 回調一個PermissionDeniedError或者NotFoundError。(返回的 promise對象 可能既不會 resolve 也不會 reject，因為用戶不是必須選擇允許或拒絕。)
通常可以使用navigator.mediaDevices來獲取MediaDevices，例如：
navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
// 使用這個stream
})
.catch(function(err) {
// 處理error
})
🔗 前往 MDN 深入學習：navigator.mediaDevices.getUserMedia
二維碼解析庫 JSQR
jsQR 是一個純 JavaScript 二維碼解析庫，該庫讀取原始圖像或者是攝像頭，並將定位，提取和解析其中的任何 QR碼。
如果要使用 jsQR 掃描網絡攝像頭流，則需要 ImageData 從視頻流中提取，然後可以將其傳遞給 jsQR。
jsQR 導出一個方法，該方法接受 4 個參數，分別是解碼的 圖像數據，寬、高 以及 可選的對象 進一步配置掃描行為。
imageData：格式為 [r0, g0, b0, a0, r1, g1, b1, a1, ...] 的 Uint8ClampedArray（ 8位無符號整型固定數組） 的 rgba 像素值。
const code = jsQR(imageData, width, height, options);
if (code) {
console.log('找到二維碼！', code);
}
🔗 前往 github 深入瞭解：jsQR
代碼實現
流程
整個掃碼流程如下圖所示：頁面初始化，先檢查瀏覽器是否支持 mediaDevices 相關API，瀏覽器進行調去攝像頭，調用失敗，就執行失敗回調；調用成功，進行捕獲視頻流，然後進行掃碼識別，沒有掃瞄到可識別的二維碼就繼續掃描，掃碼成功後繪制掃描成功圖案並進行成功回調。
下文內容對流程進行拆分，分別實現對應的功能。
掃碼組件 Scaner
頁面結構
我們先看下頁面結構，主要由 4 部分組成：
- 提示框。
- 掃碼框。
video：展示攝像頭捕獲視頻流。canvas: 繪制視頻幀，用於二維碼識別。
<template>
<div class="scaner" ref="scaner">
<!-- 提示框：用於在不兼容的瀏覽器中顯示提示語 -->
<div class="banner" v-if="showBanner">
<i class="close_icon" @click="() => showBanner = false"></i>
<p class="text">若當前瀏覽器無法掃碼，請切換其他瀏覽器嘗試</p>
</div>
<!-- 掃碼框：顯示掃碼動畫 -->
<div class="cover">
<p class="line"></p>
<span class="square top left"></span>
<span class="square top right"></span>
<span class="square bottom right"></span>
<span class="square bottom left"></span>
<p class="tips">將二維碼放入框內，即可自動掃描</p>
</div>
<!-- 視頻流顯示 -->
<video
v-show="showPlay"
class="source"
ref="video"
:width="videoWH.width"
:height="videoWH.height"
controls
></video>
<canvas v-show="!showPlay" ref="canvas" />
<button v-show="showPlay" @click="run">開始</button>
</div>
</template>
方法：繪制
- 畫線。
- 畫框（用於掃碼成功後繪制矩形圖形)。
// 畫線
drawLine (begin, end) {
this.canvas.beginPath();
this.canvas.moveTo(begin.x, begin.y);
this.canvas.lineTo(end.x, end.y);
this.canvas.lineWidth = this.lineWidth;
this.canvas.strokeStyle = this.lineColor;
this.canvas.stroke();
},
// 畫框
drawBox (location) {
if (this.drawOnfound) {
this.drawLine(location.topLeftCorner, location.topRightCorner);
this.drawLine(location.topRightCorner, location.bottomRightCorner);
this.drawLine(location.bottomRightCorner, location.bottomLeftCorner);
this.drawLine(location.bottomLeftCorner, location.topLeftCorner);
}
},
方法：初始化
- 檢查是否支持。
- 調起攝像頭。
- 成功失敗處理。
// 初始化
setup () {
// 判斷瞭瀏覽器是否支持掛載在MediaDevices.getUserMedia()的方法
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
this.previousCode = null;
this.parity = 0;
this.active = true;
this.canvas = this.$refs.canvas.getContext("2d");
// 獲取攝像頭模式，默認設置是後置攝像頭
const facingMode = this.useBackCamera ? { exact: 'environment' } : 'user';
// 攝像頭視頻處理
const handleSuccess = stream => {
if (this.$refs.video.srcObject !== undefined) {
this.$refs.video.srcObject = stream;
} else if (window.videoEl.mozSrcObject !== undefined) {
this.$refs.video.mozSrcObject = stream;
} else if (window.URL.createObjectURL) {
this.$refs.video.src = window.URL.createObjectURL(stream);
} else if (window.webkitURL) {
this.$refs.video.src = window.webkitURL.createObjectURL(stream);
} else {
this.$refs.video.src = stream;
}
// 不希望用戶來拖動進度條的話，可以直接使用playsinline屬性，webkit-playsinline屬性
this.$refs.video.playsInline = true;
const playPromise = this.$refs.video.play();
playPromise.catch(() => (this.showPlay = true));
// 視頻開始播放時進行周期性掃碼識別
playPromise.then(this.run);
};
// 捕獲視頻流
navigator.mediaDevices
.getUserMedia({ video: { facingMode } })
.then(handleSuccess)
.catch(() => {
navigator.mediaDevices
.getUserMedia({ video: true })
.then(handleSuccess)
.catch(error => {
this.$emit("error-captured", error);
});
});
}
},
方法：周期性掃描
run () {
if (this.active) {
// 瀏覽器在下次重繪前循環調用掃碼方法
requestAnimationFrame(this.tick);
}
},
方法：成功回調
// 二維碼識別成功事件處理
found (code) {
if (this.previousCode !== code) {
this.previousCode = code;
} else if (this.previousCode === code) {
this.parity += 1;
}
if (this.parity > 2) {
this.active = this.stopOnScanned ? false : true;
this.parity = 0;
this.$emit("code-scanned", code);
}
},
方法：停止
// 完全停止
fullStop () {
if (this.$refs.video && this.$refs.video.srcObject) {
// 停止視頻流序列軌道
this.$refs.video.srcObject.getTracks().forEach(t => t.stop());
}
}
方法：掃描
- 繪制視頻幀。
- 掃碼識別。
// 周期性掃碼識別
tick () {
// 視頻處於準備階段，並且已經加載足夠的數據
if (this.$refs.video && this.$refs.video.readyState === this.$refs.video.HAVE_ENOUGH_DATA) {
// 開始在畫佈上繪制視頻
this.$refs.canvas.height = this.videoWH.height;
this.$refs.canvas.width = this.videoWH.width;
this.canvas.drawImage(this.$refs.video, 0, 0, this.$refs.canvas.width, this.$refs.canvas.height);
// getImageData() 復制畫佈上制定矩形的像素數據
const imageData = this.canvas.getImageData(0, 0, this.$refs.canvas.width, this.$refs.canvas.height);
let code = false;
try {
// 識別二維碼
code = jsQR(imageData.data, imageData.width, imageData.height);
} catch (e) {
console.error(e);
}
// 如果識別出二維碼，繪制矩形框
if (code) {
this.drawBox(code.location);
// 識別成功事件處理
this.found(code.data);
}
}
this.run();
},
父組件
Scaner 的父組件主要加載頁面，並展示 Scaner 掃碼結果的回調。
頁面結構
<template>
<div class="scan">
<!-- 頁面導航欄 -->
<div class="nav">
<a class="close" @click="() => $router.go(-1)"></a>
<p class="title">Scan QRcode</p>
</div>
<div class="scroll-container">
<!-- 掃碼子組件 -->
<Scaner
v-on:code-scanned="codeScanned"
v-on:error-captured="errorCaptured"
:stop-on-scanned="true"
:draw-on-found="true"
:responsive="false"
/>
</div>
</div>
</template>
父組件方法
import Scaner from '../components/Scaner';
export default {
name: 'Scan',
components: {
Scaner
},
data () {
return {
errorMessage: "",
scanned: ""
}
},
methods: {
codeScanned(code) {
this.scanned = code;
setTimeout(() => {
alert(`掃碼解析成功: $[code]`);
}, 200)
},
errorCaptured(error) {
switch (error.name) {
case "NotAllowedError":
this.errorMessage = "Camera permission denied.";
break;
case "NotFoundError":
this.errorMessage = "There is no connected camera.";
break;
case "NotSupportedError":
this.errorMessage =
"Seems like this page is served in non-secure context.";
break;
case "NotReadableError":
this.errorMessage =
"Couldn't access your camera. Is it already in use?";
break;
case "OverconstrainedError":
this.errorMessage = "Constraints don't match any installed camera.";
break;
default:
this.errorMessage = "UNKNOWN ERROR: " + error.message;
}
console.error(this.errorMessage);
alert('相機調用失敗');
}
},
mounted () {
var str = navigator.userAgent.toLowerCase();
var ver = str.match(/cpu iphone os (.*?) like mac os/);
// 經測試 iOS 10.3.3以下系統無法成功調用相機攝像頭
if (ver && ver[1].replace(/_/g,".") < '10.3.3') {
alert('相機調用失敗');
}
}
完整代碼
🔗 github: https://github.com/dragonir/h5-scan-qrcode
總結
應用擴展
我覺得以下幾個功能都是可以通過瀏覽器調用攝像頭並掃描識別來實現的，大傢覺得還有哪些 很哇塞🌟 的功能應用可以通過瀏覽器端掃碼實現 😂？
- 鏈接跳轉。
- 價格查詢。
- 登錄認證。
- 文件下載。
兼容性
❗即使使用瞭adapter，getUserMedia API在部分瀏覽器中也存在不支持的。❗低版本瀏覽器（如iOS 10.3以下）、Android小眾瀏覽器（如IQOO自帶瀏覽器）不兼容。❗QQ、微信內置瀏覽器無法調用。
參考資料
[1]. Taking still photos with WebRTC
[2]. Choosing cameras in JavaScript with the mediaDevices API
[3]. 如何使用JavaScript訪問設備前後攝像頭
作者：dragonir 本文地址：https://www.cnblogs.com/dragonir/p/15405141.html
到此這篇關於Vue實現瀏覽器端掃碼功能的文章就介紹到這瞭,更多相關vue瀏覽器掃碼內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！