写网站策划书需要注意什么,国外推广都是怎么推广,封面制作app,用云空间制作网站前言
1、扫码识别库采用开源的zxing/library
2、支持js#xff0c;Vue#xff0c;lit等实现
原文章地址和代码仓库地址
1、在界面创建video标签用来显示摄像头内容
!-- 视区 --!-- lit写法 --
video ${ref(this.videoRef)} classxy-scan-wrap…前言
1、扫码识别库采用开源的zxing/library
2、支持jsVuelit等实现
原文章地址和代码仓库地址
1、在界面创建video标签用来显示摄像头内容
!-- 视区 --!-- lit写法 --
video ${ref(this.videoRef)} classxy-scan-wrap-video autoplay/video!-- vue2 --
video refvideoRef classxy-scan-wrap-video autoplay/video!-- vue3 --
video ref{videoRef} classxy-scan-wrap-video autoplay/video!-- js --
video idvideo classxy-scan-wrap-video autoplay/video2、创建扫码对象BrowserMultiFormatReader
import { BrowserMultiFormatReader } from zxing/library;/*** 实例*/
private codeReader new BrowserMultiFormatReader();3、获取设备的摄像头列表
this.codeReader.listVideoInputDevices().then((videoInputDevices) {console.log([xy-scan] videoInputDevices, videoInputDevices);if (videoInputDevices.length 0) {// 记录一下扫描到的摄像头数量这个videoInputDevices是个数组里面有扫描到的摄像头数据this.listVideoInputDevices videoInputDevices;return videoInputDevices;}return [];
}).
catch((e) {console.error([xy-scan] listVideoInputDevices, e);return [];
})4、选择摄像头开始打开摄像头扫码
this.codeReader.reset(); // 重置
this.resultContent ; // 重置
// 设备id
// 切换摄像头有时候我们取的摄像头不对就需要切换摄像头currentDeviceIndex代表摄像头索引
const deviceId this.listVideoInputDevices[this.currentDeviceIndex] ? .deviceId;// 调用库
// this.videoRef.value表示步骤1创建的video节点原生js可以使用document获取Vue可以通过refs获取
this.codeReader.decodeFromVideoDevice(deviceId, this.videoRef.value, (result) {this.resultContent ;// 扫描成功 这个result就是扫描结果长啥样自己打印出来看看if (result) {// 扫描获取的文字此时可以进行业务相关逻辑this.resultContent result.getText();}
});
