Wie können wir Canvas-Stream mit Audio-Stream mischen mit MediaRecorder

Question

Ich habe einen Canvas-Stream mit canvas.captureStream(). Ich habe einen anderen Videostream von webrtc Videoanruf. Jetzt möchte ich Canvas-Stream mit Audio-Tracks des Videostreams mischen. Wie kann ich das tun?

Answer 1

Verwenden Sie die MediaStream constructor in Firefox und Chrome 56, um Tracks in einen neuen Stream zu kombinieren:

let stream = new MediaStream([videoTrack, audioTrack]); 

Die folgenden Werke für mich in Firefox (Verwenden https fiddle in Chrome, obwohl es Fehler bei der Aufzeichnung):

navigator.mediaDevices.getUserMedia({audio: true}) 
 
    .then(stream => record(new MediaStream([stream.getTracks()[0], 
 
              whiteNoise().getTracks()[0]]), 5000) 
 
    .then(recording => { 
 
     stop(stream); 
 
     video.src = link.href = URL.createObjectURL(new Blob(recording)); 
 
     link.download = "recording.webm"; 
 
     link.innerHTML = "Download recording"; 
 
     log("Playing "+ recording[0].type +" recording:"); 
 
    }) 
 
    .catch(log)) 
 
    .catch(log); 
 

 
var whiteNoise =() => { 
 
    let ctx = canvas.getContext('2d'); 
 
    ctx.fillRect(0, 0, canvas.width, canvas.height); 
 
    let p = ctx.getImageData(0, 0, canvas.width, canvas.height); 
 
    requestAnimationFrame(function draw(){ 
 
    for (var i = 0; i < p.data.length; i++) { 
 
     p.data[i++] = p.data[i++] = p.data[i++] = Math.random() * 255; 
 
    } 
 
    ctx.putImageData(p, 0, 0); 
 
    requestAnimationFrame(draw); 
 
    }); 
 
    return canvas.captureStream(60); 
 
} 
 

 
var record = (stream, ms) => { 
 
    var rec = new MediaRecorder(stream), data = []; 
 
    rec.ondataavailable = e => data.push(e.data); 
 
    rec.start(); 
 
    log(rec.state + " for "+ (ms/1000) +" seconds..."); 
 
    var stopped = new Promise((y, n) => 
 
     (rec.onstop = y, rec.onerror = e => n(e.error || e.name))); 
 
    return Promise.all([stopped, wait(ms).then(_ => rec.stop())]).then(_ => data); 
 
}; 
 

 
var stop = stream => stream.getTracks().forEach(track => track.stop()); 
 
var wait = ms => new Promise(resolve => setTimeout(resolve, ms)); 
 
var log = msg => div.innerHTML += "<br>" + msg;

<div id="div"></div><br> 
 
<canvas id="canvas" width="160" height="120" hidden></canvas> 
 
<video id="video" width="160" height="120" autoplay></video> 
 
<a id="link"></a>