我们如何使用 mediaRecorder 将画布流与音频流混合

Posted 2023-03-24

【中文标题】我们如何使用 mediaRecorder 将画布流与音频流混合

【英文标题】：How can we mix canvas stream with audio stream using mediaRecorder [duplicate]

【发布时间】：2017-02-20 20:50:53

【问题描述】：

我有一个使用 canvas.captureStream() 的画布流。我有来自 webrtc 视频通话的另一个视频流。现在我想将画布流与视频流的音轨混合。我该怎么做？

【参考方案1】：

使用 Firefox 和 Chrome 56 中可用的 MediaStream constructor 将曲目合并到一个新流中：

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

以下内容在 Firefox 中对我有用（在 Chrome 中使用 https fiddle，尽管在录制时会出错）：

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"   hidden></canvas>
<video id="video"   autoplay></video>
<a id="link"></a>

【讨论】：

不应该是使用MediaStream.addTrack 吗？ （即使它是doesn't work in FF。）此外，Chrome 仍然以 MediaStream 构造函数为前缀。

@Kaiido 他们都是正确的。构造函数在没有 chrome://flags/#enable-experimental-web-platform-features 标志的 Chrome Canary 中为我工作，尽管录制中的某些内容失败了。希望这两款浏览器都能尽快修复它们的错误。

是的，它在 canary 56 中没有前缀，但在 stable 53 中，您仍然需要调用 new webkitMediaStream()。我在this dupe 的末尾做了一个丑陋的 woraround 来处理这两个浏览器。是的，两个 UA 中仍然存在很多错误......