「javascript」または任意の「Web クライアント」メソッドを使用して、gif (または一連の画像) および一部のサウンド ファイルからビデオをエンコードすることは可能ですか?
具体的には、いくつかのソース画像とサウンド ファイルからクライアント側でビデオ ファイルを動的に作成したいと考えています。次に、ユーザーが結果のビデオをダウンロードできるようにします。
PHPでffmpegを使用して、サーバー側で画像とmp3からビデオを作成できることは知っていますが、サーバーのCPU使用率とデータ転送が膨大になるため、この方法は使用したくありません。
これを達成するには、いくつかの問題を解決する必要があります。
GIF の生のピクセルを取得します。
<canvas>おそらくこれを行う最良の方法ですが、アニメーション GIF ではうまく再生できないと思います。確かに一連の画像を読むことができます。
フレームをビデオ ストリームに変換します。
MPEG オーディオ コーデックの JavaScript 実装はありますが、純粋な JS のビデオ コーデックについては知りません。ffmpeg のソースを見て、移植してみてください。
ビデオ圧縮コーデック自体 (MPEG-1、-2、H.264 など) を実装するだけでなく、何らかのコンテナー形式 (たとえば、MPEG PS . )
バイナリデータの扱い。
ビデオ コーデックの出力はバイナリ データであり、JavaScript はその性質上、生のバイナリ データをうまく処理できません。最近のブラウザは、メモリ効率の良い方法でこの欠点に正確に対処するために、型付き配列を追加しました。
動画ファイルをユーザーに配信します。
上記のすべてが技術的にはユーザーのコンピューターで発生するため、これはばかげているように聞こえますが、ブラウザーのサンドボックスで発生します。ここで、ブラウザーからデータを取得し、ユーザーがファイル システムに保存できるファイルに保存する必要があります。
他の誰かがdata:URI (base64 でエンコードされたデータ) を使用することを提案しましたが、これはメモリの観点からはひどい考えです。特に、比較的大きなビデオ データを扱うことになるためです。この時点で、ビデオ ストリームが型指定された配列になります。Blob型指定された配列から新しい を作成し、それBlobを に渡しwindow.URL.createObjectURLます。この方法では、データをメモリ内で複製する必要はありません。代わりに、ブラウザは型指定された配列からファイル システムに「ダウンロード」します。
もちろん、これはすべて、ユーザーのマシンに十分なメモリ (RAM) があることを前提としています。通常のビデオ圧縮の実装とは異なり、出力データをディスクにストリーミングすることはできません。ファイル全体をメモリに保持する必要があります。思ったよりも早くメモリ不足になる可能性があります。
したがって、これは理論的には可能かもしれませんが、良い考えではありません。動作する場合、ビデオのエンコード中に非常に遅くなり、ブラウザーがフリーズします (JS とブラウザー UI が同じシングル スレッドを共有するため)。ただし、それを回避するためにWebワーカーをミックスに含めることができると思います.
この時点で、独自のサーバー側ソリューションを展開するか、面倒な作業を行う何らかのサービスを使用する必要があります。
または、Chrome でGoogle のNaCl (ネイティブ クライアント)を利用して、実際にビデオのエンコードを行うこともできます。NaCl を使用すると、ブラウザーでネイティブ (C/C++) コードを実行できます。
ffmpeg ポートがあり、ファイルI/O を行う API があるようです。
明らかに、これは Chrome でのみ機能します。Firefox、Safari、および IE は NaCl をサポートしません。
現在は 2014 年後半で、どの時点で可能になったかはわかりませんが、実際にビデオを gif に変換できるようになりました: http://jnordberg.github.io/gif.js/tests/video .html
そのデモを作成した同じ人物によるライブラリ経由: https://github.com/jnordberg/gif.js
Chrome 38 でうまく動作します。Web ワーカー、ファイル API、および型付き配列をサポートする他のブラウザーはどれでもよいと思います。
まさにこの目的のために作成された C 言語プログラムは、膨大な数の CPU サイクルを消費することに気付きました。完全に別の目的のために設計されたスクリプト言語でそれができると思う理由は何ですか?
いいえ、ブラウザのJavascriptは個々のピクセルに直接アクセスできず、バイナリ ファイルを作成することはできません。フレームを別々の画像として持っている場合、それらをcanvasタグにロードし、その方法でピクセルにアクセスし、MPEG バージョンを整数配列として計算し、それをサーバーに送り返すことができる場合があります (配列がバイナリに変換されます)。ファイル）、しかし、それは遅いでしょう。ffmpeg よりも少なくとも 1000 倍遅い。
編集
コメントは、私が実際には完全に間違っていることを指摘しています。それにもかかわらず、私はこれがひどい考えであるという最初の結論を支持します.
もちろん。
setIntervalスケジュールに従って関数を呼び出し、画像のソースを順番に次のものに変更するために使用します。
画像ソースが変更されたときに待機しないように、画像をプリロードすることをお勧めします。
アップデート：
JavaScriptだけを使用して一連の画像からビデオ ファイルを作成することはできますが、これは簡単なことではなく、うまく機能することもありません。サーバー側の処理を使用してそのようなビデオを作成し、それにオーディオを組み込むことをお勧めします (おそらくffmpegを使用)。