Canvasの録画方法

Canvas を何かを作ったらSNSに載せたくなる。

ということで、Canvasでのムービー録画のコードを確認しました。

録画はできたのですが、ガタガタしてます。。
ガタガタの改善策はおいおい確認します。

画面をクリック後、録画開始し 9 秒間録画して停止するプログラムです。

この部分で録画することができました。

let stream = canvas.captureStream(25);
let recordedChunks = [];

let options = { mimeType: 'video/webm; codecs=vp9' };
mediaRecorder = new MediaRecorder(stream, options);

mediaRecorder.ondataavailable = handleDataAvailable;
mediaRecorder.start();

function handleDataAvailable(e) {
    if (e.data.size > 0) {
        recordedChunks.push(e.data);
        download();
    } else {
        console.log('error');
    }
}

setTimeout((e) => {
    console.log('stopping');
    mediaRecorder.stop();
}, 9000);