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

最新推荐文章于 2024-02-22 17:22:13 发布

sas6216402fx

最新推荐文章于 2024-02-22 17:22:13 发布

阅读量2.8w

点赞数

分类专栏： js

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

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近有个项目需要使用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="version.js"></script>
    <script type="text/javascript" src="detector.js"></script>
    <script type="text/javascript" src="formatinf.js"></script>
    <script type="text/javascript" src="errorlevel.js"></script>
    <script type="text/javascript" src="bitmat.js"></script>
    <script type="text/javascript" src="datablock.js"></script>
    <script type="text/javascript" src="bmparser.js"></script>
    <script type="text/javascript" src="datamask.js"></script>
    <script type="text/javascript" src="rsdecoder.js"></script>
    <script type="text/javascript" src="gf256poly.js"></script>
    <script type="text/javascript" src="gf256.js"></script>
    <script type="text/javascript" src="decoder.js"></script>
    <script type="text/javascript" src="qrcode.js"></script>
    <script type="text/javascript" src="findpat.js"></script>
    <script type="text/javascript" src="alignpat.js"></script>
    <script type="text/javascript" src="databr.js"></script>

</head>  
<body>  
<video id="video" autoplay=""style='width:100%;height:100%'></video>
<canvas id="canvas" style='display:none' width="400" height="400"></canvas>

<div id='pic_box'></div>
<div id='text_box'></div>

<script type="text/javascript">

    function writeObj(obj){
        var description = "";
        for(var i in obj){
            var property=obj[i];
            description+=i+" = "+property+"\n";
        }
        alert(description);
    }

    /*//Uc前置摄像头扫描成功(因为后置摄像头不能对焦)
    var exArray = []; //存储设备源ID
    MediaStreamTrack.getSources(function (sourceInfos) {
        for (var i = 0; i < sourceInfos.length; i++) {
            var sourceInfo = sourceInfos[i];
            //这里会遍历audio,video，所以要加以区分
            if (sourceInfo.kind === 'video') {
                exArray.push(sourceInfo.id);
            }
        }

        var getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
        getUserMedia.call(navigator, {
            'video': {
                'optional': [{
                    'sourceId': exArray[0] //0为前置摄像头，1为后置
                }]
            },
        }, function(localMediaStream) {
            var video = document.getElementById('video');
            video.src = window.URL.createObjectURL(localMediaStream);
            video.play();
            //每秒用canvas绘制一副图后用二维码解析库解析
            video.addEventListener("timeupdate", checkCode);
        }, function(e) {
            console.log('Reeeejected!', e);
        });

    });
    count = 0;
    function checkCode() {
        canvas.getContext('2d').drawImage(video, 0, 0, 400, 400);
        qrcode.decode(canvas.toDataURL("image/png"));
        qrcode.callback = function (data) {
            if (data == 'error decoding QR Code') {
                document.getElementById('text_box').innerText = '第' + count + '次:' + data;
                count++;
            } else {
                video.removeEventListener('timeupdate', checkCode);
                alert(data);
                //location.href = data;
            }
        }
    }*/


    //谷歌浏览器(电脑前置摄像头)扫描成功
    var count = 0;
    var video = document.getElementById('video');
    var canvas = document.getElementById('canvas');
    navigator.mediaDevices.getUserMedia({
        video: true
    })
    .then(function(stream){
        video.src = window.URL.createObjectURL(stream);
        video.play();
        //每秒用canvas绘制一副图后用二维码解析库解析
        video.addEventListener("timeupdate", checkCode);
    })
    .catch(function(){

    });

    function checkCode(){
        canvas.getContext('2d').drawImage(video, 0, 0, 400, 400);
        qrcode.decode(canvas.toDataURL("image/png"));
        qrcode.callback = function(data){
            if(data == 'error decoding QR Code'){
                document.getElementById('text_box').innerText = '第' + count + '次:' + data;
                count ++;
            }else{
                video.removeEventListener('timeupdate', checkCode);
                alert(data);
                //location.href = data;
            }
        }
    }

</script>  
  
</body>  
</html>

结语，基本没什么实用价值

sas6216402fx

关注

0
点赞
踩
5

收藏

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

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

扫一扫