HTML5 调用手机摄像头扫描二维码

最新推荐文章于 2024-05-25 14:46:01 发布

sas6216402fx

最新推荐文章于 2024-05-25 14:46:01 发布

阅读量2.8w

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/sas6216402fx/article/details/68943470

版权

最近有个项目需要使用H5调用手机摄像头扫描二维码斌且识别。（很奇葩的需求）

百度了下找到了这个api：

旧版：（目前只有UC浏览器支持，其他的手机浏览器一律没有反应）

https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/getUserMedia

新版：（目前只有火狐浏览器手机版和谷歌浏览器桌面版支持支持）

https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia

这两天折腾总算是把功能实现了，但是！！根本就不能用啊好不好！！

为什么呢？因为旧版的API的后置摄像头根本就不能对焦！！！前置摄象头可以对焦，但是没什么卵用啊，谁会用前置摄像头去扫描。但是鉴于鼓捣了这么久还是贴上代码吧。希望新版api能被兼容QAQ

我的实现思路是这样的，用唤起摄像头的api唤起摄像头，然后把视频流写到video标签，然后利用video的timeupdate事件每一秒截取一帧图像画到canvas画布上，再用js的二维码解析库解析二维码。

js二维码解析库的地址:

https://github.com/LazarSoft/jsqrcode

以下是我的代码:

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>Insert title here</title>

    <script type="text/javascript" src="grid.js"></script>
    <script type="text/javascript" src=&#

最低0.47元/天解锁文章

sas6216402fx

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
5
评论
HTML5 调用手机摄像头扫描二维码

最近有个项目需要使用H5调用手机摄像头扫描二维码斌且识别。（很奇葩的需求）百度了下找到了这个api：旧版：（目前只有UC浏览器支持，其他的手机浏览器一律没有反应）https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/getUserMedia新版：（目前只有火狐浏览器手机版和谷歌浏览器桌面版支持支持）https:
复制链接

扫一扫