Uniapp扫二维码或条码输入组件兼容浏览器H5完成

uni.scanCode(OBJECT)

调起客户端扫码界面，扫码成功后返回对应的结果。

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	字节跳动小程序、飞书小程序	QQ小程序	快手小程序	京东小程序
√	x	√	√	√	√	√	√	√

 由于uniapp自身组件限制，不兼容h5扫码，但部分需求下需要h5直接扫码输入。

DIY可视化团队研发了这一组件，组件底层采用的zxing来集成

核心代码如下，主要使用ZXing.BrowserMultiFormatReader 这个方法来集成扫码。

initEvent() {
				var video = document.getElementById('video_nav_id').getElementsByTagName('video')[0]
				video.setAttribute('id', 'video_id')
				video.setAttribute('class','diy-video-class')
				video.style.width = 300
				video.style.height = 300

				this.codeReader = new ZXing.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
						});
					}
				}).catch(err => {
					console.log(err)
					// uni.showToast({
					// 	title: `初始化失败`,
					// 	icon: 'none'
					// });
				})
				this.startScanning()
			},

			startScanning() {
				try {
					let thiz = this
					this.codeReader.decodeFromVideoDevice(this.deviceId, 'video_id', (res, err) => {
						if (res) {
							this.codeReader.reset()
							this.codeReader = null
							thiz.$emit("result", res);
							thiz.$emit("update:modelValue", false);
						}
					})
				} catch (err) {
					console.log(err)
					// uni.showToast({
					// 	title: `初始化失败${err}`,
					// 	icon: 'none'
					// });
				}
			},