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

最近有个项目需要使用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>  

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

展开阅读全文

没有更多推荐了,返回首页