RecordRTCで動画が間延びする問題
HTML5のgetUserMedia APIを使ってカメラ経由で録画をできるRecordRTCというまあまあ便利なライブラリがあるんだけど、これがPCの機種によっては10秒間の動画を録画した時に動画が15秒に間延びしたりとかそんな感じの変な動画になってしまう問題がある。
どうしたもんかとソースを調べたりしてたら解決したので備忘録的に書いておく。
Githubなんだから修正してpull request出せばいいという説もあるがアカウントないしめんどくさい。
RecordRTC.jsのソース内でHTML5 canvasのrequestAnimationFrameを使って動画のレンダリングを行なっているのだけど、このレンダリングのfpsがあくまでも60fpsを目安にしているだけで確実に60fpsじゃないよ*1という結果だったので固定値になっている動画変換ライブラリのfps値を修正すれば良い。
具体的にはRecordRTC.jsの47行目の
blob = Whammy.fromImageArray(frames, 1000/60);
をちゃんと録画時間を取得してあげてfps値を計算すればいいんじゃないでしょうか。備忘録すらちゃんと書くのめんどくさくなったので最後投げやりだけどそんな感じ。
しかしざっと調べてわかったけどなんとも言えない問題である。きっかり60fpsを刻む実装がjavascriptでは不可能なんじゃなかろうか。つまるところjavascriptが悪い。
