h5的扫一扫功能（非微信浏览器环境下）

本文主要是介绍h5的扫一扫功能（非微信浏览器环境下），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

必须在 https 域名下才生效

<template><div><van-field label="服务商编码" right-icon="scan" placeholder="扫描二维码获取" @click-right-icon="getCameras" />    <div class="scan" :style="{'display':isScan ? 'none' : ''}"><div id="qr-reader" width="400px" height="400px"></div></div>
</template>

<script>
import util from "../common/util.js";
export default {data() {return {cameraId: 0,//相机idisScan:true,};},mounted() {this.init();},// 页面销毁周期关闭相机beforeDestroy() {this.stop();},methods: {init() {util.addJs("https://blog.minhazav.dev/assets/research/html5qrcode/html5-qrcode.min.js");},// 开始扫描getCameras() {Html5Qrcode.getCameras().then(devices => {if(devices){if (devices.length==1) {this.cameraId = devices[0].id;}else{this.cameraId = devices[1].id;}this.start();}}).catch(err => {this.$notify({ type: 'warning', message: '调用摄像头失败 : ' + err});});},// 启动相机start() {this.isScan = false;this.html5QrCode = new Html5Qrcode("qr-reader");this.html5QrCode.start(this.cameraId,{fps: 10,qrbox: { width: 250, height: 250 }},qrCodeMessage => {if (qrCodeMessage) {this.stop();}}).catch(err => {console.log(`Unable to start scanning, error: ${err}`);});},// 关闭相机stop() {this.isScan = true;this.html5QrCode.stop().then(ignore => {console.log("QR Code scanning stopped.");}).catch(err => {console.log("Unable to stop scanning.");});},}
};
</script>

<style lang="less" scoped>.scan{width: 100%;height: 100vh;display: flex;align-items: center;justify-content: center;flex-direction: column;overflow: hidden;}
</style>

util.js文件

const addJs=function (url) {return new Promise((resolve, reject) => {const script = document.createElement('script')script.src = urlscript.type = 'text/javascript'document.body.appendChild(script)script.onload = () => {resolve()}})
}
export default {addJs}