p5js:tips:canvasの動画保存

canvasを動画で保存する

一番簡単なやり方は動画部分をquicktime等で画面ごと録画するのがよいでしょう. ただ動画サイズをぴっちりあわせたかったり,目的とする箇所だけ録画したい場合は,プログラム上で録画をするとお手軽です.以下にテンプレートをおいておきます.

ダウンロードできる動画はwebm形式になっているので,ダウンロードしたファイルをchromeにドラッグアンドドロップで動画を確認できます.macだとquicktimeはデフォルトでは再生できない形式です.mp4とかでダウンロードしたい場合は追加ライブラリが必要になりますが,上記のテンプレートが安定して動作するので,webmダウンロードしたファイルをffmpeg等で一括して変換してしまえばよいでしょう.

なお,pixelDensityの値によっては,保存される動画サイズはキャンバスサイズの2倍等だったりするので,ご留意ください.

  • /home/users/2/lolipop.jp-4404d470cd64c603/web/ws/data/pages/p5js/tips/canvasの動画保存.txt
  • 最終更新: 2021/05/18 21:51
  • by baba