v3-h5-web/pages/views/scanCodePage.vue

<!-- H5 扫码页面 -->
<template>
  <view class="scanCodePage">
    <video id="video-canvas" autoplay :controls="false"></video>
  </view>
</template>
<script>
	import { BrowserMultiFormatReader } from '@zxing/library';
	import { scanTheCodeDataTreating } from '@/utils/scanTheCode'
export default {
  data() {
    return {
      codeReader: null,
      deviceId: null,
			path:'',
    }
  },
  mounted() {
		this.$set(this,'path',this.$route.query.path);
    this.initScanner();
  },
  methods: {
    async initScanner() {
			let self = this;
      const videoDom = document.getElementById('video-canvas').getElementsByTagName('video')[0];
      videoDom.id = 'zxing-video';
      this.codeReader = new BrowserMultiFormatReader();
      try {
        const devices = await this.codeReader.listVideoInputDevices();
        this.deviceId = devices[devices.length - 1].deviceId;
        this.startScanning();
      } catch (err) {
				uni.showToast({
					mask: true,
					icon: "none",
					position: "center",
					title: "请启用摄像头权限",
					duration: 2000
				});
				setTimeout(() => {
					uni.navigateBack();
				}, 2000);
      }
    },
    
    startScanning() {
			let self = this;
      this.codeReader.decodeFromVideoDevice(
        this.deviceId,
        'zxing-video',
        (result, err) => {
          if (result) {
						scanTheCodeDataTreating(this.path,result.text);
            self.codeReader.reset();
          }
        }
      );
    }
  },
  beforeDestroy() {
    this.codeReader?.reset();
  }
}
</script>
<style lang="stylus" scoped>
	.scanCodePage{
		flex:1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		::v-deep #video-canvas {
			height:100%;
			width:100%;
			.uni-video-cover{
				display: none;
			}
		}
	}
</style>