0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

iOSのSafariで2つめのvideo要素の幅、高さが逆転する現象

Last updated at Posted at 2023-10-22

iOSのSafariで2つめのvideo要素の幅、高さが逆転する現象が起こったのでログとして残します。

PCの場合は発生しないのですが、iOSだと発生しました。(iOS: 16.7.1)
MediaStreamを2つ使うケースは少ないと思いますが、今回は通話しながらWebカメラで高画質の写真を撮るケースで発生しました。

DEMO

1つめ 2つめ
IMG_0126.jpg IMG_0127.jpg

対策1

最初からサイズを指定する。
ただし、カメラのサイズ(width,height)はMediaStream取得後にしか分からないので最初から指定することが難しいです。

対策2

video要素の表示がおかしくはなっていますが、元の映像データまでがおかしくなっているわけではありません。

video要素からcanvas要素に表示し、その際、width,heightを反転すれば正しい縦横比で表示することができます。

追記

iOSのブラウザではWebRT関連の不具合がまだまだ多いので、実装する際はご注意を。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?