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