ボクココ

個人開発に関するテックブログ

WebRTC で録画した動画の編集をFFmpeg で実現する

ども、@kimihom です。

最近は動画とか画像の変換について色々学んでいた。この分野も奥が深く、やりがいのある分野だ。てことで本記事では FFmpeg を使った動画編集の基本について備忘録がてら記していこうと思う。

WebRTC 録画の課題

WebRTC で録画すると、webm というブラウザに優しい? フォーマットで録画/録音される。当然、このまま <video><audio>タグを使えばそのまま再生できるのだけど、大抵は WebRTC で撮った動画を編集してから Youtube などに上げられる形式に変換したいよねってのがある。この場合例えば webmmp4 などに変換しなければならない。

さらに、WebRTC は 各メディアで別々の webm 形式で保存されるため、動画と音声が別々のファイルとして保存されてしまう。これも、当然ビデオとしてみるなら組み合わせたいところである。

そこで webm 形式で落としてきた動画/音声ファイルを組み合わせて Youtube などに上げられる動画を作っていこう。

FFmpeg

動画編集では FFmpeg が一般的に使われているようである。最初はその名前すら知らなかったけど、実際に使ってみると本当に色々なことができる素晴らしい動画編集ツールだった。

FFmpeg は、コマンドラインで動画の編集を可能にしてくれる。コマンドベースでできることによって軽く実行できるし、コード化しやすいというメリットがある。巷の動画編集の Web サービスのほとんどはこれを使っているんじゃないかな?実際、Qiita などでも FFmpeg に関して多くの記事を見かけることができる。

インストール方法などは読者の皆様ならきっとすぐできると信じているので省略する。以下に使い方のサンプルについてご紹介していく。

動画と音声を結合する

まず WebRTC で最も解決しなければならない動画と音声の結合と mp4 形式の作成だ。

ffmpeg -i video.webm -i audio.webm -map 0:0 -map 1:0 -vcodec libx264 -acodec libmp3lame output.mp4

-map 0:0 -map 1:0 てので 0つ目のファイルの、0番目のストリームと1つ目のファイルの、0番目のストリームをマージする という命令になるそうだ。コーデックにも色々と種類があるけど、上記コマンドでは動画H.264 と 音声mp3 の形式で組み合わせている。

これだけで mp4 の動画ができる。

動画の切り分け

無事できた動画を、パート毎に分割したいってことがあるだろう。そんな時は以下のコマンドを実行しよう。

ffmpeg -ss [開始位置(秒数)] -i [元動画] -t [切り出す秒数] [新しい動画]

1つの動画に2つを重ねて表示

例えばカメラで配信しつつ、デスクトップのスクリーンシェアをしていた場合、2つの動画を1画面で表示したいということが出てくる。右下に重ね合わせて出すイメージだ。

この場合、2つのステップが必要になる。今回のサンプルは 320x240の動画がメインであって、80x60の動画が右下に出てくるようにする場合の方法。

1 動画をリサイズ

ffmpeg -i video1.webm -s 320x240 video1_resized.webm
ffmpeg -i video2.webm -s 80x60 video2_resized.webm

2 組み合わせ

ffmpeg -i video1_resized.webm -vf " movie=video2_resized.webm[inner]; [in][inner] overlay=240:180 [out] " combined.mp4

参考資料

FFmpeg に関してはググると色々な人が記事を書いてくれているからサンプルは見つけやすい。それを後は自分のやりたいようにどう最適化していくかってところだ。 FFmpeg で一度エラーが出ると原因を見つけるのが非常に難しい。これはまだ私が触り始めたばかりだからかもしれないけど。

FFmpeg の公式ドキュメントが一番間違いないけど、オプション全てが載ってるので何使えばいいのかわからないのが難点だ。ネット上に乗っていたサンプルコードをまずは実行してみて、それぞれの詳しい意味を公式ドキュメントで学んでいくってのがいいと思った。

終わりに

最近 ちょっとだけ動画編集についてかじり始めて、その備忘録的な感じでまとめてみた。

現在、2つの動画を1つに連結する(concat) 方法を調べているけど、うまくいかなくてどハマり中。。2つの動画のサイズやエンコード形式など、うまく条件が合わないと難しいのかもしれない。

この動画/音声の編集スキルは今後より大事になってくると思うので、よければ FFmpeg を触ってみていただけたら幸いだ。