在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> 

需要https的鉻小提琴 。

使它與jsartoolkit一起使用

你將不得不分叉jsartoolkit項目並編輯artoolkit.api.js 。

主項目當前禁用了mediaDevices.getUserMedia() ，所以你需要再次啟用它，你還需要添加一個sourceId選項的檢查，稍后我們將在ARController.getUserMediaThreeScene()調用中添加它。 。

您可以在此fork中找到這些編輯的粗略和丑陋的實現。

所以一旦完成，你將不得不重建js文件，然后記住在你的代碼中包含adapter.js polyfill。

這是一個使用項目演示之一的工作小提琴 。