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

Question

我正在使用getUserMedia以下约束：

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

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

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

当设备保持为Landscape 时：

当设备保持为Portrait 时：

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

我尝试按照 MDN 文档的建议使用约束aspectRatio, min，但似乎这些约束根本不起作用。ideal

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

Answer 1

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

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

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

纵向模式下的限制：

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

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

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