web-dev-qa-db-ja.com

クライアント側でのみ、JavaScriptを使用してビデオファイルを作成およびダウンロードできますか？

クライアント側でのみビデオファイルを作成してダウンロードすることはできますか？

this[〜＃〜] jsfiddle [〜＃〜] のようなアニメーションキャンバスがあるとします。このスニペットをご覧ください：

...
var stop = false;
setTimeout(function () {
    stop = true;
}, 1860);
...
if (!stop) { requestAnimationFrame( draw, 10 ); }

だから、私のアニメーション期間は1860ms。

生成できます ダウンロード用のテキストファイル 、キャンバスから画像を生成できることは知っていますが、ビデオファイルをレンダリングしてダウンロードすることは可能ですか？

サウンドを追加できますか？

javascripthtml5canvas
1
Ionică Bizău

免責事項：私はこれを自分で行ったことがないので、私が提供するすべての情報は私が調査して見つけたものだけです

理論的には、可能ですが、簡単でも実用的でもありません。

概観

したがって、基本的には、ブラウザから取得した画像をキャンバスから取得してビデオに変換できる、多かれ少なかれビデオエンコーダーをブラウザーに搭載することを検討しています。

私は最初に、主にこれを実際に行うことが可能かどうかについていくつかの懸念を抱いていました。

  • Blobのサイズに制限はありますか？ W3CBlob仕様 によると、存在しないようです。
  • ブラウザは、エンコードを行うために必要なメモリ量をどのように処理しますか？

あなたの状況では、アニメーションの持続時間は十分に短いので、メモリが問題になるとは思いません（少なくとも画像とビデオの保存に関して）。

エンコーディングを取得しましょう！

私はあなたが基本的にビデオエンコーダーを持っていると言いました。これには実際に2つのオプションがあります。独自のエンコーダーを構築するか、誰かが何らかの種類のエンコーダーを既に構築していることを望みます。

GameDevの素晴らしい答え （および後で StackOverflow で同様のものを見つけた）は、 FFmpegが画像からビデオスライドショーを作成できることを説明しています 。

知らない人のために、 FFmpegはマルチメディアデータを処理するためのライブラリとプログラムを生成するフリーソフトウェアプロジェクトです

私はあなたが何を考えているのか知っています、FFmpegは私をどのように助けてくれるのでしょうか、それはJavaScriptではありません...そうですか？

さて、今日まで私は videoconverter.js を見つけるまで同じことを考えていたでしょう。これは明らかにJavaScriptのFFmpegの作業コピーです！

キャッチは何ですか？

さて、FFmpeg JSファイルは、gzip圧縮された最大6MB（または非圧縮で最大24MB）の大きな重みです。ブラウザのメモリフットプリントはかなり大きくなるはずです！

私はここでもいくつかの大きな仮定をしていることに注意します：

  • FFmpeg JSが実際に画像ブロブを読み取れるので、ビデオスライドショーを作成できます
  • そのFFmpeg JSは実際には標準のFFmpegアプリケーションと同じ機能をすべてサポートしています

FFmpeg以外に、別の方法は何ですか？

出力したいビデオのフォーマットを選んで、あなた自身のエンコーダーを書くことができます！

開始するには、 AVI（Audio Video Interlaced） またはおそらく Theora の仕様を確認できます。テキストダウンロードの例と同じように、情報をBLOBに書き込みます。

これは本当に私のスキルセットから外れているので、これについての詳細はあなたに任せます。

これは実用的ではありません！これは小さなビデオのための努力の山です！

初めから簡単ではないと言いました。コメントで@ShivanDragonが述べたことは、私が個人的にそれについて行く方法です。画像をサーバーに渡し、生成してからダウンロードします。

ブラウザ内でそれを望むかもしれないいくつかの理由がありますが、私はそれが実際的であるとは本当に思いません。

編集：ちょっと待って！音ができるかどうかも聞いてみました！

おっと、私はその部分を逃しました！はい、サウンドを追加することは間違いなく可能ですが、ミックスがさらに複雑になります。 FFmpegの2番目の入力ファイルとしてオーディオを追加し、それを出力ビデオに挿入することができます。

独自のビデオエンコーダーを作成するという点では、オーディオストリームを追加するためのかなりの追加作業が追加されます。おそらく開始するのに最適な場所は、 Vorbis や [〜＃〜] wav [〜＃〜] などのオーディオの仕様へのリンクです。

8
Turnerj