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

2019-05-28 03:14:07 阅读：215 来源： 互联网

标签：android html5 google-chrome html5-video

我一直试图在运行Chrome的LG G4 Android手机上使用后置摄像头.我能够从MediaStreamTrack.getSources()中过滤出视频源,但是当我尝试设置约束以更喜欢后置摄像头时,我得到错误TypeError：无法在’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,其语法不起作用.

解决方法:

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

我发现的API的两个主要风格是当前记录的(您在上面引用的API)和a version of the WebRTC specification from October 2013中记录的API.该风格具有显着不同的约束规范,包括强制和可选属性.以上对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()来查找我想要的设备(它返回每个摄像头的面向属性).请注意,此仿真设备中不存在“推荐”替换方法navigator.mediaDevices.enumerateDevices()方法.

在使用不同的模拟和物理设备时,您会看到许多其他问题,在现实世界中实现这些API时,每个设备都存在很大问题.我强烈建议您使用多个物理设备的组合(如果您在可以访问它们的工作环境中),BrowserStack(为了给您提供大量真实和模拟设备进行测试),console.log()和Vorlon.js(从所有这些模拟设备实时查看console.log()输出,以便您可以看到实际发生的情况).

我目前正在研究这个确切的问题 – 如果我发现有关需要支持的不同API风格的任何其他内容,我将在此处发布更新.

标签：android,html5,google-chrome,html5-video
来源： https://codeday.me/bug/20190528/1168042.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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