iOSで映像の再生が始まらない問題

iOS 上のブラウザで仮想背景ライブラリや Canvas を使用して加工された映像を再生する際、<video> 要素の自動再生（autoplay）がブラウザによってブロックされ、映像処理が開始されないことがあります。

これは iOS のブラウザに適用される Auto-Play Policy に起因します。

この問題が発生する状況では、HTMLVideoElement.play() の戻り値の Promise が NotAllowedError で reject されます。

発生条件

ページ読み込み直後など、ユーザーによる操作が発生していないタイミングで再生が開始される場合に発生します。

なお、createCustomVideoStream 以外の SkyWayStreamFactory のメソッドによる Stream の取得によりユーザー許諾が発生すれば回避される可能性があります。

コード例

以下のように、ユーザージェスチャーによるコールスタックの中で HTMLVideoElement.play() を呼び出すことで再生できます。

button.addEventListener('click', async () => {
  video.srcObject = stream;
  await video.play();
});