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

Question

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

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

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

这在使用台式机或移动设备处于横向模式时有效。但是，当将移动设备旋转到纵向模式时，视频对象会丢失纵横比：

当设备横向:

当设备纵向:

这在 iOS 和 Android 设备上，在 Chorme、Safari 和三星浏览器上都会发生。

我尝试按照 the MDN docs 的建议使用约束 aspectRatio、min、ideal，但这些约束似乎根本没有效果。

有没有什么办法即使移动设备旋转为纵向模式也始终保持 1.777 的纵横比？

Answer 1

我发现在 Portrait 模式下可以使用反向 aspectRatio。

我在横向模式下使用这个约束：

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

纵向模式下的约束：

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

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

此外，如果您正在录制流，您应该使用 ScreenOrientation.lock() 防止屏幕旋转（在 Safari 中不起作用），这样用户就无法在录制时通过旋转设备来重置流。

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

How to maintain a landscape aspect ratio with getUserMedia on mobile devices?

javascript

mobile

webrtc

getusermedia