WebRTC：クライアントAのビデオをクライアントBにストリーミングするにはどうすればよいですか？

Question

私はWebRTCを検討していますが、私は完全な画像を理解していないように感じます。私は、クライアントAは、クライアントBのビデオ・ストリームおよびその逆を見ることができるように、私は2つのクライアントを一致させることができる方法を理解するトラブルを抱えているhttps://github.com/oney/RCTWebRTCDemo/blob/master/main.js

：私は特にこのデモプロジェクトで探しています。

これはデモである：

function getLocalStream(isFront, callback) { 
    MediaStreamTrack.getSources(sourceInfos => { 
    console.log(sourceInfos); 
    let videoSourceId; 
    for (const i = 0; i < sourceInfos.length; i++) { 
     const sourceInfo = sourceInfos[i]; 
     if(sourceInfo.kind == "video" && sourceInfo.facing == (isFront ? "front" : "back")) { 
     videoSourceId = sourceInfo.id; 
     } 
    } 
    getUserMedia({ 
     audio: true, 
     video: { 
     mandatory: { 
      minWidth: 500, // Provide your own width, height and frame rate here 
      minHeight: 300, 
      minFrameRate: 30 
     }, 
     facingMode: (isFront ? "user" : "environment"), 
     optional: [{ sourceId: sourceInfos.id }] 
     } 
    }, function (stream) { 
     console.log('dddd', stream); 
     callback(stream); 
    }, logError); 
    }); 
} 

し、それはこのように使われています：

socket.on('connect', function(data) { 
    console.log('connect'); 
    getLocalStream(true, function(stream) { 
    localStream = stream; 
    container.setState({selfViewSrc: stream.toURL()}); 
    container.setState({status: 'ready', info: 'Please enter or create room ID'}); 
    }); 
}); 

質問：

1. MediaStreamTrack.getSourcesは正確に何をしているのですか？デバイスは複数のビデオソース（例：3つのウェブカメラ）を持つことができますか？

2. getUserMediaクライアントのカメラをオンにするだけですか？上のコードでは、クライアントが自分のビデオを見ているだけではありませんか？

クライアントAのURLをクライアントBに渡して、クライアントBがクライアントAからのビデオをストリームする方法を知りたいのですが、どうすればいいですか？私はこのようなものを想像しています：

1. クライアントAが入り、「abc123」という部屋に入ります。別のクライアントが参加するのを待つ
2. クライアントBが入り、部屋 "abc123"にも参加します。
3. クライアントAは、クライアントBが部屋に入ったことを通知され、クライアントBとの接続を確立します。
4. クライアントAとクライアントBがウェブカメラからストリーミングを開始します。クライアントAは、クライアントBを見ることができ、およびクライアントBは、クライアントA見ることができます

私はのWebRTCライブラリ（あなただけの部屋マッチングのためのバックエンドサーバが作成されると仮定することができます）

Answer 1

あなたが探しているプロセスは、JSEP（JavaScriptセッション確立プロトコル）と呼ばれ、以下で説明する3つのステップで分けられます。これらの手順は、私は、クライアントとサーバーと他のクライアント間の通信のための架空のWebSocket APIとしてwsを使用しますが、両方のクライアントが部屋にいるとWebSocketを経由comunicateすることができ、一度起動します。

1.

を招待しますこのステップの間、1つのdesinged呼び出し側が作成し、提供し、他のクライアント（呼び出し先）へサーバを介してそれを送信します。

// This is only in Chrome 
var pc = new webkitRTCPeerConnection({iceServers:[{url:"stun:stun.l.google.com:19302"}]}, {optional: [{RtpDataChannels: true}]}); 

// Someone must be chosen to be the caller 
// (it can be either latest person who joins the room or the people in it) 
ws.on('joined', function() { 
    var offer = pc.createOffer(function (offer) { 
    pc.setLocalDescription(offer); 
    ws.send('offer', offer); 
    }); 
}); 

// The callee receives offer and returns an answer 
ws.on('offer', function (offer) { 
    pc.setRemoteDescription(new RTCSessionDescription(offer)); 
    pc.createAnswer(function(answer) { 
    pc.setLocalDescription(answer); 
    ws.send('answer', answer); 
    }, err => console.log('error'), {}); 
}); 

// The caller receives the answer 
ws.on('answer', function (answer) { 
    pc.setRemoteDescription(new RTCSessionDescription(answer)); 
}); 

今両側が交換されているされているSDPパケットとは、相互に接続する準備が整いました。

2.ネゴシエーション（ICE）

ICE候補はお互いに接続する方法を見つけるために、それぞれの側で作成された、彼らは彼らが見つけることができるかなりのIPアドレスです：ローカルホスト、ローカルエリアネットワークアドレス（192.168.xx）および外部のパブリックIPアドレス（ISP）。それらはPCオブジェクトによって自動的に生成されます。あなたは、接続の両側でファイアウォールを介したクライアントを接続しようとしない限り、

// Both processing them on each end: 
ws.on('ICE', candidate => pc.addIceCandidate(new RTCIceCandidate(data))); 
// Both sending them: 
pc.onicecandidate = candidate => ws.send('ICE', candidate); 

ICEの交渉の後、conexionはestabishedます、P2P通信はNATトラバーサルですが、いくつかのシナリオでは動作しません。

3.

// Once the connection is established we can start to transfer video, 
// audio or data 

navigator.getUserMedia(function (stream) { 
    pc.addStream(stream); 
}, err => console.log('Error getting User Media')); 

ストリーミングデータはコールを受けた後、発信者と権利のためのプランを作成する前に、電話をかけると、それ以前の段階でそれを追加する前に流れを持っていることは良いオプションです被告人のために、再交渉に対処する必要はありません。これは数年前には苦痛でしたが、WebRTCではより良い実装が可能です。

多くの参加者の部屋でp2p接続を作成するGitHubのWebRTCプロジェクトを確認してみてください。それはGitHubにあり、live demoです。

Answer 2

MediaStreamTrack.getSourcesを使用してそれを行うだろうかビデオデバイスを接続するために使用されます。今は廃止されているようです。このstack-overflow質問とdocumentationを参照してください。 MediaStreamTrack.getSourcesdemo and codeも参照してください。

はい。 getUserMediaはカメラの電源を入れているところです。あなたはデモとコードhereを見ることができます。

このピア接続のサンプル&コードhereを参照して、ユーザー間でオーディオとビデオをストリーミングしてください。

WebRTCとのリアルタイム通信については、thisもご覧ください。