网页实现扫一扫

前提

实现此需求没有考虑兼容， 不能用手机或者浏览器的就不再处理

性能不好，识别二维码比较慢， 稍微复杂的就非常慢

需要在https环境下使用 (getUserMedia需求）

在此处只写一下遇到的问题， 具体的代码可以根据参考链接里的qr-code-scanner库，根据自己的逻辑进行修改

需求

本来在只在微信浏览器里浏览的网页，目前要在所有浏览器里使用，页面里有扫一扫功能，本来可以调用微信JSSDK来实现，但是在其它浏览器里就不可以使用了，产生了在网页里实现扫一扫的需求。

思路

开启摄像头(getUserMedia) => 将视频流放在video上播放 =》 将video画面绘制到canvas => 获取图片数据 =》 识别二维码

遇到的问题

兼容性

在开始实现之前就已经提出，如果要求所有手机和浏览器都可以使用，还是别做的好。 最基本的兼容

https问题

getUserMedia要求使用https等安全源, 本地使用http://localhost:8080可以打开摄像头，但是手机打开http://[局域网IP]:8080，打不开摄像头，会报错，所以需要本地搭建https测试环境

关闭摄像头

qr-code-scanner库里打开摄像头， 没有关闭摄像头，需要自己添加

var track = {}
 navigator.mediaDevices
            .getUserMedia(constraints)
            .then(function(stream) {
                track = stream.getTracks()[0]
            })
 // 关闭摄像头
 track.stop()
复制代码

视频约束

按照qr-code-scanner设置视频约束在qq浏览器里正常，在UC浏览器里报错

// 错误， 为啥错， 还不知道
Failed to execute 'getUserMedia' on 'MediaDevices': Malformed constraint: Cannot use both optional/mandatory and specific or advanced constraints 
// qr-code-scanner视频约束, 再qq浏览器里正常，uc报错
 constraints = {
      video: {
        mandatory: {
          sourceId: device[1].deviceId ? device[1].deviceId : null, // 0 前置， 1 后置
        }
      },
      audio: false
    };
复制代码

// 最终设置的视频约束， 这样设置可以保证尽可能多的浏览器可以正常打开后置摄像头，而不是报错或者打开前置
// 补充： ios自带浏览器的设置使用qr-code-scanner的配置，不然打开的是前置摄像头
    constraints = {
        video: {
            deviceId: { exact: device[1].deviceId ? device[1].deviceId : null }
        },
        audio: false
    };
复制代码

视频播放

有的手机将得到的视频流放到video播放播放不出来

参考链接

qr-code-scanner: 基本上是使用这个库的代码实现的

getUserMedia()视频约束

转载于:https://juejin.im/post/5c0762d45188251da07df810