MediaStream同时捕获画布和音频

Question

我正在开展一个项目，我想：

1. 加载视频js并将其显示在画布上。
2. 使用过滤器来改变画布的外观（以及视频）。
3. 使用MediaStream captureStream（）方法和MediaRecorder对象记录画布表面和原始视频的音频。
4. 在HTML视频元素中播放画布和音频的流。

通过调整此WebRTC演示代码，我已经能够在视频元素中显示画布记录：https://webrtc.github.io/samples/src/content/capture/canvas-record/

也就是说，我无法弄清楚如何在画布旁边录制视频的音频。是否可以从两个不同的源/元素创建包含MediaStreamTrack实例的MediaStream？

根据MediaStream API的规范，理论上应该有一些方法来实现这个目标：https://w3c.github.io/mediacapture-main/#introduction

“MediaStream API中的两个主要组件是MediaStreamTrack和MediaStream接口.MediaStreamTrack对象表示源自用户代理中的一个媒体源的单一类型的媒体，例如由网络摄像头生成的视频.MediaStream用于分组几个MediaStreamTrack对象分成一个单元，可以在媒体元素中记录或渲染。“

Answer 1

是否可以从两个不同的源/元素创建包含MediaStreamTrack实例的MediaStream？

是的，你可以使用MediaStream.addTrack()方法来做到这一点。

但Firefox只会将初始流的轨道用于记录器，直到this bug被修复。

---

OP已经知道如何获得所有这些，但这里提醒未来的读者：

• 要从画布获取videoStream轨道，可以调用canvas.captureStream(framerate)方法。
• 要从视频元素获取音频streamTrack，您可以使用WebAudio API和它的createMediaStreamDestination方法。这将返回包含我们的audioStream的MediaStreamDestination节点（dest）。然后，您必须将从视频元素创建的MediaElementSource连接到此dest。如果您需要向此流添加更多音轨，则应将所有这些源连接到dest。

既然我们有两个流，一个用于画布视频，一个用于音频，我们可以在初始化canvasStream.addTrack(audioStream.getAudioTracks()[0])之前使用new MediaRecorder(canvasStream)。

这是一个完整的例子，它现在只能在chrome中使用，很可能很快就会在Firefox中修复它们：

var cStream,
  aStream,
  vid,
  recorder,
  analyser,
  dataArray,
  bufferLength,
  chunks = [];

function clickHandler() {

  this.textContent = 'stop recording';
  cStream = canvas.captureStream(30);
  cStream.addTrack(aStream.getAudioTracks()[0]);

  recorder = new MediaRecorder(cStream);
  recorder.start();

  recorder.ondataavailable = saveChunks;

  recorder.onstop = exportStream;

  this.onclick = stopRecording;

};

function exportStream(e) {

  if (chunks.length) {

    var blob = new Blob(chunks)
    var vidURL = URL.createObjectURL(blob);
    var vid = document.createElement('video');
    vid.controls = true;
    vid.src = vidURL;
    vid.onend = function() {
      URL.revokeObjectURL(vidURL);
    }
    document.body.insertBefore(vid, canvas);

  } else {

    document.body.insertBefore(document.createTextNode('no data saved'), canvas);

  }
}

function saveChunks(e) {

  e.data.size && chunks.push(e.data);

}

function stopRecording() {

  vid.pause();
  this.parentNode.removeChild(this);
  recorder.stop();

}

function initAudioStream(evt) {

  var audioCtx = new AudioContext();
  // create a stream from our AudioContext
  var dest = audioCtx.createMediaStreamDestination();
  aStream = dest.stream;
  // connect our video element's output to the stream
  var sourceNode = audioCtx.createMediaElementSource(this);
  sourceNode.connect(dest)
    // start the video
  this.play();

  // just for the fancy canvas drawings
  analyser = audioCtx.createAnalyser();
  sourceNode.connect(analyser);

  analyser.fftSize = 2048;
  bufferLength = analyser.frequencyBinCount;
  dataArray = new Uint8Array(bufferLength);
  analyser.getByteTimeDomainData(dataArray);

  // output to our headphones
  sourceNode.connect(audioCtx.destination)

  startCanvasAnim();

  rec.onclick = clickHandler;
  rec.disabled = false;
};

var loadVideo = function() {

  vid = document.createElement('video');
  vid.crossOrigin = 'anonymous';
  vid.oncanplay = initAudioStream;
  vid.src = 'https://dl.dropboxusercontent.com/s/bch2j17v6ny4ako/movie720p.mp4';

  
}

function startCanvasAnim() {
  // from MDN https://developer.mozilla.org/en/docs/Web/API/AnalyserNode#Examples
  var canvasCtx = canvas.getContext('2d');

  canvasCtx.fillStyle = 'rgb(200, 200, 200)';
  canvasCtx.lineWidth = 2;
  canvasCtx.strokeStyle = 'rgb(0, 0, 0)';

  var draw = function() {

    var drawVisual = requestAnimationFrame(draw);

    analyser.getByteTimeDomainData(dataArray);

    canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
    canvasCtx.beginPath();

    var sliceWidth = canvas.width * 1.0 / bufferLength;
    var x = 0;

    for (var i = 0; i < bufferLength; i++) {

      var v = dataArray[i] / 128.0;
      var y = v * canvas.height / 2;

      if (i === 0) {
        canvasCtx.moveTo(x, y);
      } else {
        canvasCtx.lineTo(x, y);
      }

      x += sliceWidth;
    }

    canvasCtx.lineTo(canvas.width, canvas.height / 2);
    canvasCtx.stroke();

  };

  draw();

}

loadVideo();

<canvas id="canvas" width="500" height="200"></canvas>
<button id="rec" disabled>record</button>

---

Ps：由于FF团队似乎需要一些时间来修复bug，这里有一个快速解决方案，使它也可以在FF上运行。

您还可以使用new MediaStream([track1, track2])混合两首曲目。 但是，chrome目前是这个构造函数的前缀，但是因为它确实支持addTrack，所以它并不是真的需要，而且我们可以带来像丑陋的东西一样

var mixedStream = 'MediaStream' in window ? 
  new MediaStream([cStream.getVideoTracks()[0], aStream.getAudioTracks()[0]]) :
  cStream;
recorder = new MediaRecorder(mixedStream);

Working fiddle for both FF and chrome.

Answer 2

Kaiido的演示很精彩。对于那些只是寻找tl; dr代码来添加音频流到他们现有的画布流：

let videoOrAudioElement = /* your audio source element */;
// get the audio track:
let ctx = new AudioContext();
let dest = ctx.createMediaStreamDestination();
let sourceNode = ctx.createMediaElementSource(videoOrAudioElement);
sourceNode.connect(dest);
sourceNode.connect(ctx.destination);
let audioTrack = dest.stream.getAudioTracks()[0];
// add it to your canvas stream:
canvasStream.addTrack(audioTrack);
// use your canvas stream like you would normally:
let recorder = new MediaRecorder(canvasStream);
// ...