1.使用zxing插件，首先得安装@zxing/library插件

npm i @zxing/library --save

2.封装插件

<template>
	<view class="camera_page">
		<view class="camera_content">
			<view class="code_close" @click="closeClick()">
				<u-icon name="close-circle-fill" class="icon" size="40" style="color: white;"></u-icon>
			</view>
			<view class="loop_line"></view>
			<view class="video_nav">
				<video id="video_nav_id" autoplay :controls="false"></video>
			</view>
		</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		BrowserMultiFormatReader
	} from '@zxing/library'
	export default {
		data() {
			return {
				codeReader: null,
				videoInputDevices: [],
				deviceId: null,
				showCamera: false ,// 添加showCamera变量
				video
			}
		},
	onLoad() {
		
		},
	mounted() {
		this.showCamera = true
			var video = document.getElementById('video_nav_id').getElementsByTagName('video')[0]
			 if (!video.getAttribute('id')) {
			        video.setAttribute('id', 'video_id')
			        video.setAttribute('class', 'video_calss')
			    }
					this.video = video
					this.initEvent()
		},
		destroyed() {
			this.closeCamera()
		},
		methods: {
			closeCamera() {
				// const video = document.getElementById('video_nav_id').getElementsByTagName('video')[0]
				this.showCamera = false
				if (this.video.srcObject) {
					this.video.srcObject.getTracks().forEach(track => {
						track.stop()
					})
				}
			},
			async initEvent() {
				if(!this.showCamera) return
				this.codeReader = await new BrowserMultiFormatReader()
				this.codeReader.getVideoInputDevices().then((videoInputDevices) => {
					console.log('videoInputDevices', videoInputDevices);
					if (videoInputDevices.length > 0) {
						// 默认获取第一个摄像头设备id
						this.deviceId = videoInputDevices[0].deviceId;
						// 获取第一个摄像头设备的名称
						const videoInputDeviceslablestr = JSON.stringify(videoInputDevices[0].label);
						if (videoInputDevices.length > 1) {
							// 判断是否后置摄像头
							if (videoInputDeviceslablestr.indexOf('back') > -1) {
								this.deviceId = videoInputDevices[0].deviceId;
							} else {
								this.deviceId = videoInputDevices[1].deviceId;
							}
						}
						this.startScanning()
					} else {
						uni.showModal({
							title: '提示',
							content: '当前没有可用视频通道',
							showCancel: false,
							success: (res) => {
								uni.navigateBack()
							}
						});
					}
				}).catch((err) => {
					uni.showModal({
						title: '提示',
						content: '当前浏览器环境不支持获取视频通道',
						showCancel: false,
						success: (res) => {
							uni.navigateBack()
						},
					})
				});
			},
			startScanning() {
				try {
					this.codeReader.decodeFromVideoDevice(this.deviceId, 'video_id', (res, err) => {
						if (res) {
							let pages = getCurrentPages()
							let prePage = pages[pages.length - 2]
							prePage.$vm.content_txt = res
							this.$emit('success', res)
							// uni.navigateBack()
						}
					})
				} catch (err) {
					this.$emit('error', err)
					uni.showToast({
						title: `初始化失败${err}`,
						icon: 'none'
					});
				}
			},

			closeClick() {
				uni.navigateBack()
			},
		}
	}
</script>

<style scoped lang="scss">
	.camera_page {
		height: 100vh;
		width: 100vw;
	}

	.camera_content {
		height: 100%;
		width: 100%;
		position: relative;
	}

	.code_close {
		height: 100rpx;
		width: 100rpx;
		position: absolute;
		left: 30rpx;
		top: 30rpx;
		z-index: 999999;
	}

	.loop_line {
		height: 3px;
		width: 80%;
		background-color: aliceblue;
		border-radius: 50%;
		box-shadow: 1px -4px 25px 7px rgba(255, 255, 255, 0.5);
		position: absolute;
		left: 50%;
		top: 20%;
		transform: translateX(-50%);
		animation: myfirst 3s infinite;
		z-index: 999999;
	}

	@keyframes myfirst {
		from {
			top: 20%;
		}

		to {
			top: 80%;
		}
	}

	.video_nav {
		height: 100%;
		width: 100%;
	}

	#video_nav_id {
		height: 100%;
		width: 100%;
	}

	/deep/.uni-video-cover {
		display: none;
	}
</style>

3.使用插件

<template>
	<view class="">
		<saoma @success="handleSuccess" ref="saoma" @error="errorHandle"></saoma>
		<u-modal v-model="showSubmit" @confirm="showSubmitHandle" :show-cancel-button="true" @cancel="showSubmitFalse">
		<p>	{{msg}} </p>
		</u-modal>
	</view>
</template>

<script>
import saoma from '@/uni_modules/multi-scan/saoma.vue'
export default{
	components:{
		saoma
	},
	data(){
		return {
		showSubmit:false,
		msg:'',
		}
	},
	methods:{
		handleSuccess(data){
			if(data){
				this.msg = data
				this.showSubmit = true
			}
		},
		showSubmitHandle(){
			
		},
		errorHandle(){
			
		}
	}
}
</script>

<style scoped lang="scss">
</style>