javascript - 使用 MediaRecorder 从画布记录 webm

Question

我正在尝试从画布创建 .webm 文件。为此，我正在使用captureStreamand MediaRecorder。但是，我遇到了问题，因为该ondataavailable事件仅在 MediaRecorder 停止时才被触发，并且它包含的事件数据为size0。

我一直在遵循这些指南来帮助实现这一点：

• https://webrtc.github.io/samples/src/content/capture/canvas-record/
• https://developers.google.com/web/updates/2016/01/mediarecorder

以下是我的代码的相关部分（你也可以看到完整的代码）：

在初始化时：

this.displayCanvas = this.$element.find('canvas')[0];
this.bufferCanvas = document.createElement("canvas");
this.backgroundCanvas = document.createElement("canvas");
this.context = this.displayCanvas.getContext("2d");
this.bufferContext = this.bufferCanvas.getContext("2d");
this.backgroundContext = this.backgroundCanvas.getContext("2d");
// recording stream
this.stream = this.displayCanvas.captureStream(25);
console.log("Stream started: ", this.stream);

绘画：

this.context.drawImage(this.backgroundCanvas, 0, 0);
this.context.drawImage(this.bufferCanvas, this.scrollOffset, -400);

捕获开始：

var options = {mimeType: 'video/webm'};
this.recording = true;

recordedChunks = [];
mediaRecorder = new MediaRecorder(this.stream, options);
mediaRecorder.ondataavailable = this.captureDataAvailable;
mediaRecorder.start(100);

关于可用数据：

captureDataAvailable: function(event) {
    console.log('data available: ');
    console.log(event.data);
    if(event.data.size > 0) {
        console.log('writing');
        recordedChunks.push(event.data);
    }
}

捕获完成：

mediaRecorder.stop();
console.log(recordedChunks.length);
var blob = new Blob(recordedChunks, {type: 'video/webm'});
var url = window.URL.createObjectURL(blob);
var a = document.createElement('a');
a.style.display = 'none';
a.href = url;
a.download = 'Waterpipe-' + Math.round(new Date().getTime()/1000) + '.webm';
document.body.appendChild(a);
a.click();
//window.URL.revokeObjectURL(url);
//document.body.removeChild(a);

this.recording = false;

对此问题的任何帮助将不胜感激。