MediaRecorderで作ったp5.jsの超簡単録画ツール(p5.MovRec)を更新した話

サマリ🎥

以前に、MediaRecorderとffmpeg.wasmでp5.jsの超簡単録画ツール(p5.MovRec)を作った話
で作ったツールについて、セキュリティの都合上ffmpeg.wasmが使えなくなるケースが多くなってしまったため、再度、高画質webm動画を作るツールとして再リリースすることにしました。録画手順もさらに簡単になったので、改めて記事化しておきます。

というわけで、あらためまして、MediaRecorderを使って、p5.js上で、簡単にスケッチの録画ができるツール(p5.MovRec)を開発しました。既存のp5.jsのスケッチを汚すことなく、HTMLファイルにたった1行追加して、キーボードを押すだけで爆速で動画が生成される簡単ツールとなっています。TwitterとかYouTubeとかに作品をアップされている方にお勧めです。
※ただし、TwitterにUpする方は、Convertioなどでwebmからmp4へ変換する必要はあります。

成果物

p5MovRec: A simple movie recording tool for p5.js
2022/3/3 現在のversionは1.0.0です。

きっかけ

僕はよく自分のp5.jsの作品を動画にしてTwitterにアップすることが多いのですが、以前にp5.jsで作ったジェネラティブアートをtwitterに動画で貼り付ける際のメモにも書いたように、きれいな動画作品としてTwitterへ投稿するのは割と大変です。
静止画を切り出して、PC上のffmpegで連結して数分間レンダリングを待つ・・・という大変手間と時間がかかることをしていたわけです。
2022年の現在も、SNS上でもどうやって動画化していますか？という問いは定期的にみられますが、完全なソリューションはでてきていないなぁという実感があります。
また、特にTwitterとかが顕著ですが、アップしてもエンコードされてしまうので、個人的には画像がそこまできれいでなくてもよいから、もっと手間も時間もかからない動画化方法はないだろうか？とずっと考えていました。

もともとのコンセプトはMediaRecorderを使って生成した動画を、ffmpeg.wasmという『ffmpegをブラウザ上で実行できるツール』を使ってトランスコードすることがメインのツールでしたが、諸事情からトランスコードは断念し、簡単に動画を生成できるツールに特化して今に至ります。

簡単な使い方

実行環境

• PC(Win/Mac) 環境のみを想定
• MediaRecorderはたぶん結構いろんなブラウザで動くのかなーとは思いつつ、Google Chromeのみを対象とさせてください。
• なお、このツールはP5 EditorとOpenProcessingの両方でも正しく動作します！Webのサービスの中から、即時動画が生成される様子は『未来が来たな』という印象を受けます。

ライブラリのインポート

p5.jsスクリプトの後に、以下の1行を追加するだけです。終了。

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

<!-- INSERT HERE -->
<script src="https://tetunori.github.io/p5MovRec/dist/1.0.0/basic/p5MovRec.js"></script>

もう、すぐRecできる

1. 1キーを押すと録画開始です。デバッグコンソールに🎥Start Recording.のテキストが表示されるはずです。画面の中から勝手にcanvasを探してそこだけrecしてくれています。

1. 次に、2キーを押すと録画が終了し、即時YYYYMMDDhhmmss.webmという名前の動画が生成されます！ 文字通り、秒で生成されます。 こちらもコンソールに✅Recorded.のテキストが表示されます。このwebmフォーマットは聞きなれないかもしれないのですが、Chromeブラウザでは確実に再生ができると思います。

1. このツールは内部でkeyPressed()を使っているので、もしすでにスケッチ内でkeyPressed()を使っている場合はそちらで上書きされてしまいます。よって、本ツールを使うときは、以下のように録画開始終了の関数をkeyPressed()内で呼んでください。インスタンスp5MovRecとそのメソッドstartRec()、 stopRec()とsetMovType()を使用します。また、 もちろん、p5.jsのsetup関数の中で呼べば最初のフレームから録画することも可能ですよ。

function keyPressed() {
  switch (keyCode) {
    case 49: //1: Start record
      p5MovRec.startRec();
      break;
    case 50: //2: Stop record
      p5MovRec.stopRec();
      break;
    default:
      break;
  }
}

キー操作の表

キー	説明
1	録画開始。
2	録画終了。Webmフォーマットの動画を生成。

サンプル

• Basic Sample On GitHub
• Basic Sample On OpenProcessing　

注意！

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

動画品質について

フレームレート

出力動画のフレームレートが気になる場合もあると思います。PCなどの環境都合で、フレームレートが速くなりすぎたりということもままありました。そのような場合は、p5.jsのスケッチ上で、 frameRate()を調整してみてください。frameRate(30)、frameRate(40)、frameRate(60)とかで上限を設定してあげると所望の動画が手に入りやすくなります。

Canvasのサイズ

これはTwitter向けの話ですが720がベストにエンコードされる値かと思います。ブラウザの拡縮機能で大きさが変わっていると、この拡縮値が結果に影響することもありますので、動画のクオリティが気になる際は、Zoomを100%にもどしたり、80%に小さくしたりなどで改善する可能性があります。出力動画の縦横サイズもチェックしてみてください。

リファレンス

• MediaRecorder
  • https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder