はじめに
JavaScriptベースの動画編集サービス・Double TONE - https://doubletone.jpを作っています。2021年10月時点では限定公開ですが、近々ベータ版として一般公開する予定です。 (追記)2021年12月1日にオープンベータ版として、一般公開しました！
(追記)WebAssembly + Web Audio API + Canvas で動画編集（Double TONEの紹介）にもう少し詳しい記事を記載しています。
イメージはこんな感じです。Qiitaでは、このサービスの開発ブログ的なことを書いていこうと思います。
自己紹介
趣味でコーディングをしてます。
本職ではプログラミングすることはあまりなく、Excel職人・PowerPointer職人になってます。
保護猫５匹と楽しく生活してます。
なんで作ろうと思ったのか
2年ほど前職場の忘年会的なイベントで動画編集が必要になったけど、扱う素材がコンフィデンシャルなため（マネージャー陣からの今だから言える赤裸々な告白）、自宅マシンでの作業ができなく、かつ職場PCには未許可のソフトウェアをインストールしてはいけない制限がありました。 なので、インストール不要、素材のアップロードも不要な動画編集ツールがあれば解決、と思い立ったのがきっかけです。
実行環境など
とりあえずMac/PCで、ブラウザはGoogle Chromeのみとしています（スマホ・タブレットは未対応）。メモリ管理あたりの最適化がまだまだのところがありますので結構メモリ食います。
- サーバーサイドは
Node.js - フレームワークは、
Express - フロント側のUIは
Bootstrap - UI制御は、
jQueryがメイン - 動画の書き出しは
ffmpeg.wasm
簡単なサービスの紹介
- サービス名：Double TONE（ダブルトーン）
- ブラウザ上で動作する動画編集サービスです
- 基本的な編集作業はブラウザ上で完結します
- 動画や写真などの素材もアップロード不要です
- レンダリングもブラウザ上でやります
- SNSに直接アップロードできます
動作イメージ
ドラッグ＆ドロップで素材をタイムラインに追加
エフェクトの追加（回転）
エフェクトの追加（マスク）
ソリッドレイヤーの追加とブレンドモード
文字
今後Qiitaに投稿する内容について
Double TONEの開発メモを自分でも整理するために投稿していくつもりです。このサービスは今のところ一人で開発しているのでバックエンドやインフラ含め試行錯誤した失敗談が多くなるかもしれないです。
Reference
Node.js: https://nodejs.org/ja/
Express: https://expressjs.com/
Bootstrap: https://getbootstrap.jp/
jQuery: https://jquery.com/
ffmpeg.wasm: https://github.com/ffmpegwasm/ffmpeg.wasm