示例出处：ZXing TypeScript | Decoding from camera stream

1.引入zxing.js，uniapp如果中通过 npm i @zxing/library --save 引入依赖的话我这边会报错 require is not defined，也不深入查找了，曲线实现，单独引入js文件即可

js地址：https://unpkg.com/@zxing/library@latest/umd/index.min.js

将js代码拷进自己的项目中

完整代码将放在最下方

2.注意uniapp中的video标签是经过二次封装的，以至于在decodeFromVideoDevice方法中输入video标签中的id会一直报错 element with id'video' must be an video element（id为“video”的元素必须是视频元素），原因在于uniapp的video标签是二次封装组件

 

 

3.listVideoInputDevices方法中的res代表视频通道，比如手机有前后两个摄像头，这里的res[1]代表的就是默认打开后置摄像头， res[0]为前置摄像头，前置就不是扫码是扫脸了

 4.注意：如果需要真机模拟需要manifest.json中的web配置中勾选启用https协议（注意要重新运行https://172.168.1.148:8081/#/）我这里使用的是安卓手机夸克浏览器测试的，微信内的话因为https证书不安全打不开，如果替换正式的证书应该是可以的，还有就是无法打开闪光灯，这是不可能的，选择相册中的图片识别倒是可以

以下放完整代码

<template>
	<view class="camera_page">
		<view class="camera_content">
			<view class="code_close" @click="closeClick()">
				<img src="../../static/close.png">
			</view>
			<view class="loop_line"></view>
			<view class="video_nav">
				<video id="video_nav_id" autoplay :controls="false"></video>
			</view>
		</view>
	</view>
</template>

<script>
	import {BrowserMultiFormatReader} from "../../util/zxing.js"
	export default {
		data() {
			return {
				codeReader: null,
				videoInputDevices: [],
				deviceId: null,
			}
		},
		onLoad() {
			this.initEvent()
		},
		mounted() {
			var video = document.getElementById('video_nav_id').getElementsByTagName('video')[0]
			video.setAttribute('id','video_id')
			video.setAttribute('class','video_calss')
		},
		methods: {
			initEvent() {
				 this.codeReader = new BrowserMultiFormatReader();
				 this.codeReader.listVideoInputDevices().then(res => {
					if(res.length > 0) {
						this.videoInputDevices = res
						this.deviceId = res[1].deviceId
					}else{
						uni.showModal({
							title: '提示',
							content: '当前没有可用视频通道',
							showCancel: false,
							success: (res) => {
								uni.navigateBack()
							}
						});
					}
				}).catch(err => {
					uni.showModal({
						title: '提示',
						content: '当前浏览器环境不支持获取视频通道',
						showCancel: false,
						success: (res) => {
							uni.navigateBack()
						}
					});
				})
				
				this.startScanning()
			},
			
			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
							uni.navigateBack()
						}
					})
				}catch(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: 50rpx;
	width: 50rpx;
	position: absolute;
	left: 30rpx;
	top: 30rpx;
	z-index: 999999;
}
.code_close > img {
	height: 100%;
	width: 100%;
	display: block;
}
.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>

页面效果