安裝依賴：vue-qrcode-reader

npm install vue-qrcode-reader -s

直接上代碼

<template><div><div class="qrcodebox fixcenter"> <qrcode-stream :camera="camera"@decode="onDecode" @init="onInit"><div class="qr-scanner"><div class="box"><div class="line"></div><div class="angle"></div></div><div class="txt">掃描二維碼</div></div></qrcode-stream></div></div></template><script>import { QrcodeStream } from 'vue-qrcode-reader'export default {components: { QrcodeStream },data () {return {camera: 'auto',result: null,}},computed: {},methods: {onInit (promise) {promise.catch(console.error).then(() => {console.log('掃描初始化完成')})},async onDecode (content) {alert(content)this.result = content;this.turnCameraOff();},timeout (ms) {return new Promise(resolve => {window.setTimeout(resolve, ms)})},turnCameraOn () {this.camera = 'auto'},turnCameraOff () {this.camera = 'off'},}}</script><style scoped>.qrcodebox{width: 10rem;height: 10rem;}.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%;position: relative;background-color: #1110;}.qr-scanner .box {width: 10rem;height: 10rem;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);overflow: hidden;border: 0.03rem solid rgba(0, 255, 51, 0.2);/* background: url('http://resource.beige.world/imgs/gongconghao.png') no-repeat center center; */}.qr-scanner .txt {width: 100%;height: 1rem;line-height: 1rem;font-size: 0.6rem;text-align: center;/* color: #f9f9f9; */margin: 0 auto;position: absolute;top: 110%;left: 0;}.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>

注：我這里用原生vue寫的代碼，后用HBilder 5+App 打包

軟件打開時使用5+Api調用相機權限，在main.js加這段代碼：

// 這里可以調用5+ API了，為了更好的兼容性，應該使用以下代碼進行判斷 if(window.plus){// 在這里調用5+ API }else{// 兼容老版本的plusready事件document.addEventListener('plusready', function(){// console.log("所有plus api都應該在此事件發生后調用，否則會出現plus is undefined。")plus.camera.getCamera();}); }

總結

以上是生活随笔為你收集整理的vue实现调用摄像头扫描二维码的全部內容，希望文章能夠幫你解決所遇到的問題。

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