H5扫码

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){
                    //图片未包含二维码
                }
                
            }