javascript - 如何在移动设备上使用 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？

标签： javascriptmobilewebrtcgetusermedia

Answer 1

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

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

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

并且在纵向模式下的这个约束：

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

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

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