[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の現在バージョンでは、こうする方法しか無い様です。 他の方法を知っている方、教えてくだされ!

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。