主要问题 :
您正在混合旧的和新的getUserMedia语法.
不推荐使用navigator.getUserMedia,首选navigator.mediaDevices.getUserMedia.
此外,我认为可选不再是约束字典的一部分.
默认解决方案
你应该可以直接打电话
navigator.mediaDevices.getUserMedia({
video: {
facingMode: {
exact: 'environment'
}
}
})
但是Chrome仍然有this bug,即使@jib的回答声明它应该与adpater.js polyfill一起工作,我自己也无法使用我的Chrome for Android.
因此,以前的语法目前仅适用于Android版Firefox.
对于chrome,你确实需要使用enumerateDevices和adapter.js来使它工作,但不要混淆语法,一切都应该没问题:
let handleStream = s => {
document.body.append(
Object.assign(document.createElement('video'),{
autoplay: true,srcObject: s
})
);
}
navigator.mediaDevices.enumerateDevices().then(devices => {
let sourceId = null;
// enumerate all devices
for (var device of devices) {
// if there is still no video input,or if this is the rear camera
if (device.kind == 'videoinput' &&
(!sourceId || device.label.indexOf('back') !== -1)) {
sourceId = device.deviceId;
}
}
// we didn't find any video input
if (!sourceId) {
throw 'no video input';
}
let constraints = {
video: {
sourceId: sourceId
}
};
navigator.mediaDevices.getUserMedia(constraints)
.then(handleStream);
});
使它适用于jsartoolkit
你将不得不分叉jsartoolkit项目并编辑artoolkit.api.js.
主项目当前禁用了mediaDevices.getUserMedia(),所以你需要再次启用它,你还需要添加一个sourceId选项的检查,稍后我们将在ARController.getUserMediaThreeScene()调用中添加它. .
您可以在this fork中找到这些编辑的粗略和丑陋的实现.
所以一旦完成,你将不得不重建js文件,然后记住在你的代码中包含adapter.js polyfill.