MediaRecorder没有定义斑点

问题描述：

我创建了一个脚本，允许我从画布上记录一个id为“imacanvas”的视频。但问题是没有创建斑点。我认为问题在于函数handleDataAvailable未被执行。但我不知道为什么？MediaRecorder没有定义斑点

感谢您的帮助:)

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); 
}

答

为了能够通过HTMLCanvasElement.captureStream()激活拍摄的流，你需要有初始化它的上下文，并在其上绘制。

这个必须在你致电captureStream()之前完成。

const chunks_before = []; 
 
    const stream_before = c.captureStream(60); 
 
try { const rec_before = new MediaRecorder(stream_before); 
 
    rec_before.ondataavailable = e => chunks_before.push(e.data); 
 
    rec_before.onstop = e => console.log('before : ', chunks_before.length); 
 
    rec_before.start(); 
 
    setTimeout(() => { 
 
    if (rec_before.state === 'recording') 
 
     rec_before.stop(); 
 
    }); 
 
} catch (e) { 
 
    console.log('before failed'); 
 
} 
 

 
// simply doing this allows us to do it 
 
c.getContext('2d').fillRect(0, 0, 20, 20); 
 

 
const chunks_after = []; 
 
const stream_after = c.captureStream(60); 
 
const rec_after = new MediaRecorder(stream_after); 
 
rec_after.ondataavailable = e => chunks_after.push(e.data); 
 
rec_after.onstop = e => console.log('after : ', chunks_after.length); 
 
rec_after.start(); 
 

 
setTimeout(() => { 
 
    if (rec_after.state === 'recording') 
 
    rec_after.stop(); 
 
}, 1000);

<canvas id="c"></canvas>

MediaRecorder没有定义斑点

相关推荐