video,canvas要素のスクリーショットを撮るライブラリを作った（WebGL対応）

video,canvas要素のスクリーンショットを撮る非常にシンプルなライブラリです。
canvasのcontextTypeがwebglでも期待したスクリーショットが取得できます。

なぜ作ったのか？

1. 今動いている2つのサービスで使う予定でライブラリ化するメリットがあるから。
2. contextTypeがwebglの時のスクリーショットが撮れないと困っている人が自分以外にもいたから。

canvasのcontextTypeがwebglの時にスクリーショットが空になる問題

（出力が画像がpngなら透明、jpegなら真っ黒の画像になります。）

上の記事の回答にあるように、Three.jsではpreserveDrawingBuffer: trueにすることで、空ではないスクリーショットが撮ることができます。

Three.jsの説明ではpreserveDrawingBufferについてこう書かれています。

preserveDrawingBuffer - 手動でクリアまたは上書きされるまでバッファを保存するかどうか。デフォルトはfalseです。

バッファを保存しないのでtoDataURL()をしたタイミングにより空の画像が出力されます。タイミングによっては期待した画像が出力されこともあります。

preserveDrawingBuffer: trueにすることでパフォーマンスも落ちてしまいますので、できればtrueにするのは避けたいですね。

解決策

canvas(contextType: webgl) -> canvas(contextType: 2d) にデータをコピーしcanvas(contextType: 2d)からtoDataURLを行っています。

詳しくは作成したライブラリのコードを見ていただければと思います。
https://github.com/matometaru/video-canvas-screenshot

参考

ライブラリの環境は以下の記事を参考にさせていただきました。非常に分かりやすかったです。