WebRTC

What is WebRTC?

• browser-to-browser (peer-to-peer)
• open framework for the web that enables Real Time Communications in the browser

P2P

Main Javascript APIs

• MediaStream
• RTCPeerConnection
• RTCDataChannel

MediaStream

The MediaStream interface represents a stream of media content. A stream consists of several tracks such as video or audio tracks.

Put simply, you can now access multimedia streams from local devices.

MediaStream

aka getUserMedia

var constraints = {video: true};
function successCallback(stream) {
  var video = document.querySelector("video");
  video.src = window.URL.createObjectURL(stream);
}
function errorCallback(error) {
  console.log("navigator.getUserMedia error: ", error);
}
navigator.getUserMedia(constraints, successCallback, errorCallback);

JAVASCRIPT

How do we create a connection between peers?

Offer/Answer Signal Channel

A Complicated Diagram

SDP

Text

v=0
o=- 7614219274584779017 2 IN IP4 127.0.0.1
s=-
t=0 0
a=group:BUNDLE audio video
a=msid-semantic: WMS
m=audio 1 RTP/SAVPF 111 103 104 0 8 107 106 105 13 126
c=IN IP4 0.0.0.0
a=rtcp:1 IN IP4 0.0.0.0
a=ice-ufrag:W2TGCZw2NZHuwlnf
a=ice-pwd:xdQEccP40E+P0L5qTyzDgfmW
a=extmap:1 urn:ietf:params:rtp-hdrext:ssrc-audio-level
a=mid:audio
a=rtcp-mux
a=crypto:1 AES_CM_128_HMAC_SHA1_80 inline:9c1AHz27dZ9xPI91YNfSlI67/EMkjHHIHORiClQe
a=rtpmap:111 opus/48000/2
...

RTCPeerConnection

helps facilitate the connection

getUserMedia

RTCPeerConnection

RTCPeerConnection Methods

   RTCPeerConnection.createOffer()
   RTCPeerConnection.setLocalDescription()
   RTCPeerConnection.setRemoteDescription()
   RTCPeerConnection.createAnswer()

RTCPeerConnection

Sample Code

pc = new RTCPeerConnection(null);
pc.onaddstream = gotRemoteStream;
pc.addStream(localStream);
pc.createOffer(gotOffer);
function gotOffer(desc) {
  pc.setLocalDescription(desc);
  sendOffer(desc);
}
function gotAnswer(desc) {
  pc.setRemoteDescription(desc);
}
function gotRemoteStream(e) {
  attachMediaStream(remoteVideo, e.stream);
}

JAVASCRIPT

Connection Established!

(with the help of a server)

RTCDataChannel

RTCDataChannel

Sample Code

var pc = new webkitRTCPeerConnection(servers,
  {optional: [{RtpDataChannels: true}]});
pc.ondatachannel = function(event) {
  receiveChannel = event.channel;
  receiveChannel.onmessage = function(event){
    document.querySelector("div#receive").innerHTML = event.data;
  };
};
sendChannel = pc.createDataChannel("sendDataChannel", {reliable: false});
document.querySelector("button#send").onclick = function (){
  var data = document.querySelector("textarea#send").value;
  sendChannel.send(data);
};

JAVASCRIPT

https://apprtc.appspot.com/r/169456467

chrome://webrtc-internals/

Demo