console.lealog();

@leader22のWeb系に関する勉強めもブログですのだ

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でリモートストリームを縦長にして再現してみても問題なかった。

ので、iOS Safariの問題・・・?

ChromeのMediaRecorderがバグってる

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

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

MediaRecorderやるならFirefox使おう!