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

Question

我正在用jsartoolkit5构建一个类似于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中呈现内容，从而引发错误。我还尝试遵循这库中的关闭问题说明，但这一次我得到了以下错误：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一起工作，我自己也无法让它在我的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>

​

铬小提琴，它需要https。

让它与jsartoolkit一起工作。

您将不得不分叉jsartoolkit项目并编辑https://github.com/artoolkit/jsartoolkit5/blob/f7a0e8b4c2d6a52e783a1c847e53c733ce99ada8/js/artoolkit.api.js#L1118。

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

您可以在这叉子中找到这些编辑的粗糙和丑陋的实现。

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

使用项目演示之一的这是一把有用的小提琴。