android - (Android)/Chrome getUserMedia() 约束应该如何格式化？

Question

我一直在尝试访问运行 Chrome 的 LG G4 Android 手机的后置摄像头。我能够从 MediaStreamTrack.getSources() 中过滤掉视频源，但是当我尝试设置约束以优先使用后置摄像头时，我收到错误 TypeError: Failed to execute “Navigator”上的“webkitGetUserMedia”:格式错误的约束对象。 下面是我用来过滤视频源的代码:

if (navigator.getUserMedia) {
  if (MediaStreamTrack.getSources) {
    MediaStreamTrack.getSources(function(sourceInfos) {
      var sources = [];
      _.forEach(sourceInfos, function(info) {
        if (info.kind === 'video') {
          sources.push(info);
        }              
      })
      handleSources(sources);
    })
  }
}

然后我尝试在上面提到的 handleSources 函数中选择一个源:

function handleSources(sources) {
  var constraints = {
    video: {
      facingMode: 'environment' // Yeah, this definitely doesn't work.
    }
  }
  getMedia(constraints); // This calls getUserMedia with the selected contraints
}

我已经为约束对象尝试了大量不同的格式，但它们似乎都不起作用。我知道我可以遍历所有源并从那里选择环境相机，但我很想知道它的实际语法是如何工作的。谷歌搜索答案只会出现 https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Parameters ，其语法无效。

Answer 1

看起来好像早期/不同版本的 Android 浏览器实现了不同的相机发现 API。我发现我可以使用的每部手机(模拟器和实体手机)似乎都遵循一组不同的选项。更糟糕的是，这似乎是一个领域，各种文档存储库坚持忽略或删除以前实现的 API(即使我们仍然需要知道如何使用它们，如果我们要能够在最新手机以外的任何东西上实现的话) ).

我发现的 API 的两种主要风格是当前记录的一种(您指的是上面的 API)和 a version of the WebRTC specification from October 2013 中记录的一种。 .该风格具有明显不同的约束规范，其中包括强制属性和可选属性。在旧规范下，您上面对 getMedia 的调用将如下所示:

var constraints = {
  video: {
    mandatory: {
      facingMode: 'environment'
    }
  }
}
getMedia(constraints);

或者，您可以使用可选设置，它们以数组的形式提供，因此您可以有多个选择(这些是按顺序计算的):

var constraints = {
  video: {
    optional: [{
      facingMode: 'environment'
    }]
  }
}
getMedia(constraints);

话虽如此，在寻找有效的过滤器时，您的努力可能会有所不同。例如，上面的 facingMode 过滤器在我的 Android 5.0 模拟器中不起作用(它不会抛出错误，但它也不会呈现面向环境的摄像头)；但是，使用设备 ID 确实有效(映射到您的示例时看起来像这样):

var constraints = {
  video: {
    mandatory: {
      sourceId: '<your source ID here>'
    }
  }
}
getMedia(constraints);

对于我已经做过一些测试的 Android 5.0 模拟设备，我能够使用 MediaStreamTrack.getSources() 找到我想要的设备(它返回 facing 每个相机的属性)。请注意，此模拟设备中不存在“推荐的”替换方法 navigator.mediaDevices.enumerateDevices() 方法。

在使用不同的模拟设备和物理设备时，您会看到许多其他问题，在现实世界中实现这些 API 时，每个问题对我来说都是相当大的问题。我强烈建议使用多个物理设备的组合(如果您在可以访问它们的工作环境中)，BrowserStack (给你很多真实和模拟的设备来测试)、console.log() 和 Vorlon.js (从所有这些模拟设备实时查看 console.log() 输出，以便您了解实际情况)。

我目前正在处理这个确切的问题 - 如果我发现任何关于需要支持的不同 API 风格的额外信息，我将在此处发布更新。