• Represents a stream of audio and/or video
• Can contain multiple 'tracks'
• Obtain a MediaStream with navigator.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);
      

• Controls the contents of the MediaStream
• Media type, resolution, frame rate

        {
          "mandatory": {
            "width": { "min": 480 }
          },
          "optional": [
            { "width": { "min": 720 } },
            { "frameRate": 60 },
            { "facingMode": "user" }
          ]
        }
      

        var constraints = {
          video: {
            mandatory: {
              chromeMediaSource: 'screen'
            }
          }
        };

        navigator.webkitGetUserMedia(constraints, gotStream);
      

• Peer to peer communication
• Codec handling
• Signal processing
• Security
• Bandwidth management
• ...

        pc = new RTCPeerConnection(configuration);
        pc.onaddstream = gotRemoteStream;
        pc.addStream(localStream); // from getUserMedia
        pc.createOffer(gotOffer);

        function gotOffer(desc) {
          pc.setLocalDescription(desc);
          sendOffer(desc);
        }

        function gotAnswer(desc) {
          pc.setRemoteDescription(desc);
        }

        function gotRemoteStream(e) {
          attachMediaStream(remoteVideo, e.stream);
        }
      

• Same API as WebSockets
• Ultra-low latency
• Unreliable or reliable (similar to UDP and TCP)
• Secure

        pc = new RTCPeerConnection(configuration);

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

• User discovery and communication
• Signaling
• NAT/firewall traversal
• Relay servers in case peer-to-peer communication fails

• Need to exchange 2 types of objects:
• Session Description - what codecs and resolutions can be handled by my browser and the browser it wants to communicate with?
• ICE candidates - what's my computer's IP address and port?
• WebRTC does not specify any protocol for that - you can use anything
• WebSockets
• AJAX
• ...

• SDP - Session Description protocol
• offer / answer

        pc.createOffer(gotOffer);

        function gotOffer(desc) {
          pc.setLocalDescription(desc);
          sendOffer(desc);
        }

        function gotAnswer(desc) {
          pc.setRemoteDescription(desc);
        }
      

• Tell me what my public IP address is
• Simple server, cheap to run
• Data flows peer-to-peer

• Cloud fallback if peer-to-peer communication fails
• Ensures that call works in almost all environments
• Data flows through a server, uses server bandwidth

• ICE: a framework for connecting peers
• Tries to find the best path for each call
• Vast majority of calls can use STUN (webrtcstats.com):

        pc = new RTCPeerConnection(configuration);
      

        pc = new RTCPeerConnection(configuration);
        pc.createOffer(gotOffer)
      

        pc = new RTCPeerConnection(configuration);
        pc.createOffer(gotOffer)

        function gotOffer(description) {
          pc.setLocalDescription(description);
          sendOffer(description);
        }
        
      

        function gotOffer(description) {
          pc.setLocalDescription(description);
          sendOffer(description);
        }

        pc.onicecandidate = function (event) {
          sendCandidate(event.candidate);
        }
      

        function gotAnswer(desc) {
          pc.setRemoteDescription(desc);
        }
      

        pc.onicecandidate = function (event) {
          sendCandidate(event.candidate);
        }
      

        function gotIceCandidate (message) {
          pc.addIceCandidate(new RTCIceCandidate({
            sdpMLineIndex: message.label,
            candidate: message.candidate
          }));
        }
      

• Video chat:
• SimpleWebRTC
• easyRTC
• webRTC.io
• Peer-to-peer data:
• PeerJS

        var webrtc = new WebRTC({
          localVideoEl: 'localVideo',
          remoteVideosEl: 'remoteVideos',
          autoRequestMedia: true
        });

        webrtc.on('readyToCall', function () {
          webrtc.joinRoom('My room name');
        });
      

        var peer = new Peer('someid');
        peer.on('connection', function(conn) {
          conn.on('data', function(data){
            // Will print 'hi!'
            console.log(data);
          });
        });

        // Connecting peer
        var peer = new Peer('anotherid');
        var conn = peer.connect('someid');
        conn.on('open', function(){
          conn.send('hi!');
        });
      

• Video: Real-time communication with WebRTC: Google I/O 2013
• HTML5 Rocks!
• Capturing Audio & Video in HTML5
• Getting Started with WebRTC
• WebRTC in the real world: STUN, TURN and signaling
• Updates
• Tutorials and code samples: WebRTC Experiments & Demos
• Book: webrtcbook.com