2016-12-21 7 views
1

私は、MediaStreamオブジェクトを作成し、captureStream()関数を使用してキャンバスからビデオトラックを追加しています。これは正常に動作します。キャンバスとビデオ要素からMediaStreamを作成する

しかし、私はビデオ要素から別のトラックとしてオーディオを追加しようとしています。私は、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); 

答えて

3

は、クロスブラウザの方法でvideo要素からオーディオストリームを取得するには:

以下は私の現在のコードです

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

+0

は、多くのおかげで、それを手に入れました – user2060733

関連する問題