MediaStreamTrack（オーディオ）をビデオから取得

Question

ビデオ要素のオーディオをキャンバスから録音したいと思います。 私は

var stream = canvas.captureStream(29); 

は今、私はストリームにビデオのaudioTrackを追加していています。

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

しかし、これにより、追加されるすべての動画のパフォーマンスが低下します。 captureStream（）は動画に非常に重いので、Chromeでもフラグをオンにする必要があります。 captureStream（）を使わずにvideo要素からaudioStreamだけを作成する方法はありますか？

Answer 1

はい、WebEye APIのメソッドcreateMediaElementSourceを使用してmediaElementからオーディオを取得し、次にcreateMediaStreamDestinationメソッドを使用して、MediaStreamを含むMediaStreamDestinationノードを作成します。

これですべて接続するだけで、MediaStreamに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>

あなたもこの流れに複数のソースを接続することができ、また、あなたがnew MediaStream([stream1, stream2])コンストラクタで他のビデオストリームとそれを組み合わせることができること（これは現在、異なる結合する唯一の方法です。注FFでストリーム、this bug is fixedまで、まもなく）。