0
私はキャンバスからid "imacanvas"でビデオを録画できるスクリプトを作成しました。しかし問題は、ブロブが作成されていないことです。問題は、関数handleDataAvailableが実行されないということです。しかし、私はなぜそれが分からないのですか?あなたの助けのためのMediaRecorder blobが定義されていません
感謝:)
var recordedBlobs;
var recorder;
var stream;
function handleDataAvailable(event) {
console.log("0");
if (event.data && event.data.size > 0) {
recordedBlobs.push(event.data);
console.log("1");
}
}
function startRecord(){
recordedBlobs = [];
var canvas = document.getElementById('imacanvas');
stream = canvas.captureStream(60);
try {
recorder = new MediaRecorder(stream);
} catch (e) {
console.error('Exception while creating MediaRecorder: ' + e);
alert('Exception while creating MediaRecorder: '
+ e + '. mimeType: ' + options.mimeType);
return;
}
recorder.ondataavailable = handleDataAvailable;
recorder.start(10);
}
function stopRecord() {
recorder.stop();
console.log('Recorded Blobs: ', recordedBlobs);
}
function download() {
var blob = new Blob(recordedBlobs, {type: 'video/webm'});
var url = window.URL.createObjectURL(blob);
var a = document.createElement('a');
a.style.display = 'none';
a.href = url;
a.download = 'test.webm';
document.body.appendChild(a);
a.click();
setTimeout(function() {
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
}, 100);
}