Canvas上のお絵かきを録画する

MediaRecorder API と Canvas の captureStream() を使えば、ブラウザの Canvas 上でお絵描きしている様子を録画できる。

• デモサイト

実装は出来心から preact で行ったが、普通に React 使っとけばよかった。やはり細かいところでつまずいたりした。

録画のロジックは components/Canvas.jsx コンポーネントに詰め込んだ。本件と関係ないけど、 React のコンポーネントはいろいろな関数を突っ込むことができるので、素朴に実装するとクラスが大きくなりがち。 Functional Component にして制約を課したほうが見通しのよいコードを書ける気がする。