WEB RTC





peer 2 peer
& media

Real time communications


consist of 3 API's:


Get media data

Send media data

Send arbitrary data

get user Media


Web cam
Mic

Screen cap
Sensors data
Peripheral devices 

get user media

// request media stream from browsernavigator.getUserMedia(constraints, successCallback, errorCallback);

// Specify which streams exactly do we wantvar constraints = {audio: false, video: true};

// And what to do when we get themfunction successCallback(stream) 
{
  var video = document.querySelector("video");
  // Special URL Object
  video.src = window.URL.createObjectURL(stream);
  video.play();
}

Sending Media data


handled by browser

Codecs & compression
Packet loss handling
Echo cancellation
Noise reduction
Image cleaning 
Jitter buffering
Gain control

But need to know receivers capabilities

Signaling

Not part of web-rtc

Need to find and connect 2 peers:


Exchange Addresses
Capabilities
Session control


If we were on the same machine

let pc1 = RTCPeerConnection(config);
let pc2 = RTCPeerConnection(config);


pc1_navigator.getUserMedia(constraints, function (pc1Stream){

   pc1.addStream(pc1Stream);
   pc1.createOffer(function /*offerReady*/ (offerDescription){

      pc1.setLocalDescription(offerDescription);
      pc2.setRemoteDescription(offerDescription);
      pc2.createAnswer(function /*answerReady*/ (pc2Description){
		pc1.setRemoteDescription(pc2Description);
      });
   });
});

pc2.onaddstream = function /*gotRemoteStream*/(e){
  vid2.src = URL.createObjectURL(e.stream);
}

Session establishment


let signalingChannel = createSignalingChannel();
let myPc = new RTCPeerConnection(configuration);

myPc.onaddstream = function /*incomingStreamCallback*/(e) {
	videoElem.src = URL.createObjectURL(e.stream);    }

// need to know my own capabilities [ from navigator.getUserMedia()myPc.addStream(localStream);

// When I know my own capabilities
myPc.createOffer(offerReadyCallback);

function offerReadyCallback(offer) {
	myPc.setLocalDescription(offer);
	signalingChannel.sendOfferToBob(offer, gotAnswerFromBobCB);
}


function gotAnswerFromBobCB(bobsDescription) {
	myPc.setRemoteDescription(bobsDescription);
}

Ideally

CORPORATELY


What is my ip . com port


fallback: Turn


arbitrary app data

// RTCPeerConnection setup and offer-answer exchange omitted

var dataChannel1 = pc1.createDataChannel("channelName");  
var dataChannel2 = pc2.createDataChannel("channelName");  


dataChannel.onmessage = function(e) {
  console.log(e.data);
};

dataChannel2.send("Hello world");

Topology ?



Topology ?


Topology ?


More information


Excellent tutorial (15 min to read)



Great video from Google I/O conf 2013

WEB RTC

By intval