前言:
最近项目中需要获取摄像头进行扫描二维码、一维码
参考文案:https://www.npmjs.com/package/@zxing/library
代码:
1、使用vue的npm 命令下载依赖
npm i @zxing/library --save
2、在需要使用的页面上引用并创建
import {BrowserMultiFormatReader} from '@zxing/library' export default { data() { return { codeReader: new BrowserMultiFormatReader(), } } }
3、调用摄像头进行识别
that.codeReader.getVideoInputDevices().then((videoInputDevices) => { console.log('videoInputDevices', videoInputDevices); //查看获取到的摄像头数量
for (let i = 0; i < videoInputDevices.length; ++i) { let deviceInfo = videoInputDevices[i]; let option = document.createElement('option'); option.value = deviceInfo.deviceId; if (deviceInfo.kind === 'videoinput') { option.text = deviceInfo.label; that.cameraNum.push(option) } else { // console.log('Found ome other kind of source/device: ', deviceInfo); } } }).catch((err) => { that.$message.error('获取摄像头失败:('); console.error(err); });
4、重置摄像头
//选择摄像头 changPhoto(firstDeviceId){ const that = this that.changPhotoId = firstDeviceId // 重置 that.codeReader.reset() // 选择摄像头后进行识别that.codeReader.decodeFromInputVideoDeviceContinuously(firstDeviceId, 'video', (result, err) => { if (result) { console.log(result); //识别成功后进行停止识别(类似截图) let video = document.getElementById('video'); let canvas = document.getElementById('canvas'); let context = canvas.getContext('2d'); context.drawImage(video,0, 0, 240, 300); that.$createDialog().show() } if (err && !(err)) { console.error(err); } }); },