ハクソク

世界を動かす技術を、日本語で。

Show HN: VidStudio、ファイルをアップロードせずに使用できるブラウザベースの動画編集ツール

9時間前原文(vidstudio.app)

概要

  • VidStudioは、完全にブラウザ内で動作するプライバシー重視の動画編集ツール
  • 動画ファイルのアップロード不要で、データは一切外部サーバーへ送信されない
  • WebAssemblyやWebCodecsなど最新技術による高速処理と高機能
  • マルチトラック編集や豊富な動画・音声処理機能を搭載
  • モバイル対応・インストール不要・アカウント登録不要

VidStudio: プライバシー重視のブラウザ動画編集ツール

  • 完全プライベート

    • ファイルはデバイスから外部に出ず、100%プライベートな編集環境
    • アカウント登録やサーバーとの通信が不要な設計

  • 高速処理と互換性

    • WebAssemblyによる動画処理で、待ち時間のない高速な編集体験
    • WebCodecsでハードウェアデコード活用、スムーズなタイムライン再生・スクラブ操作
    • Pixi.jsによるWebGLキャンバス描画、WebGL非対応時はソフトウェアフォールバック

  • 多機能動画編集

    • リサイズ・スケール：YouTube、TikTok、Instagram等向けにレターボックス・クロップ・フォーマット変換
    • トリミング・カット：不要部分の削除、必要なクリップ抽出
    • 一括変換（Drop Zone）：複数動画をプロ仕様MP4にバッチ変換
    • 圧縮：ファイルサイズ指定や品質プリセットによるスマート圧縮
    • 音声処理：音声抽出・変換・エフェクト・ミキシング対応
    • サムネイル生成：フレーム抽出、ストーリーボード、アニメーションプレビュー、スプライト作成
    • ウォーターマーク：画像やテキストの透かし追加、位置・タイミング・透明度・動き設定可能
    • 多機能エディタ：マルチトラック、フレーム精度のシーク、WebCodecsデコード
    • 字幕・テキスト：テキストオーバーレイ、字幕焼き付け、トラック抽出、アニメーションテキスト

  • 保存・パフォーマンス設計

    • IndexedDBによるローカルプロジェクト保存
    • Web Workerで重い処理を分離し、エクスポート中もUIが快適

技術的な特徴と設計の工夫

  • クライアントサイド完結型

    • 全処理がブラウザ内で完結し、セキュリティとプライバシーを確保
    • サーバーコストやアップロード待機時間の排除

  • モダンブラウザ対応

    • インストール不要、PC・モバイル両対応
    • WebGL非対応環境でも動作する柔軟な設計

  • エンコード・デコードの最適化

    • WebCodecsで再生・スクラブ時のデコード高速化
    • **FFmpeg（WebAssembly版）**で最終エンコードやフォーマット変換・未対応機能を補完

  • ユーザー体験の向上

    • アカウントレス、シンプルなUI、即時編集開始
    • 操作中のレスポンス維持を重視した非同期処理

まとめ

  • VidStudioはプライバシー・スピード・多機能を両立した、現代的な動画編集Webアプリ
  • アップロード不要で個人情報流出リスクなし、プロ仕様機能を手軽に利用可能
  • 技術的な質問やフィードバックは公式サイト（https://vidstudio.app/video-editor）で受付

Hackerたちの意見

> FFmpegをWebAssemblyにコンパイルしたものは最終エンコードを処理します。FFmpegのライセンスはLGPL 2.1です。VidStudioはクローズドソースのソフトウェアのように見えますが、フリーソフトウェアであるという表示は見当たりません。クライアントのブラウザで動作するこのソフトウェアを配布しているのですね。私は弁護士ではありませんが、LGPLの条件に違反していると思います。 https://www.ffmpeg.org/legal.html
└
LGPLはそれを許可しています。ただし、いくつかの人気コーデックはGPLを使用しており、それを有効にすると、残りのコードもGPLの下で配布する必要があります。
└
クローズドソースでも大丈夫ですが、LGPLにはいくつかの要件があります。その中には以下のようなものがあります。 - コードで使用したFFmpegのバージョンのソースへのリンクを提供すること - 動的リンクライブラリを使用している場合、ユーザーが自分の互換性のあるビルドにFFmpegライブラリを置き換えられるようにすること。静的リンクライブラリの場合、互換性のあるビルドに再リンクするためのツールを提供する必要があります。最近LGPLのレビューを受けたので、これらのことは記憶に新しいですが、もし間違っていたら教えてください。
└
アプリケーション全体のソースコードを公開せずにLGPLに準拠することは可能なはずです。アプリケーションとFFmpegを異なるアイソレート（wasmプロセス）で実行するか、クローズドソースアプリケーションのwasmコードとユーザーがコンパイルしたFFmpegのwasmビルドをマージ（リンク）する方法を提供することで。異なるアイソレートがあれば、GPLを満たすのに十分かもしれません。クローズドアプリケーションからFFmpegをコマンドラインツールとして呼び出すのと似ていますが、法的にはちょっと不安定な感じがします。
└
指摘してくれてありがとう。正直に言うと、ライセンスについては考えていませんでした。最初はローカルで動かすためのツールのコレクションとして始めたので、他の人が使いたいと思うような立派なツールのコレクションになっていることに気づきました。でも、今夜中に完全に準拠するための必要な変更を行います。少なくともこれには従っています: `FFmpegを間違って綴らないこと（Fは大文字2つ、"mpeg"は小文字）`。wasmプロジェクトの関係でGPLとLGPLについてもっと勉強しなきゃいけないなと思いました。
└
LGPLを使えば、クローズドソースでもライブラリを使えるよ。
https://omniclip.app/ や https://tooscut.app、または https://clipjs.mohy.dev/ と比べてどうですか？
└
それに、https://pikimov.com と比べてどうなのかも気になります。こちらも最近見かけたブラウザベースのビデオエディタです。
└
正直、わからないな。ちょっと調べてみるよ。存在すら知らなかった、教えてくれてありがとう！
パフォーマンスは本当に素晴らしいし、持続性もすごく透明です。実際、すぐに動作が重くなるブラウザ内のビデオエディタにアクセスできたので、感心しています。ただ、トラックがうまく機能しなかったです。WindowsのFirefoxを使っているんですが、トラックの順序を変更するためにドラッグ＆ドロップできなかったし、異なるアスペクト比の映像（ポートレートとランドスケープ）に対応するためのレイヤー変換ツール（位置、回転、スケール）が見つからなかったです。
└
励ましの言葉ありがとう！トラックの操作についてはまだ完全には理解できてないから、クリップをトラック間で移動させることはできないし、トラックの順序を変えることも考えてなかったけど、調べてみるね。トランスフォームについては、トラックにクリップを入れられたら、それをクリックして、プログラムモニターの右側にトランスフォームパネルが表示されるはずだよ。選べるオプションは限られてるけど、少なくともLLMsと一緒にプログラムする方法はなんとなく理解できたかな、あはは。
アプリが完全にローカルで、アカウントもアップロードも必要なかった時代があったのに、今またその価値が見直されてるのがすごいね。
└
同意だけど、ソフトウェアを開発するためにお金を使う人たちは、マネタイズの方法を見つけなきゃいけないんだよね。ただ、もうちょっと獲物みたいなやり方じゃなければいいのに。今やすべてがサブスクリプションで、ユーザーから毎月お金を吸い上げてる。
└
実際に動いているOSにネイティブである部分を除いてね。
プライバシーがデフォルトじゃなくて、機能になったのがすごいよね。この分野でも取り組んでるけど、アップロード不要っていうアプローチをユーザーに伝えるのは、クラウドにすべてがあると思い込んでる人たちには意外と難しい。
└
そうだね、でも一番成功してるビジネスモデルがプライベートデータを売ることに関しては、完全に理にかなってる。
アカウントなし、クラウドなしがめっちゃ好き！字幕やトランスクリプトに対応してるか気になるな。非ネイティブスピーカーには役立つと思う。あと、VidStudioとFinalcut/Imovie/Premiereの使い方の違いについてもっと教えてもらえる？めっちゃ興味ある！ありがとう！
親戚のために似たようなものを作ったことがあるんだけど、Claudeを使ってこれを作れるか聞かれて、もちろんできるよ。ffmpegのwasm版は遅すぎてやめちゃったけど、バックエンドでffmpegを使ったよ。バックエンドのffmpegと比べてどうパフォーマンスが出るのか気になるな。ブラウザネイティブの解決策が100%ないのは本当に驚きだね。
最近、似たようなことをMacアプリとしてやったよ。似たようなスタックだけど、アプリとして配布した感じ。FFmpeg（LGPLコンパイル）を使った。Pixi.jsは試してないけど、面白そうだね。これには良かったと思う。remotionは見たことある？いくつかのことには良かったけど、アプリのパッケージングが楽だったからremotionのChromeベースのレンダリングじゃなくてSafariを使ったよ。比較したいなら、ここにリンクがあるよ：https://www.loremlabs.com/cliproom
発表おめでとう！videotobe.comでも同じ道を進んだんだけど、ffmpeg.wasmを使った完全クライアントサイドで、長い動画ではうまくいかなかった。メモリの上限とエンコード時間が原因で、クラウド処理パイプラインに移行したんだ。君はその両方を解決したね。WebCodecsとPixiとffmpeg.wasmの組み合わせは、振り返ってみると正しい分解だったと思う。VidStudioを使って3時間以上のメディアを処理したけど、ちゃんと持ちこたえたよ。素晴らしい！
ブラウザ内でローカルに動くツールのアイデアにすごく惹かれてる。ウェブサイトは配信媒体としてだけ使われるから、めっちゃ使いやすいんだよね。そんなツールが本当に必要で、試してみたかったんだけど、最初と2回目の試みで失敗しちゃった。Pixelフォンで録画した動画クリップをインポートしようとしたんだけど、Firefoxでは「あなたのブラウザは「hvc1.2.4.L156」コーデックをサポートしていません。他の動画を試してください。」ってメッセージが出た。まあ、仕方ないか。このタイプのツールにはChromeを使う必要があるみたい。Chromeで試したら、「音声デコードに失敗しました：あなたのブラウザは「..._webm.bin」の音声をデコードできません。AAC音声でファイルを再エンコードしてみてください。」って。残念だな。うまく解決できるといいね。もし修正されたら通知を受け取れるニュースレターとかあったら教えて！