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

Question

我在使用getUserMedia时受到以下限制：

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

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

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

将设备保持为风景时：

将设备保持为纵向状态：

在iOS和Android设备，Chorme，Safari和Samsung浏览器上都会发生这种情况。

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

即使将移动设备旋转为纵向模式，是否可以将纵横比始终保持为1.777？

Answer 1

我发现在纵向模式下，您可以使用倒转aspectRatio。

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

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

，并且在纵向模式下存在以下限制：

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

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

此外，如果您正在录制流，则应防止使用ScreenOrientation.lock()旋转屏幕（不适用于Safari），以便用户在录制时不能通过旋转设备来重置流。