class CanvasRecorder {
constructor(canvas) {
const mediaStream = canvas.captureStream(0);
this.chunks = [];
this.mimeType = 'video/webm';
this.recorder = new MediaRecorder(mediaStream, {mimeType: this.mimeType});
this.recorder.start();
this.videoTrack = mediaStream.getVideoTracks()[0];
}
captureFrame() {
return new Promise((resolve) => {
this.videoTrack.requestFrame();
this.recorder.ondataavailable = ({ data }) => {
if (data.size === 0) {
this.recorder.requestData();
} else {
this.chunks.push(data);
this.recorder.ondataavailable = null;
resolve();
}
};
this.recorder.requestData();
});
}
stop() {
this.recorder.stop();
return new Blob(this.chunks, {type: this.mimeType});
}
}