iOS/iPad OS Safari 15にて、ビデオ映像の横方向に黒い矩形が表示される事象が確認されています

[2022/01/17] iOS15.2にて本事象が解消していることを確認いたしました。なお、本事象およびその他 iOS 15 に関するバグ情報については、下記のお知らせにまとめて掲載しています。

iOS/iPad OS Safari 15における、WebRTC周りのバグ報告について

---

2021/09/21にリリースされるiOS/iPad OS 15のSafariにて、縦画面の映像をキャプチャ時に、ビデオ映像の横方向に黒い矩形が表示される事象が報告されています。iOS 15 beta 8（19A5340a）にて再現確認できております。

Bug 229792: <video> element rendered incorrectly when provided with a portrait orientation stream in Safari 15

発生環境

• 対象SDK: JavaScript SDK
• 対象OS/ブラウザ: iOS 15 または iPadOS 15/Safari

ワークアラウンド

下記のいずれかによって、本事象を回避することが可能です。

1. videoタグのCSSに object-fit: none を指定する本事象の発生原因にはobject-fitプロパティが関与しており、noneを指定することで回避できます。注意点として、noneを指定すると映像画面は拡大されるような表示になります。
2. ダミーのコンテンツを設定し、マージンを調整するビデオ要素の左側にインラインコンテンツを設定することで本事象を回避できます。

ワークアラウンドの実装方法については、以下再現確認用サンプルコードをご参考ください。https://codepen.io/sandabu/pen/xxrRZqx