[Javascript] iPhone safariでvideoタグを使った時に、NotAllowedErrorが出た時の回避方法

2022年7月9日

Javascript テクノロジー

eyecatch videoタグにめっぽう詳しくなってしまった、ユゲタです。 videoタグって、Camvasタグと連想したり、パソコンに備え付けられているカメラと連動させたり、Permissionをしっかりと理解していれば、かなり面白い使い方ができる事も理解することができました。 そんな中、iPhoneのsafariでだけ、videoタグに表示がされないという不具合が発見されたので、その調査と対応方法についての調査結果を備忘録しておきます。

原因調査

先日ロンチした、CallMYNTの開発中に発生した不具合です。 ビデオチャットサービス「CallMYNT」 開発中は、同じパソコン内で、GoogleChromeブラウザとSafariブラウザの2つで、相互にビデオチャットを確認しながら行っていたんですが、 これをスマートフォンからアクセスするためには、SSLがセットされている必要があるので、本番環境(または、ステージング環境)での接続が必要になります。 パソコンで問題がなければ、ほぼロンチ状態として、本番アップしてしまうので、今回の症状は本番公開後に発覚したというコトですね。 iPhoneだけvideoタグの表示が真っ暗になっていました。 確か、開発初期の段階では、正常に表示されていたんですが、何故か表示がされてないんですよね。 iPhoneのsafariは、開発しているパソコンと同じwifi環境にある場合は、wifi経由でパソコン(mac)内のsafariブラウザで、デバッグコンソール(javascriptコンソール)が確認できるようになるので、 それで見てみると「NotAllowedError」というエラーが表示されていました。 色々調べてみると、safariブラウザは、セキュリティ項目が他のブラウザよりも厳しめになっていて、ブラウザからcameraやmicへのデバイスアクセスをするためには、パーミッションダイアログを通過しなければいけなかったり、 自動再生するためには、videoタグがmuteになっている必要があるとか・・・ 色々とめんどくさい感じです。 それにしても、不思議なのは、Mac内のSafariでは正常に表示できているのに、iPhoneのSafariではエラーになるという点です。

解決方法

他のサイトでは、Javascriptで、video.playsinline=true という記述を行うとか、video.play()をoncanplayイベント発火で行うとか、 いろいろな書き方をされていましたが、それらは全てセットした状態で、どれもダメでした。 最終的に、videoタグを次の様にすると解決しました。 <video></video> ↓このように変更 <video muted playsinline></video> なんと、直接属性を書き込んでやると何故か解消する事ができました。 どうしても、javascriptでやりたい場合は、次の様にすると、解決することができます。 video.muted = true video.playsinline = true ↓次の様に書き直す video.setAttribute('muted' , '') video.setAttribute('playsinline' , '') なんだか、これってブラウザ側のバグだろ!と思う様なオチですが、iOS15.5の現在バージョンでは、こうする方法しか無い様です。 他の方法を知っている方、教えてくだされ!