从画布和视频元素创建 MediaStream

Posted 2023-03-24

【中文标题】从画布和视频元素创建 MediaStream

【英文标题】：Creating MediaStream from canvas and video element

【发布时间】：2017-05-06 19:32:39

【问题描述】：

我正在创建一个 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);

【参考方案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 Capture Canvas and Audio Simultaneously