もう大分前、去年の WebRTC Advent Calendar 2014 で最終日に「複数のストリーム同時送信やストリームの切り替え」 という記事を投稿しました。 半年以上たってしまいましたが、これはこの記事のサンプルアプリとなります。
#WebRTCのマルチストリーム サンプルアプリ
https://github.com/gtk2k/WebRTC_MultiStream これがサンプルアプリのソースです。
このサンプルアプリは、１対１のピアでストリーム(ビデオのみ)を最大３つ送信するアプリとなっています。また、以前はChromeのみでしたが、Firefox Nightly(v42)でも動作するようにしました。
(Firefoxではデバイスキャプチャー選択ダイアログが少し違いますので操作説明を追加しました。)
ただし、Firefox Nightlyでは削除ができません。(削除できないのが新しい仕様のようです)
また、こちらで試してみるとChrome<->FirefoxではChrome->Firefoxではストリームを送ることができるのですが逆はできませんでした。
STUNサーバーのみ使用しており、TURNサーバーは使用していません。ですので、環境によってはWebRTCの接続ができない場合があります。
#操作説明
##１・部屋を作成または部屋に参加する
(初期表示はほとんど真っ暗となっています。ごめんなさい。)
画面右上に、「部屋に参加」というボタンがありますのでそのボタンをクリックすると、部屋名入力のダイアログが表示されます。
部屋名はGUID形式のフォーマット"xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"(半角英数字とハイフンのみ)のみ受け付けます。
部屋名生成ボタンをクリックすると部屋名を自動で生成します。
入力した部屋名の部屋がない場合は新規に部屋が作成されます。
部屋名を入力し参加ボタンをクリックすると、リモートピア(相手)が接続されるのを待機します。
##２・リモートピアから部屋に参加
同様に同名の部屋名を入力し参加すると、メイン画面が有効になります。
##３・ストリームの追加
"ストリームを追加"と書かれているところをクリックします。
"ストリームを追加"をクリックするとキャプチャーデバイスを選択するダイアログが表示されますが、ChromeとFirefoxとで違いがあります。
###Chromeでのキャプチャーデバイス選択ダイアログ
まずは、Chromeから。以下の画像ようなダイアログが表示されますのでデバイスのドロップダウンリストよりデバイスを選択します。
デバイスを選択すると、左上に使用許可を求めるポップアップが表示されますので、許可ボタンをクリックします。
(SSL接続ではないため、デバイスを切り替えるごとにこのポップアップが出ますので、お手数ですがその都度許可ボタンを押してください。)
許可するとプレビューにキャプチャーデバイスのプレビューが表示されます。
追加するストリームが決まりましたら下の"このストリームを追加"ボタンをクリックします。
(画像ではデバイス名が表示されていますが、サンプルアプリはSSL接続ではないため"camera-1" "camera-2"…とドロップダウンリストには表示されます。)
すると、メイン画面にストリームが追加され、リモートピアにもストリームが送信されます。
###Firefoxでのキャプチャーデバイス選択ダイアログ
Firefoxでは使用許可を求めるポップアップにてデバイスの選択を行い"Share Selected Device"ボタンをクリックします。
別のデバイスを選択する場合は、"デバイスを選択"ボタンをクリックすると再度ポップアップが表示されます。
##４・ストリームの削除
各ストリーム表示の右上に×ボタンがあります。このボタンをクリックするとそのストリームが削除され、リモートピアへの配信も停止します。
##５・退室
すみません。退室ですが、ページのリロードを持って代替えとします。
#最後に
今回のサンプルアプリのソースはgithubにあげました。突っ込みはどんどん受け付けます。