WebRTCで複数のビデオをマルチトラック送信

WebRTCのメディアストリームで複数のビデオをおくりたい。
メディアストリームを複数本張ってしまうと、
ストリーム間の遅延が一定ではないので、
ビデオ間で時間がずれてしまう。
同一ストリーム内の別のトラックであれば、
RTPで着順保証されるので、ずれることはない。

というわけで、今回はマルチトラック送信をやってみた。
Demo
source

2回目のgetusermediaで違うカメラに設定し直してもらえれば、
複数のカメラ入力を送れていることが分かりやすいが、
同じカメラでも一応大丈夫。

やったことは

送信側で新しいMediaStreamを作って、送信したいビデオをaddTrackして
後は普段通り送信する

//getusermediaでstreamとstream2を取得
var multiTrackStream = new webkitMediaStream();
multiTrackStream(stream.getVideoTracks()[0]);
multiTrackStream(stream2.getVideoTracks()[0]);
//この後WebRTCでmultiTrackStreamを送信

受信側は贈られてきたstreamを表示する。
videoタグに表示しようとすると最初のTrackしか表示されないので、
2つめ以降のTrackをgetVideoTracksで抽出し、
新しくMediaStreamを作って最初のTrackにセットした後videoタグに流し込む。

//WebRTCでmultiTrackStreamを受信
$('#video').prop('src', URL.createObjectURL(multiTrackStream)); //最初のtrackが表示される
//2つめのtrackを表示させるために新しくmedia streamを作って入れてやる
var tracks = stream.getVideoTracks();
var newStream = new webkitMediaStream();
newStream.addTrack(tracks[1]);
$('#video2').prop('src', URL.createObjectURL(newStream));

FirefoxにmozMediaStream的なものがないか探したが、
現状そういうことはできないらしいので今のところChrome only。

Written on July 22, 2015