先说坏消息，苹果机没法玩这个！！！
而且，必须拥有 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"
实验证明，后者并没有效果。
以上，调取设备摄像头使用局限还是太多，
获取浏览器权限实属不易，更别提设备权限，微信等 api 提供的也仅是拍照和录像，
所以要完成实时的 AR 场景现在的 Web 技术还不足够。
要么转向 WebApp，要么用其他方案替代（如活动就只要拍照识别，苹果机使用全景虚拟场景等）。