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


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

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

# 成果物
[p5MovRec: A simple movie recording tool for p5.js](https://github.com/tetunori/p5MovRec)
2022/3/3 現在のversionは`1.0.0`です。

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

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

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

## ライブラリのインポート
`p5.js`スクリプトの後に、以下の**1行**を追加するだけです。終了。

```html 
<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してくれています。
<img src="https://tetunori.github.io/p5MovRec/images/startRecording.png" alt="startRecording" width="375px">  

2. 次に、`2`キーを押すと録画が終了し、即時`YYYYMMDDhhmmss.webm`という名前の動画が生成されます！ **文字通り、秒で生成されます。** こちらもコンソールに`✅Recorded.`のテキストが表示されます。この`webm`フォーマットは聞きなれないかもしれないのですが、Chromeブラウザでは確実に再生ができると思います。
<img src="https://tetunori.github.io/p5MovRec/images/stopRecording.png" alt="stopRecording" width="375px"> 
<img src="https://tetunori.github.io/p5MovRec/images/downloadMovies.png" alt="downloadMovies" width="500px"> 

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

```javascript
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](https://tetunori.github.io/p5MovRec/sample/basic/)
 - [Basic Sample On OpenProcessing](https://openprocessing.org/sketch/1212512)　

## 注意！
### `canvas`について
このツールは`createCanvas()`で生成された`canvas`の`stream`から動画を作成するため、`#つぶやきProcessing`や`#p5t`の作品においては、`createCanvas()`を`setup()`の模範的な位置に動かす必要あるかも。例えば、下記のように。

#### Starndard `#つぶやきProcessing` code: 
```javascript
t=0 
draw=_=>{
  createCanvas(w=720,w)
  noStroke(fill('#つぶやきProcessing'))
  ...
```

#### Please change as:
```javascript
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