手机调取摄像头问题（getUserMedia） - 永恒的浪荡时光

时间：2024-04-16 15:07:53

手机调取摄像头问题（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，要么用其他方案替代（如活动就只要拍照识别，苹果机使用全景虚拟场景等）。

相关文章