【问题标题】: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);
}
}
}