Canvasの描画を動画にする


GLSL などで動かした canvas 上の絵を動画にしてみたい。

MediaRecorder API を軽く触ってみます。

 

動作環境は Chrome、開発に React (Next.js)GLSLgl-react を使っています。

メイン要素と注意点

MediaRecorder API を使いますが、IESafari で未対応のようです。

canvas からのデータ取得で captureStream() を使いますが、これもモバイル環境での動作が保証されていない感じです。

環境によって動かないことを念頭に置いておきましょう。

Typescript

MediaRecorder は型定義されていません。

名前 'MediaRecorder' が見つかりません。ts(2304)

@types から定義を追加します。

 

 

また canvas (HTMLCanvasElement)captureStream も未定義なので拡張します。

プロパティ 'captureStream' は型 'HTMLCanvasElement' に存在しません。ts(2339)

実装

よくある感じの書き方で簡単に実装できます。

チャンクをまとめるところとか、やたら既視感がある。

 

canvas が変化するときにキャプチャされるので静止画だとデータなしになります。

適当に時間で動く GLSL を使って動かします。

 

ここから音を足したり、mediaDevices を使ったり、何かと使えそうですが動作環境が気にもなる。とりあえずもう少し色々試してみよう。


コメントを残す

メールアドレスが公開されることはありません。