Question

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

我的代码适用于大多数桌面和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' }

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

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

Answer 1

您假设所有相机都支持16：9，或者所有浏览器都会为您裁剪视频。不是这样。您还使用了过时的API。试试the latest 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，{{1}存在用于描述约束的关键字，即您对的容忍度得到了您想要的。

我会建议ideal约束，除了没有人实现这个约束，它只是另一个减少你容忍度的约束。

目前我认为只有Chrome可以缩小尺寸并将相机输出裁剪为您想要的精确尺寸。事实证明这是大多数人想要的，但很少发现用户的相机。其他浏览器可能会跟随，因为对其他许多浏览器的需求并不大，但它们目前还没有缩减。

请注意，即使Chrome不会升级，所以如果你在Android上使用Chrome，那么你有可能要求比Android 6设备输出更高的分辨率。在这种情况下请检查aspectRatio，然后使用较低的值重试。

简而言之，您并不总是能够获得您想要的确切尺寸，因为它最终取决于用户的相机及其浏览器。

但HTMLVideoElement无论如何都会在播放时缩小尺寸，您可以use CSS裁剪。

如何在所有设备上使用getUserMedia强制实现16：9的比例？

1 个答案: