【问题标题】:Scan QR-Code with webqr and getusermedia scripts使用 webqr 和 getusermedia 脚本扫描二维码
【发布时间】:2015-03-24 12:00:31
【问题描述】:

我需要使用 HTML5 扫描 QR 码以获取 web 应用程序。 我尝试使用 webqr.js (demo),没关系,但智能手机和平板电脑默认打开前置摄像头。 所以我尝试使用 getusermedia.js (demo),但一切都停止了。

你能帮我解决这个问题吗?

我什至无法通过 Firebug 或其他类似工具查看问题出在哪里,因为我在笔记本电脑上只有一个网络摄像头,而在智能手机上我可以选择网络摄像头,我没有 firebug 或类似工具。

【问题讨论】:

标签: javascript html5-canvas html5-video qr-code getusermedia


【解决方案1】:

您必须指定要使用的相机。 Here 是一个如何做到这一点的例子。您也可以使用JsQRScanner,它使用后置摄像头。

    var n = navigator;
    if (n.mediaDevices && n.mediaDevices.getUserMedia) {
        n.mediaDevices.getUserMedia({
            video : {
                facingMode : "environment"
            },
            audio : false
        }).then(success);
    } else {
        MediaStreamTrack.getSources(function(sourceInfos) {
            var videoSource = null;
            for (var i = 0; i != sourceInfos.length; ++i) {
                var sourceInfo = sourceInfos[i];
                if (sourceInfo.kind === 'video'
                        && sourceInfo.facing === 'environment') {
                    videoSource = sourceInfo.id;
                }
            }
            sourceSelected(videoSource);
        });
        function sourceSelected(videoSource) {
            var constraints = {
                audio : false,
                video : {
                    optional : [ {
                        sourceId : videoSource
                    } ]
                }
            };
            if (n.getUserMedia) {
                n.getUserMedia(constraints, success, error);
            } else if (n.webkitGetUserMedia) {
                n.webkitGetUserMedia(constraints, success, error);
            } else if (n.mozGetUserMedia) {
                n.mozGetUserMedia(constraints, success, error);
            }
        }
    }

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-07-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多