Vue專案網頁版在瀏覽器中實現掃碼識別功能(專案應用篇)
阿新 • • 發佈:2021-12-20
需求:vue專案要求要在瀏覽器中呼叫攝像頭進行掃一掃,並識別出二維碼的字串
外掛:QRCodeReader
外掛下載
npm install --save vue-qrcode-reader
注意: 需要在https協議下才可以呼叫相機,實現掃碼。 可以通過配置vue.config.js中的devServer:{https:true}
場景:點選掃一掃的圖示,觸發掃一掃功能,自動識別出資料之後,觸發介面請求
公共元件頁面(子頁面):scan.vue
<template> <div class="scan" v-if="scancode"> <qrcode-stream @decode="onDecode" @init="onInit" style="height: 100vh;"> <div> <div class="qr-scanner"> <div class="box"> <div class="line"></div> <div class="angle"></div> </div> </div> </div> </qrcode-stream> </div> </template> <script> // 下載外掛 // cnpm install --save vue-qrcode-reader // 引入 import { QrcodeStream } from 'vue-qrcode-reader' export default { // 註冊 components: { QrcodeStream }, props: { scancode: { type: Boolean, default: false, } }, data() { return { result: '', // 掃碼結果資訊 error: '' // 錯誤資訊 } }, created() { this.clickCode() }, methods: { clickCode() { this.scancode = true; }, //回撥掃描結果 onDecode(result) { if (result !== "") { this.scancode = false; this.$emit("ok", result) } }, // 檢查是否呼叫攝像頭 async onInit(promise) { try { await promise } catch (error) { if (error.name === 'NotAllowedError') { this.error = "ERROR: 您需要授予相機訪問許可權" } else if (error.name === 'NotFoundError') { this.error = "ERROR: 這個裝置上沒有攝像頭" } else if (error.name === 'NotSupportedError') { this.error = "ERROR: 所需的安全上下文(HTTPS、本地主機)" } else if (error.name === 'NotReadableError') { this.error = "ERROR: 相機被佔用" } else if (error.name === 'OverconstrainedError') { this.error = "ERROR: 安裝攝像頭不合適" } else if (error.name === 'StreamApiNotSupportedError') { this.error = "ERROR: 此瀏覽器不支援流API" } } }, } } </script> <style scoped> .error { font-weight: bold; color: red; } </style> <style scoped> .scan { width: 100vw; border-color: #585858; position: fixed; top: 0; left: 0; } .qrcode-stream-camera { width: 100%; height: 100%; display: block; -o-object-fit: cover; object-fit: cover; position: absolute; top: 0%; left: 0%; } .qr-scanner { background-image: linear-gradient(0deg, transparent 24%, rgba(32, 255, 77, 0.1) 25%, rgba(32, 255, 77, 0.1) 26%, transparent 27%, transparent 74%, rgba(32, 255, 77, 0.1) 75%, rgba(32, 255, 77, 0.1) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(32, 255, 77, 0.1) 25%, rgba(32, 255, 77, 0.1) 26%, transparent 27%, transparent 74%, rgba(32, 255, 77, 0.1) 75%, rgba(32, 255, 77, 0.1) 76%, transparent 77%, transparent); background-size: 3rem 3rem; background-position: -1rem -1rem; width: 100%; /* height: 100%; */ height: 100vh; position: relative; background-color: #1110; /* background-color: #111; */ } .qr-scanner .box { width: 213px; height: 213px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); overflow: hidden; border: 0.1rem solid rgba(0, 255, 51, 0.2); /* background: url('http://resource.beige.world/imgs/gongconghao.png') no-repeat center center; */ } .qr-scanner .line { height: calc(100% - 2px); width: 100%; background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #00ff33 211%); border-bottom: 3px solid #00ff33; transform: translateY(-100%); animation: radar-beam 2s infinite alternate; animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99); animation-delay: 1.4s; } .qr-scanner .box:after, .qr-scanner .box:before, .qr-scanner .angle:after, .qr-scanner .angle:before { content: ''; display: block; position: absolute; width: 3vw; height: 3vw; border: 0.2rem solid transparent; } .qr-scanner .box:after, .qr-scanner .box:before { top: 0; border-top-color: #00ff33; } .qr-scanner .angle:after, .qr-scanner .angle:before { bottom: 0; border-bottom-color: #00ff33; } .qr-scanner .box:before, .qr-scanner .angle:before { left: 0; border-left-color: #00ff33; } .qr-scanner .box:after, .qr-scanner .angle:after { right: 0; border-right-color: #00ff33; } @keyframes radar-beam { 0% { transform: translateY(-100%); } 100% { transform: translateY(0); } } </style>
父頁面:
<div class="title"> <span @click="clickCode">掃碼</span> <scan :scancode='scancode' v-if="scancode" @ok="getResult" /> </div> import scan from '../aside/scan.vue' export default { components: { scan }, data() { return { isShow:true,//頁面其他文字內容隱藏 scancode: false, //控制是否使用掃一掃功能 result: '', //掃碼結果資訊 } } methods: { // 開啟相機 clickCode() { this.isShow=false; this.scancode = true; }, //返回掃描結果並關閉攝像頭 getResult(result) { console.log(this.result) this.result = result; if (result !== "") { this.isShow=true; this.deviceSN = result this.GetDeviceList(result)//拿到結果觸發請求 this.scancode = false; } }, }