Я пытаюсь создать файл .webm из холста. Для этого я использую captureStream и MediaRecorder. Однако у меня возникают проблемы, поскольку событие ondataavailable запускается только тогда, когда MediaRecorder остановлен, а содержащиеся в нем данные события равны size 0.
Я следовал этим руководствам, чтобы помочь реализовать это:
- 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;
Любая помощь в этом вопросе будет высоко оценена.
