javascript – 在Android设备上选择后置摄像头

我正在使用jsartoolkit5构建类似于 this example的项目,我希望能够选择我的设备的后置摄像头,而不是让Android上的Chrome选择前面的默认设置.

根据demo中的示例,如果设备有后置摄像头,我已经添加了下面的代码来自动切换摄像头.

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在画布内呈现内容,因此会抛出错误.
我还尝试按照Jithub存储库中this关闭问题的说明进行操作,但这次我收到以下错误：DOMException：play()只能由用户手势启动.

您对如何解决此问题了解或有任何建议吗？

提前感谢您的回复！

解决方法

主要问题：

您正在混合旧的和新的getUserMedia语法.
不推荐使用navigator.getUserMedia,首选navigator.mediaDevices.getUserMedia.
此外,我认为可选不再是约束字典的一部分.

默认解决方案

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

你应该可以直接打电话

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);
});

<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()调用中添加它. .

您可以在this fork中找到这些编辑的粗略和丑陋的实现.

所以一旦完成,你将不得不重建js文件,然后记住在你的代码中包含adapter.js polyfill.

Here is a working fiddle使用项目的一个演示.

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

解决方法

相关推荐