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

【问题标题】：How to maintain a landscape aspect ratio with getUserMedia on mobile devices?如何在移动设备上使用 getUserMedia 保持横向纵横比？
【发布时间】：2018-07-09 10:29:41
【问题描述】：

我正在使用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？

【问题讨论】：

标签： javascript mobile webrtc getusermedia

【解决方案1】：

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

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

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

纵向模式下的这个约束：

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

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

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

【讨论】：