前提: uniapp使用扫一扫功能
官方文档 html5-qrcode
安装 npm i html5-qrcode
1、新建一个组件
注意:切记区分摄像头ID,根据当前自己的需求选择使用前置摄像头还是后置摄像头
离开组件页面需要注销摄像头调用
<template>
<div class="qrcode">
<div id="reader"></div>
</div>
</template>
<script>
import { Html5Qrcode } from "html5-qrcode";
export default {
data() {
return {
cameraId: ""
}
},
created() {
this.getCameras()
},
beforeDestroy() {
this.stop();
},
methods:{
getCameras() {
Html5Qrcode.getCameras()
.then((devices) => {
if (devices && devices.length) {
this.html5QrCode = new Html5Qrcode("reader");