モリノラボ

WebRTCやWebSocketやHTTP/2などのWebモダンテクノロジーをピセ株式会社のエンジニアが情報公開していきます。

接続環境が異なる相手のMediaStreamが正しく取得できない

WebRTCの実装にPeerJSというライブラリを使わせていただきました。

その際「映像・音声」、「音声のみ」、「視聴のみ」の3パターンの環境間でのP2Pに苦戦したのでメモとして残しておきます。

 

通常の「映像・音声」通話の呼び出し、応答は以下の方法で問題ないのですが、

「音声のみ」、「視聴のみ」が入ってくると別対応が必要なパターンがありました。

var peer = new Peer({key: 'APIKEY'});

// 呼び出し

var call = peer.call('相手のPeerId',  mediaStream);// 応答peer.on('call', function(call) { // 応答する際は自分のMediaStreamを返す  call.answer(mediaStream); 

// 相手のMediaStreamを受け取るcall.on('stream', function(stream) {

// streamを元にvideoタグなどに追加する

});

});

 

 

■上記で問題ないパターン

・「映像・音声」→「映像・音声」

・「映像・音声」→「音声のみ」

・「映像・音声」→「視聴のみ」

・「音声のみ」→「音声のみ」

・「音声のみ」→「視聴のみ」

 

■別対応が必要なパターン

・「音声のみ」→「映像・音声」

「音声のみ」は自分から呼び出しを行うと「映像・音声」の人のMediaStreamを正しく取得できないようなので、私はSignalRを使用して相手から呼び出してもらうように実装しました

・「視聴のみ」→「映像・音声」

・「視聴のみ」→「音声のみ」

「視聴のみ」の場合は自分のMediaStreamを持っていないため呼び出しはできないので、こちらもSignalRを使用して相手から呼び出してもらうように実装しました。

また、応答時にMediaStreamをセットせずanswerすると相手のMediaStreamを受け取れるようです。

call.answer();