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

视频设置为以 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的比例？捕获具有特定尺寸的视频的正确和常规方法是什么？

最佳答案

您假设所有摄像机都支持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和ideal关键字都存在以描述您的约束条件，即您对的容忍度不是的获得所需内容。

我建议使用aspectRatio约束，除了没有人实现它之外，它只是降低您的容忍度的另一个约束。

目前，我相信只有Chrome才能将比例尺缩小并裁剪为所需的确切尺寸。事实证明，这是大多数人想要的，但是对用户相机的了解却很少。其他浏览器可能会紧随其后，因为对其他浏览器的需求并不多，但它们目前并未缩减规模。

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

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

但是HTMLVideoElement仍然会在播放时按比例缩小，并且您可以use CSS进行裁剪。