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

我使用的

getUserMedia

有以下限制：

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

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

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

当设备保持为横向时：

当设备保持为纵向时：

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

我试着按照作者的建议来处理约束

aspectRatio

，

min

，

ideal

，但这些约束似乎根本没有效果

---

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

我发现，在纵向模式下，您可以使用反向

aspectRatio

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

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

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

在纵向模式下，此约束：

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

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

此解决方案的警告是，您必须检测方向更改并再次调用

getUserMedia（）

，从而丢失流

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