手机调取摄像头问题(getUserMedia)

先说坏消息,苹果机没法玩这个!!!

而且,必须拥有 https 的安全协议!!!

 

而安卓机想完成这个功能倒是很 easy 的,看一眼代码

主要传入三个参数,配置对象,成功,失败

var mediaOpts = {
    audio: false,
    video: true,
}
function successFunc(stream) {
    var video = document.querySelector('video');
    if ("srcObject" in video) {
        video.srcObject = stream
    } else {
        video.src = window.URL && window.URL.createObjectURL(stream) || stream
    }
    video.play();
}
function errorFunc(err) {
    alert(err.name);
}

再使用 getUserMeida 就行了

navigator.getUserMedia(mediaOpts, successFunc, errorFunc);

 

但是,这个方法兼容性非常的非常不妙,所以我们需要加上一堆兼容代码

// getUserMedia 被标准废除了,mediaDevices 正在取代中
if (navigator.mediaDevices === undefined) {
    navigator.mediaDevices = {};
}
if (navigator.mediaDevices.getUserMedia === undefined) {
    navigator.mediaDevices.getUserMedia = function(constraints) {
        var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
        if (!getUserMedia) {
            return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
        }
        return new Promise(function(resolve, reject) {
            getUserMedia.call(navigator, constraints, resolve, reject);
        });
    }
}
window.URL = (window.URL || window.webkitURL || window.mozURL || window.msURL);

  

至于开启的是前置还是后置摄像头,那就有些麻烦了,默认为打开前置摄像头(自拍的那个摄像头)。

腾讯的一个 H5 为我提供了这样的方法:

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); }
    }
    if (!navigator.getUserMedia) {alert('不支持 getUserMedia 方法')}

    mediaOpts.video = {
        optional: [{
            sourceId: exArray[1]
        }]
    }
    navigator.getUserMedia(mediaOpts, successFunc, errorFunc);
});

官方 MDN 给出的是这样的办法:

mediaOpts.video = { facingMode: "environment"} // 或者 "user"

实验证明,后者并没有效果。

 

此处可见案例1案例2 

 

以上,调取设备摄像头使用局限还是太多,

获取浏览器权限实属不易,更别提设备权限,微信等 api 提供的也仅是拍照和录像,

所以要完成实时的 AR 场景现在的 Web 技术还不足够。

要么转向 WebApp,要么用其他方案替代(如活动就只要拍照识别,苹果机使用全景虚拟场景等)。

posted on 2017-05-02 14:29  永恒的浪荡时光  阅读(19400)  评论(4编辑  收藏  举报

导航