WebRTC: how can I transfer client video to client B?

Question

I am browsing WebRTC, but I feel that I do not understand the big picture. I am considering this demo project, in particular: https://github.com/oney/RCTWebRTCDemo/blob/master/main.js

I'm having trouble understanding how I can map 2 clients so that client A can see the video stream of client B and vice versa.

This is in the demo:

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); }); } 

and then it is used as follows:

 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'}); }); }); 

Questions:

• What exactly does MediaStreamTrack.getSources do? Is it because devices can have multiple video sources (like 3 webcams)?

• Does getUserMedia client camera? In the above code, is not the client just watching a video about himself?

I would like to know how I can pass some type of URL to client B to client B, so that client B sends the video coming from client A. How do I do this? I imagine something like this:

• Client A enters room "abc123". Waiting for another client to join.
• Client B enters, also joins room "abc123".
• Client A signals that client B has entered the room, so he establishes a connection with client B
• Client A and Client B start streaming from their webcam. Client A can see client B, and client B can see client A.

How can I do this using the WebRTC library (you can simply assume that a database server is being created to match numbers)

Answer 1

The process you are looking for is called JSEP (JavaScript Session Establishment Protocol), and it can be divided into the three steps described below. These steps begin after both clients are in the room and can communicate via WebSockets, I will use ws as an imaginary WebSocket API for communication between the client and the server and other clients:

1. Invite

At this point, one called party creates and offers and passes it through the server to another client (called):

 // 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)); }); 

Now both sides have exchanged SDP packets and are ready to connect to each other.

2. Negotiations (ICE)

ICE candidates are created on each side to find a way to connect to each other, they have quite a few IP addresses where they can be found: localhost, local network address (192.168.xx) and external public IP address (ISP). They are automatically generated by the PC object.

 // 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); 

After ICE negotiation, conexion becomes established if you are not trying to connect clients through firewalls on both sides of the connection, p2p communications are NAT bypass, but will not work in some scenarios.

3. Streaming data

 // 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')); 

It’s a good opportunity to have a stream before calling and adding it at an earlier stage, before creating an offer for the calling subscriber and immediately after receiving the call for the called subscriber, so you don’t have to deal with revisions. It was a pain a few years ago, but now it can be better implemented in WebRTC.

Remember to check out my WebRTC project on GitHub, where I create p2p connections in rooms for many participants, it is on GitHub and has a live demo .

Answer 2

MediaStreamTrack.getSources used to connect video devices. Now it’s out of date. See this stack-overflow question and documentation . Also see the MediaStreamTrack.getSources demo and code .

Yes. getUserMedia just turns on the camera. Here you can see the demo and code here .

Please refer to this sample connection and code here to transfer audio and video between users.

Also watch this in real time using WebRTC.