問題
- iPhoneのSafariにおいて、
navigator.mediaDevices.getUserMediaによって、- videoを含む
MediaStreamを取得し、 - HTMLの
videoタグに動画を描画しようとすると、 - 最初のフレームだけ描画されたのち、フリーズしてしまう。
解決
getUserMediaを呼ぶ前に、videoタグにautoplay, muted, playsinline属性が付与されている必要がある。
その他の注意
- Reactの
jsxないしtsxファイルにおいて、<video playsinline={true} />とした場合でも、最終的にレンダリングされたHTMLにその属性が付与されているか確認すること- されてなかったので、わざわざ
RefObjectつくってDOMのAPIからsetAttribute('playsinline', '')などとした
- されてなかったので、わざわざ
- そもそも
getUserMediaは secure context と呼ばれるウェブページにおいてのみ動作するため、HTTPSを使ったページにホストする必要があるlocalhostのみ例外とされているが、モバイルSafariの実機検証のためにインターネットシェアリングなどを有効にした場合にホスト名はエイリアスになってしまうため結局NotAllowedErrorを得ることになるngrok使えばいけそう ngrok - secure introspectable tunnels to localhost
参考
- MediaDevices.getUserMedia() - Web APIs | MDN
- Setting up a local WebRTC development environment | Blog | Daily.co
- javascript - Video auto play is not working in Safari and Chrome desktop browser - Stack Overflow
- HTML video preload Attribute
- iphone - Navigator.mediaDevices.getUserMedia not working on iOS 12 Safari - Stack Overflow
- iOS10からiPhoneのSafariでHTML5のVideoをインラインで再生可能&無音なら自動再生も！ | スターフィールド株式会社
- How to connect to localhost from an iPhone (2019) — MTM
雑感
- 1日ハマった
DRYな備忘録として
