在Android设备上选择后置摄像头-jsartoolkit5

Question

我正在用jsartoolkit5构建一个类似于本例的项目，我希望能够选择设备的后置摄像头，而不是让Android上的Chrome默认选择前置摄像头。

根据这个演示中的例子，我添加了下面的代码，如果设备有后置摄像头，可以自动切换摄像头。

var videoElement = document.querySelector('canvas');
function successCallback(stream) {
window.stream = stream; // make stream available to console
videoElement.src = window.URL.createObjectURL(stream);
videoElement.play();
}
function errorCallback(error) {
console.log('navigator.getUserMedia error: ', error);
}
navigator.mediaDevices.enumerateDevices().then(
function(devices) {
for (var i = 0; i < devices.length; i++) {
if (devices[i].kind == 'videoinput' && devices[i].label.indexOf('back') !== -1) {
if (window.stream) {
videoElement.src = null;
window.stream.stop();
}
var constraints = {
video: {
optional: [{
sourceId: devices[i].deviceId
}]
}
};
navigator.getUserMedia(constraints, successCallback, errorCallback);
}
}
}
); 

问题是，它完全适用于<video>标记，但不幸的是，jsartoolkit在canvas中呈现内容，从而引发错误。我也尝试过按照Github存储库中这个已关闭问题中的说明进行操作，但这次我得到了以下错误：DOMException: play() can only be initiated by a user gesture。

你知道或者对如何解决这个问题有什么建议吗？

提前感谢您的回复！

Answer 1

主要问题：

您正在混合新旧getUserMedia语法
navigator.getUserMedia已弃用，应首选navigator.mediaDevices.getUserMedia。此外，我认为optional不再是约束字典的一部分。

默认解决方案

这部分几乎是这个答案的重复：https://stackoverflow.com/a/32364912/3702797

您应该能够直接致电

navigator.mediaDevices.getUserMedia({
video: {
facingMode: {
exact: 'environment'
}
}
})

但chrome仍然有这个错误，即使@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);
});

<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

Fiddle for chrome需要https。

使用jsartoolkit

您必须派生jsartoolkit项目并编辑artoolkit.api.js.

主项目当前禁用mediaDevices.getUserMedia()，因此您需要再次启用它，并且您还必须添加一个sourceId选项的检查，我们稍后将在ARController.getUserMediaThreeScene()调用中添加该选项。

你可以在这个分叉中找到这些编辑的粗糙而丑陋的实现

因此，一旦完成，您就必须重新构建js文件，然后记住在代码中包含adapter.jspolyfill。

这是一个使用项目演示的工作小提琴。