從畫布和視頻元素創建MediaStream

Question

我正在創建MediaStream對象，並使用captureStream（）函數從畫布添加視頻軌道。這工作正常。

但是我試圖添加音頻作爲視頻元素的單獨軌道。我似乎無法找到從html視頻元素獲取AudioTrack對象的方法。

目前HTMLMediaElement.audioTracks在Chrome中不受支持。根據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 APIcreateMediaStreamDestination + 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