video,canvas要素のスクリーンショットを撮る非常にシンプルなライブラリです。
canvasの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

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