Создание MediaStream из элемента canvas и video

Question

Я создаю объект MediaStream и добавляю к нему видеодорожку с помощью функции captureStream(). Это прекрасно работает.

Однако я пытаюсь добавить аудио как отдельный трек из видеоэлемента. Кажется, я не могу найти способ получить объект AudioTrack из элемента html video.

В настоящее время 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