ffmpeg.wasmが気軽に使えなくなったので、webm生成に特化したツールに変更しました。
詳しくは下記をご参照ください。
https://qiita.com/tetunori_lego/items/1e9bd35d5ef5a3cd1025
以下もアーカイブとして残しておきます。
サマリ🎥
MediaRecorderとffmpeg.wasmを使って、p5.js上で、簡単にスケッチの録画ができるツール(p5.MovRec)を開発しました。既存のp5.jsのスケッチを汚すことなく、HTMLファイルに2行追加して、キーボードを押すだけで爆速で動画が生成される簡単ツールとなっています。TwitterとかYouTubeとかに作品をアップされている方にお勧めです。
成果物
p5MovRec: A simple movie recording tool for p5.js
2021/6/5 現在のversionは0.5.0のalpha releaseです。
きっかけ
僕はよく自分のp5.jsの作品を動画にしてTwitterにアップすることが多いのですが、以前にp5.jsで作ったジェネラティブアートをtwitterに動画で貼り付ける際のメモにも書いたように、きれいな動画作品としてTwitterへ投稿するのは割と大変です。
静止画を切り出して、PC上のffmpegで連結して数分間レンダリングを待つ・・・という大変手間と時間がかかることをしていたわけです。
2021年の現在も、SNS上でもどうやって動画化していますか？という問いは定期的にみられますが、あまり的確なソリューションはでてきていないなぁという実感がありました。
また、特にTwitterとかが顕著ですが、アップしてもエンコードされてしまうので、個人的には画像がそこまできれいでなくてもよいから、もっと手間も時間もかからない動画化方法はないだろうか？とずっと考えていました。
で、最近WebAssemblyという技術に興味を持っていて、その中にffmpeg.wasmという『ffmpegをブラウザ上で実行できるツール』があることを知りました。もともとJSにはMediaRecorderでcanvasの録画ができたはずで、これをTwitterの要求するmp4/h264にトランスコードできないかな？と着手したのがきっかけです。
簡単な使い方
実行環境
- PC(Win/Mac) 環境のみを想定
-
MediaRecorderとffmpeg.wasmはたぶん結構いろんなブラウザで動くのかなーとは思いつつ、Google Chromeのみを対象とさせてください。 - なお、このツールはP5 EditorとOpenProcessingの両方でも正しく動作します！Webのサービスの中から、即時動画が生成される様子は『未来が来たな』という印象を受けます。
ライブラリのインポート
p5.jsスクリプトの後に、以下の２行を追加するだけです。終了。
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.js"></script>
<!-- INSERT HERE -->
<script src="https://unpkg.com/@ffmpeg/ffmpeg@0.10.0/dist/ffmpeg.min.js"></script>
<script src="https://tetunori.github.io/p5MovRec/dist/0.5.0/basic/p5MovRec.js"></script>
もう、すぐRecできる
-
rキーを押すと録画開始です。デバッグコンソールに🎥Start Recording.のテキストが表示されるはずです。画面の中から勝手にcanvasを探してそこだけrecしてくれています。
- 次に、
wキーを押すと録画が終了し、即時webmフォーマットの動画が生成されます！**文字通り、秒で生成されます。**こちらもコンソールに✅Recorded.のテキストが表示されます。このwebmフォーマットは聞きなれないかもしれないのですが、Chromeブラウザでは確実に再生ができると思います。
- 終了時に
mキーを押して録画を終了させると、今度は(少し時間がかかりますが)mp4フォーマットの動画が生成されます。この動画形式でTwitterなどにアップすることができるようになります。Chromeですと、ブラウザ下部に、ダウンロードされたファイル(YYYYMMDDhhmmss.webm/mp4という名前)が表示されます。
- このツールは内部で
keyPressed()を使っているので、もしすでにスケッチ内でkeyPressed()を使っている場合はそちらで上書きされてしまいます。よって、本ツールを使うときは、以下のように録画開始終了の関数をkeyPressed()内で呼んでください。インスタンスp5MovRecとそのメソッドstartRec()、stopRec()とsetMovType()を使用します。
function keyPressed() {
switch (keyCode) {
case 49: //1: Start record
p5MovRec.startRec();
break;
case 50: //2: set webm, stop
p5MovRec.setMovType(P5MovRec.movTypeId.webm);
p5MovRec.stopRec();
break;
case 51: //3: set mp4, stop
p5MovRec.setMovType(P5MovRec.movTypeId.mp4);
p5MovRec.stopRec();
break;
default:
break;
}
}
キー操作の表
| キー | 説明 |
|---|---|
r (Record) |
録画開始。 |
w (Webm) |
録画終了。Webmフォーマットの動画を生成。 |
m (Mp4) |
録画終了。mp4フォーマットの動画を生成。 |
サンプル
注意！
canvasについて
このツールはcreateCanvas()で生成されたcanvasのstreamから動画を作成するため、#つぶやきProcessingや#p5tの作品においては、createCanvas()をsetup()の模範的な位置に動かす必要あります。例えば、下記のように。
Starndard #つぶやきProcessing code:
t=0
draw=_=>{
createCanvas(w=720,w)
noStroke(fill('#つぶやきProcessing'))
...
Please change as:
t=0
w=720
setup=_=>{ createCanvas(w,w) }
draw=_=>{
noStroke(fill('#つぶやきProcessing'))
...
動画の品質について
ちょっと長くなるので、下のほうにTipsの一部として挙げておきます。
もっと高画質にもできるし、微調整も可能
上記はとにかく簡単に使える方法のご紹介でしたが、Twitterにアップすることを目的としていたので、コーデックはh264が選択される様になっていました。実は、このツールでは、vp9コーデックもサポートしており、こっちのほうがかなりきれいな動画になります。それ以外にも録画開始終了のタイミングや各種パラメータを設定できたりするので、ご紹介します。
ライブラリのインポート
こちらもp5.jsスクリプトの後に、以下の２行を追加するだけで終了ですが、URLの一部が異なっていることに注意してください。
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.js"></script>
<!-- INSERT HERE -->
<script src="https://unpkg.com/@ffmpeg/ffmpeg@0.10.0/dist/ffmpeg.min.js"></script>
<script src="https://tetunori.github.io/p5MovRec/dist/0.5.0/advanced/p5MovRec.js"></script>
p5.jsスケッチの中での使い方
createCanvas()直後にインスタンス生成
codecIdを指定して、P5MovRec()をnewしましょう。このcodecIdでコーデックが指定できます。
P5MovRec.codecId.vp9とP5MovRec.codecId.h264が選べるようになっています。advancedではデフォルトはvp9がデフォルトで設定されています。
let myP5MovRec; // Please prepare instance in global
function setup() {
createCanvas( 720, 720 );
myP5MovRec = new P5MovRec(); // P5MovRec.codecId.vp9 is selected by default.
// myP5MovRec = new P5MovRec(P5MovRec.codecId.vp9); // Same as above.
// myP5MovRec = new P5MovRec(P5MovRec.codecId.h264); // For h264 codec.
}
録画の開始・停止
これは、basic側の使い方とそれほど変わりません。movTypeのデフォルト値はP5MovRec.movTypeId.webmになっています。
function keyPressed() {
switch (keyCode) {
case 49: //1: Start record
myP5MovRec.startRec();
break;
case 50: //2: set webm, stop
// myP5MovRec.setMovType(P5MovRec.movTypeId.webm); // webm is default value
myP5MovRec.stopRec();
break;
case 51: //3: set mp4, stop
myP5MovRec.setMovType(P5MovRec.movTypeId.mp4); // for mp4 container
myP5MovRec.stopRec();
break;
default:
break;
}
}
サンプル
Tips
動画品質について
コーデック
このツールのh264コーデックでの出力動画品質はvp9に比べて若干低めです。もし動画の品質で悩むようでしたら、ぜひvp9設定にトライしてください。ただし、繰り返しの注意ですがTwitterでは、vp9コーデックの動画がサポート外ですので、ご注意ください。YouTubeはアップロードできると思います。たぶん。
フレームレート
出力動画のフレームレートが気になる場合もあると思います。PCなどの環境都合で、フレームレートが速くなりすぎたりということもままありました。そのような場合は、p5.jsのスケッチ上で、 frameRate()を調整してみてください。frameRate(30)、frameRate(40)、frameRate(60)とかで上限を設定してあげると所望の動画が手に入りやすくなります。
Canvasのサイズ
これはTwitter向けの話ですが720がベストにエンコードされる値かと思います。ブラウザの拡縮機能で大きさが変わっていると、この拡縮値が結果に影響することもありますので、動画のクオリティが気になる際は、Zoomを100%にもどしたり、80%に小さくしたりなどで改善する可能性があります。出力動画の縦横サイズもチェックしてみてください。
動画のビットレート
作品によっては、出力動画のビットレートがすごく高い値になってしまうことがあると思います。（画面全体でひっきりなしに動く動画など。）
特にTwitterでは高ビットレートの動画はエンコード結果が悪いので、動画の時点でなるべく下げておきたいところです。
今回のツールでは、P5MovRec()の第2引数に、videoBPSという録画時のビットレート指定ができるようにしています。ただし、この設定値通りになるわけではなく、わりとやんわりとそれらしい値に近づく、くらいの機能だと思ってください。使用方法は以下の通りですが、Advanced Sampleで実際に見ることができます。
なお、ビットレートについても、canvasのサイズやフレームレートが影響する場合があるので、こちらも調整すると効果が出る場合があります。
function setup() {
createCanvas( 720, 720 );
const vbps = 2000000; // 2000kbps
myP5MovRec = new P5MovRec(P5MovRec.codecId.vp9, vbps );
...
}
リファレンス
-
ffmpeg.wasm
- https://github.com/ffmpegwasm/ffmpeg.wasm
- https://github.com/ffmpegwasm/ffmpeg.wasm/blob/master/examples/browser/webcam.html
- MIT License, Copyright (c) 2019 Jerome Wu
-
Screen Capture on your browser with ffmpeg.wasm
-
MediaRecorder