Zenn
🎥

ブラウザで動く動画編集ソフトの作り方

2021/12/04に公開
Nuxt
TypeScript
Vue.js
FFmpeg
tech

はじめに

近年のウェブブラウザはWebWorker[1], WebAssembly[2] などの技術の登場により、ネイティブアプリに劣らない速度の計算をブラウザ上で行うことができます。

その中でも動画、音声の変換やエンコードなどを行うことのできるオープンソースソフトウェアのFFmpeg[3]もブラウザ上で動かせる[4]用になりました。

そこで、実験的にブラウザで完結する動画編集ソフトを作成してみました。その際の基本的な考え方をまとめました。

https://github.com/toshusai/vega
デモ：https://vega.toshusai.net/

基本的な考え方

  • 動画
  • 音声
  • 画像
  • テキスト
    の素材を扱うことを考えます。

これらの素材の再生位置、画面の位置、長さなどの情報を持つ単位を作成し、スプリットと呼びます。

これらのスプリットを最終的に動画へと出力します。

FFmpegの入力は、動画、連番画像、音声なので、テキストや画像のように画面に自由に配置する素材については、一度画像へと変換する必要があります。

動画

FFmpegの入力については、全ての画像、動画、テキストを一度連番画像に変換します。
これらの要素はThree.js[5]を用いて各フレームを出力します。
動画はVideoTexture, 画像はImageTexture, テキストは一度canvasに描画し、CanvasTextureとして扱います。

canvasに描画する画像はccapture[6]を用いてwebpへと変換します。

音声

音声素材及び動画素材の音声については、一度ffmpegでスプリットに合わせた加工を行い、それらをfilter_compexを使って動画と結合し、最終的な出力にします。

-i _vega_video.webm -i video.mp3 -i audio.mp4
  -filter_complex [2:a]adelay=5715|5715[out2];[1:a]adelay=260|260[out1];[out1][out2]amix=inputs=2[out]
  -map [out]:a

素材処理の流れ

おわりに

ブラウザはWebXRやAudio APIなどを使ってネイティブアプリに劣らないソフトウェアを作成することができると思います。規格は共通化され、多くのデバイスで動作し、Electronやionicなどでプラットフォーム/デバイスのAPIを呼び出したりもできます。Webブラウザの可能性を探求してみてはいかがでしょうか。

こちらに使用したAdobe Spectrum for Vueも開発しています。
https://github.com/toshusai/spectrum-vue
興味があればチェックしてください。

脚注

  1. https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers ↩︎

  2. https://webassembly.org/ ↩︎

  3. https://www.ffmpeg.org/ ↩︎

  4. https://github.com/ffmpegwasm/ffmpeg.wasm ↩︎

  5. https://github.com/mrdoob/three.js/ ↩︎

  6. https://github.com/spite/ccapture.js/ ↩︎

Discussion