如何在移动设备上使用getUserMedia保持横向长宽比？

Question

我正在使用getUserMedia，但有以下限制：

var constraints = {
    audio: true,
    video: {
        width: 960,
        height: 540,
    }
};

navigator.mediaDevices.getUserMedia(constraints).then(...);

此功能在使用台式机或处于横向模式的移动设备时有效。但是，将移动设备旋转到人像模式时，视频对象将失去长宽比：

当设备保持为风景：

当设备保持为肖像：

[这同时发生在iOS和Android设备，Chorme，Safari和Samsung浏览器上。

[我尝试按照aspectRatio的建议来处理约束min，ideal，the MDN docs，但似乎这些约束根本没有作用。

即使将移动设备旋转为纵向模式，是否有办法始终将宽高比保持为1.777？

Answer 1

我发现在纵向模式下可以使用反转的aspectRatio。

我在风景模式下使用此约束：

mediaConstraints: MediaStreamConstraints = {
  video: {
    aspectRatio: 16/9
  }
};

以及此限制在Portrait模式下：

mediaConstraints: MediaStreamConstraints = {
  video: {
    aspectRatio: 9/16
  }
};

此解决方案的警告是，您必须检测方向变化并再次调用getUserMedia()，这会丢失流。

此外，如果正在录制流，则应防止使用ScreenOrientation.lock()旋转屏幕（在Safari中不起作用，因此用户在录制时不能通过旋转设备来重置流。