如何在所有设备上使用 getUserMedia 强制使用 16:9 比例？

Question

我需要getUserMedia在视频设置为以16:9 分辨率录制时使用。

我的代码适用于大多数台式机和 Android 7 及更高版本：

navigator.getUserMedia( {
   audio: true,
   video: {
      mandatory: {
          minWidth: 380,
          minHeight: 214,
          maxWidth: 380,
          maxHeight: 214
      }
   }
})

但是在 Android 6 及以下版本以及某些台式机上（无法确切确定是哪个），getUserMedia会出现故障，并且相机中没有可用的图像。

这适用于所有设备和桌面，但默认分辨率为 4:3，而我需要 16:9：

navigator.getUserMedia( {
   audio: true,
   video: true
})

我尝试省略mandatory，没有运气。

更让我困惑的是，iOS 设备（11 测试版）和 Android 需要传递facingMode参数：

video: { facingMode: 'user' }

因此，似乎在某些桌面和设备（如 Android 5 和 6）上传递width和height参数会中断getUserMedia。

有没有办法在所有设备上强制使用 16:9 的比例？捕获具有特定尺寸的视频的正确和传统方法是什么？

Answer 1

您假设所有摄像机都支持 16:9，或者所有浏览器都会为您裁剪视频。不是这样。您还在使用过时的 API。尝试最新的 API ( fiddle , samples )：

var constraints = {video: {width: 320, height: 180, facingMode: "user"}};

navigator.mediaDevices.getUserMedia(constraints)
.then(stream => video.srcObject = stream)
.then(() => new Promise(resolve => video.onloadedmetadata = resolve))
.then(() => log(video.videoWidth +"x"+ video.videoHeight))
.catch(e => console.log(e));

getUserMedia它的核心是一个摄像头/麦克风发现API：所有min, max, exact,ideal关键字都存在来描述您的限制，即您对没有得到想要的东西的容忍度。

我会建议aspectRatio约束，除非还没有人实施，这只是降低容忍度的另一个约束。

目前我相信只有 Chrome 会缩小和裁剪相机输出到你想要的确切尺寸。事实证明这是大多数人想要的，但对用户的相机却知之甚少。其他浏览器可能会效仿，因为对其他浏览器的需求不大，但它们目前并没有缩小规模。

请注意，即使 Chrome 也不会升级，因此如果您在 Android 上使用 Chrome，您可能会要求比 Android 6 设备输出的分辨率更高的分辨率。OverconstrainedError在这种情况下进行检查，然后使用较低的值重试。

简而言之，您并不总能获得所需的确切尺寸，因为它最终取决于用户的相机和浏览器。

但是无论如何 HTMLVideoElement 在播放时都会缩小比例，您可以使用 CSS进行裁剪。