1.前言
- H5可以获取视频流,并通过video元素进行播放
- 可以canvas对视频进行定时截图,然后使用插件对图片进行二维码解析
- 也可以直接对视频进行二维码解析(推荐)
- 解析二维码的插件为qr-scanner
2.注意事项
- 网站只有https协议才能开启视频流
- http协议的页面(局域网)需要手动进行配置
- 地址栏输入 chrome://flags/#unsafely-treat-insecure-origin-as-secure,进行跳转
- 将当前域名填入,切换为Enabled,重启,如图
3.具体步骤
- 准备video元素,后面用来展示视频
- 获取视频流,并实时展示到video元素中
- 使用qr-scanner插件对视频流进行扫描
- 扫描成功则进行解析,并停止扫描
- 也可以开启图片识别,识别图片中的二维码
- 使用qr-scanner需引入两个文件(qr-scanner.min.js,qr-scanner-worker.min.js),在ES6中,引入qr-scanner.min.js时会自动引入qr-scanner-worker.min.js,请将其放在同一目录
4.核心代码
- video元素占满屏幕
<video style="width: 100%; height: 100%; object-fit: fill;"></video>
- 获取视频流(需要授权)
//视频流宽高(宽高反着写),使用后置摄像头
var constraints = {
video:{facingMode:"environment",width:this.height,height:this.width}
}
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
try{
//开启视频流
const stream = await navigator.mediaDevices.getUserMedia(constraints)
//获取视频元素
var video = document.getElementById("video")
//将视频流实时播放在video
video.srcObject = stream
//等待加载
video.onloadedmetadata = function () {
//开始播放
video.play()
//初始化视频流扫描
initQrScanner()
}
}catch(error){
//没有权限进入这里
console.log(error.message)
}
}
- 使用qr-scanner插件对视频流进行扫描
var video = document.getElementById("h5-scan-video")
//创建实例
var qrScanner = new QrScanner(
video,
function(result){
//处理二维码
console.log(result.data)
},
{
onDecodeError: error => {
console.log('未发现',error)
},
highlightScanRegion: true,
highlightCodeOutline: true,
}
)
//开始扫描视频流
qrScanner.start()
- 也可以解析图片中的二维码(使用文件域获取图片)
async parseImage(file){
try{
//解析图片
const result = await QrScanner.scanImage(file, { returnDetailedScanResult: true })
//扫描到二维码往后走
//处理二维码
console.log(result.data)
}catch(error){
//图片未包含二维码
}
}
标签:扫码,qr,scanner,视频流,H5,二维码,video,error
From: https://www.cnblogs.com/OrochiZ-/p/16785402.html