从画布和视频元素创建MediaStream

Question

我正在创建一个MediaStream对象，并使用captureStream()函数从画布中向它添加一个视频轨道。这个很好用。

然而，我试图添加音频作为一个独立的轨道，从一个视频元素。我似乎找不到从html视频元素中获取AudioTrack对象的方法。

目前Chrome不支持HTMLMediaElement.audioTracks。根据mozilla站点，我应该能够使用HTMLMediaElement.captureStream()返回一个MediaStream对象，我应该能够从该对象检索单独的曲目，但我只得到'captureStream不是一个函数‘错误。

也许我错过了一些非常明显的东西，但是我非常感谢在这方面的任何帮助。

下面是我的当前代码：

var stream = new MediaStream();

//Works fine for adding video source    
var videotracks = myCanvas.captureStream().getTracks();
var videostream = videotracks[0];
stream.addTrack(videostream);

//Currently not supported in Chrome
var audiotracks = myVid.audioTracks;
var audiostream = audiotracks[0];
stream.addTrack(audiostream);

Answer 1

若要以跨浏览器方式从视频元素获取音频流，请执行以下操作：

AudioContext API createMediaStreamDestination + createMediaElementSource。

​

// if all you need is the audio, then you should even probably load your video in an Audio element
var vid = document.createElement('video');
vid.onloadedmetadata = generateAudioStream;
vid.crossOrigin = 'anonymous';
vid.src = 'https://dl.dropboxusercontent.com/s/bch2j17v6ny4ako/movie720p.mp4';

function generateAudioStream() {
  var audioCtx = new AudioContext();
  // create a stream from our AudioContext
  var dest = audioCtx.createMediaStreamDestination();
  // connect our video element's output to the stream
  var sourceNode = audioCtx.createMediaElementSource(this);
  sourceNode.connect(dest)
    // start the video
  this.play();
  // your audio stream  
  doSomethingWith(dest.stream)
}

function doSomethingWith(audioStream) {
  // the audio element that will be shown in the doc
  var output = new Audio();
  output.srcObject = audioStream;
  output.controls = true;
  output.play();
  document.body.appendChild(output);
}

​

若要向画布流添加音频：

MediaStream捕获画布和音频同时