网页实现扫一扫
最编程
2024-04-29 09:00:02
...
前提
实现此需求没有考虑兼容, 不能用手机或者浏览器的就不再处理
性能不好,识别二维码比较慢, 稍微复杂的就非常慢
需要在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()视频约束