2017-06-01 1 views
0

Ich möchte Audio von Video-Element neben der Aufnahme von Leinwand aufnehmen. Ich habeHolen MediaStreamTrack (Audio) von Video

var stream = canvas.captureStream(29); 

Jetzt habe ich Audiotrack von Video in den Stream am hinzugefügt wird.

var vStream = video.captureStream(); 
stream.addTrack(vStream.getAudioTracks()[0]); 

Aber das verlangsamt die Leistung mit jedem Video hinzugefügt. Da captureStream() sehr viel Video benötigt, muss in Chrome auch ein Flag aktiviert sein. Gibt es eine Möglichkeit, nur Audio-MediaStream vom Videoelement zu erstellen, ohne captureStream() zu verwenden.

Antwort

2

Ja, können Sie die Web Audio API-Methode createMediaElementSource verwenden, die den Ton von Ihrem Media greifen wird, und dann die createMediaStreamDestination Methode, die einen MediaStreamDestination Knoten erstellen, die eine Mediastream enthält.

Sie müssen dann nur alles verbinden, und Sie haben Ihren MediaStream mit dem Audio Ihres MediaElement.

// wait for the video starts playing 
 
vid.play().then(_=> { 
 
    var ctx = new AudioContext(); 
 
    // create an source node from the <video> 
 
    var source = ctx.createMediaElementSource(vid); 
 
    // now a MediaStream destination node 
 
    var stream_dest = ctx.createMediaStreamDestination(); 
 
    // connect the source to the MediaStream 
 
    source.connect(stream_dest); 
 
    // grab the real MediaStream 
 
    out.srcObject = stream_dest.stream; 
 
    out.play(); 
 
    });
The video's audio will be streamed to this audio elements : <br> 
 
<audio id="out" controls></audio><br> 
 
The original video element : <br> 
 
<video id="vid" crossOrigin="anonymous" src="https://dl.dropboxusercontent.com/s/bch2j17v6ny4ako/movie720p.mp4?dl=0" autoplay></video>

Beachten Sie, dass auch weitere Quellen zu diesem Strom verbinden könnten, und auch, dass Sie es mit einem anderen Videostrom mit dem new MediaStream([stream1, stream2]) Constructor kombinieren können (es ist zur Zeit die einzige Möglichkeit, anders zu kombinieren Streams auf FF, bis this bug is fixed, sollte bald sein).