iOSのSafariで2つめのvideo要素の幅、高さが逆転する現象が起こったのでログとして残します。
PCの場合は発生しないのですが、iOSだと発生しました。(iOS: 16.7.1)
MediaStreamを2つ使うケースは少ないと思いますが、今回は通話しながらWebカメラで高画質の写真を撮るケースで発生しました。
DEMO
1つめ | 2つめ |
---|---|
![]() |
![]() |
対策1
最初からサイズを指定する。
ただし、カメラのサイズ(width,height)はMediaStream取得後にしか分からないので最初から指定することが難しいです。
対策2
video要素の表示がおかしくはなっていますが、元の映像データまでがおかしくなっているわけではありません。
video要素からcanvas要素に表示し、その際、width,heightを反転すれば正しい縦横比で表示することができます。
追記
iOSのブラウザではWebRT関連の不具合がまだまだ多いので、実装する際はご注意を。