🧊

iOS SafariのカメラストリームをChromeにWebRTCで送ってMediaRecorderでWebMにするとおかしな動画が撮れる

またもニッチなケースを踏みましたというメモです。

経緯

弊社の開発合宿で作ろうとしてたものが（正確にはいまも合宿中なのでing）あります。

  • iOS Safariで`getUserMedia()`
  • WebRTCで飛ばす
  • PCのChromeで受け取る
  • MediaRecorderで`.webm`に

ざっくりこんな感じ。
本当にやりたかった要件はまだ続きがあるけど、とりあえず問題に必要な手順がコレ。

おかしな動画

こんなん。

iOS Safariから飛んでくるストリームは縦長なのに、そのままの縦長ではなくこのようにアス比1の領域を繰り返すように録画される・・。

原因は・・？

  • iOS Safariで見えるもの: 問題なし
  • WebRTC経由でChromeに届いたもの: 問題なし
  • MediaRecorderで生成したもの: おかしい

という感じで、ChromeのMediaRecorderのバグなんだろうか・・？

ちなみにChromeのローカルでストリームを縦長にして、iOS Safariと同じアス比を再現してみても問題なかった。
Chromeでリモートストリームを縦長にして再現してみても問題なかった。

ChromeのMediaRecorderがバグってる

自信はないけど、Chromeのバグだと思う。
というのも、FirefoxのMediaRecorderであれば問題なく録画できたから。

`.getSettings()`なんかアテにしてないとはいえ、明らかにおかしいChrome・・。

MediaRecorderやるならFirefox使おう！