getUserMedia 在 Safari iOS 上返回一个旋转的视频答案

【问题标题】：getUserMedia return a rotated video on safari iOSgetUserMedia 在 Safari iOS 上返回一个旋转的视频
【发布时间】：2020-09-21 00:20:58
【问题描述】：

我需要通过 webrtc 流式传输视频并在网页上播放，它可以在所有桌面浏览器窗口和 mac os 上正常工作。它也适用于安卓浏览器。但在 Safari iOS 上，视频被旋转为风景。它在两者上都旋转（当使用 iOS safari 捕获视频时以及在 chrome 或 safari 桌面上接收流时）。我在 webrtc 网站上使用 safari iOS 上的默认基本 getUserMedia 示例演示对其进行了测试，并遇到了同样的问题。请问如何解决它或者是否有其他解决方案？

【问题讨论】：

您使用的代码在哪里？为了获得更快的帮助，最好发布一些代码

标签： html5-canvas webrtc mobile-safari getusermedia ios-camera

【解决方案1】：

我遇到的可能相关的事情 -

在 iOS 上以纵向模式请求 { width: 640, height: 480 } 将返回一个为 { width: 480, height: 640 } 的相机 MediaStream，并且在方向更改时 MediaStream 会翻转其尺寸。对 html 元素的宽度和高度进行硬编码时要小心。会导致翘曲。人们应该坚持已知的决议，例如en.wikipedia.org/wiki/Display_resolution 中列出的决议。当您使用非典型分辨率时，WebRTC 规范声明浏览器将尝试模拟您想要的提要。然而，这会导致糟糕的跨浏览器代码。如果您想要一致的摄像头供稿，我会避免这种情况。

来源： getUserMedia (Selfie) Full Screen on Mobile

【讨论】：