「ClipJS」はFFmpegのWebAssembly版であるffmpeg.wasmとNext.js、Reactの動画生成ライブラリであるRemotionで構築された動画編集ウェブアプリです。登録不要かつ無料で、PCやスマートフォンのブラウザから使うことができます。

ClipJS

https://clipjs.vercel.app/

今回はClipJSにPCのGoogle Chromeからアクセスしてみました。動画編集を行うには「Get started」をクリックします。なお、利用にはユーザー登録は必要なく、無料でも使うことができます。



プロジェクトを作成するため、「Add Project」をクリック。



プロジェクト名を入力し、「Create」をクリックします。



作成されたプロジェクトをクリック。



ClipJSのUIが表示されました。無料で使えるウェブアプリですが、広告は一切表示されていません。



左上にある「Add Media」をクリックし、読み込みたい動画を選択すると、動画がボタンの下に表示されました。ClipJSはウェブブラウザ駆動ですが、編集作業はすべてローカルで行われるので、別のサーバーに動画素材がアップロードされることはありません。



動画ファイル名の左にある「＋」をクリックすると、タイムラインに動画素材が追加されます。



右カラムには動画のプロパティが表示され、動画素材の開始時点と終了時点、スクリーン内でのX座標、Y座標、透明度、幅、高さ、レイヤーの重なり順、透明度を変更できます。



タイムラインは4行で、上から動画、音楽、画像、テキストとなっています。動画や画像にレイヤーの概念は存在しますが、Z-indexで設定できるのみで、視覚的には表現されません。



タイムラインの左上には操作パネルがあります。「Split」は動画素材をプレビューの再生位置で切断します。「Duplicate」は選択した動画素材をコピーして下レイヤーに貼り付け、「Delete」は選択した動画素材を削除します。



UI左上にある「Text」では、字幕となるテキストレイヤーを生成できます。表示させたい内容は「Text Content」にある入力欄に入力します。



テキストレイヤーの表示開始時点と終了時点、X座標とY座標、フォントサイズ、Z-index、フォントカラーを選択し、「Add Text」をクリックすると、タイムラインのテキスト部分に指定したテキストレイヤーが配置されました。プレビュー画面には、指定した内容の字幕が表示されています。



ClipJSでできるのは動画のごく初歩的なカット編集とテキストレイヤーの追加のみ。細かなエフェクトやトランジションなどは設定できません。編集が終わったら、左上から「Export」をクリックし、解像度・画質・プロセス速度を指定して「Render」をクリック。



動画の書き出しが始まりました。今回は解像度1080p・画質High・プロセス速度Balancedに設定していますが、レンダリング自体はブラウザ上で行われているので、書き出しにかかる時間は使用しているPCのスペックによります。やや古めのノートPCだったので、46秒の動画を書き出すのにかかった時間はおよそ40分。通常の動画編集ソフトで書き出す場合のだいたい30〜40倍もかかってしまっている状態で、実用性からはほど遠い印象。



動画の書き出しが終わったところ。「Save Video」をクリックして書き出した動画を保存します。実際に書き出した動画を見ると、プレビューではちゃんと日本語だったのが文字化けしており、どうやら日本語には対応していない模様。また、ClipJSはPCだけではなくスマートフォンでも使えますが、レンダリングがかなり遅いので、記事作成時の段階だと「その場で撮影した動画をさっと編集する」という使い方には期待できなさそうでした。



なお、ClipJSのソースリポジトリはGitHubに公開されています。

GitHub - mohyware/clip-js: online video editor built with nextjs, remotion and ffmpeg (web assembly port) for render.

https://github.com/mohyware/clip-js