• Wideband codecs (voice and video)
• Echo cancellation
• Automatic Gain Control
• Noise reduction/suppression
• Dynamic jitter buffers
• Error concealment
• Network Traversal
• P2P protocols
• Session setup

1. set up video on a Web page
   • <video> element
2. access local devices: camera, microphone
   • MediaStream API
3. display a/v from local or remote peer
   • createObjectURL
4. connect to remote peers
   • Session setup
   • PeerConnection API

Plugin-free video conferencing in the browser!

1. Start up Google Chrome
2. Go to http://apprtc.appspot.com.
3. Share the resulting URL with a friend
4. Source code from Google code

<video id="localvid" autoplay></video>
<video id="remotevid" autoplay></video>
    

<video id="sourcevid" autoplay></video>
<script>
  var video = document.getElementById('sourcevid');
  navigator.getUserMedia({audio: true, video: true}, success, error);
  function success(stream) {
      video.src = window.URL.createObjectURL(stream);
  }
</script>

• 
  • v21+ native support
  • webkitGetUserMedia
• 
  • v12+ native support
  • no prefix
• 
  • v18 nightly
  • need to activate "media.navigator.enabled" in about:config
  • mozGetUserMedia, set video.mozSrcObject
• 
  • prototype ActiveX/ browser plugin, 17th Jan
  • msGetUserMedia/getUserMedia

Chrome permissions:

Opera privacyUI:

Firefox permissions:

1. Establish a local stream (DONE)
2. Establish a connection: we need a protocol
3. Add the remote stream to the local display: PeerConnection

Server: reflector.js

var server = require('http').createServer();
var app = server.listen(1337);
var io = require('socket.io').listen(app);

io.sockets.on('connection', function(socket) {

    socket.on('message', function(message) {
        socket.broadcast.emit('message', message);
    });
});

<script src="http://192.168.1.3:1337/socket.io/socket.io.js"></script>
<script>
var socket = io.connect('http://192.168.1.3:1337/');
var channelReady = false;

socket.on('connect', onChannelOpened);

function onChannelOpened(evt) {
  channelReady = true;
}

ICE = Interactive Connection Establishment

STUN = Session Traversal Utilities for NAT (give me my public IP address)

function createPeerConnection() {
  var pc_config = {"iceServers":[]};

  peerConn = new RTCPeerConnection(pc_config);

  peerConn.onicecandidate = function (evt) {
    socket.json.send({type: "candidate", evt.candidate});
  };

  peerConn.onaddstream = function (evt) {
    remotevid.src = window.URL.createObjectURL(evt.stream);
  };

  peerConn.addStream(localStream);
}

var mediaConstraints = {'mandatory': {
                        'OfferToReceiveAudio':true, 
                        'OfferToReceiveVideo':true }};

function setLocalAndSendMessage(sessionDescription) {
  peerConn.setLocalDescription(sessionDescription);
  socket.json.send(sessionDescription);
}

peerConn.createOffer(setLocalAndSendMessage,
                     errorCallback,
                     mediaConstraints);

socket.on('message', onMessage);

function onMessage(evt) {
  if (evt.type === 'offer') {
    if (!started) {
      createPeerConnection();
      started = true;
    }
    peerConn.setRemoteDescription(new RTCSessionDescription(evt));
    peerConn.createAnswer(setLocalAndSendMessage,
                          errorCallback,
                          mediaConstraints);

  } else if (evt.type === 'answer' && started) {
    peerConn.setRemoteDescription(new RTCSessionDescription(evt));

  } else if (evt.type === 'candidate' && started) {
    var candidate = new RTCIceCandidate(evt.candidate);
    peerConn.addIceCandidate(candidate);
  }
}

<video id="sourcevid" autoplay
  src="blob:http%3A//localhost/58436a28-df4a-4dd7-8678-3224e021585f">
</video>
<button type="button" onclick="startVideo();">Start video</button>
<button type="button" onclick="stopVideo();">Stop video</button>

<video id="remotevid" autoplay
  src="blob:http%3A//localhost/ee3fd875-ce9f-410c-9856-61e6fa18862d">
</video>
<button type="button" onclick="connect();">Connect</button>
<button type="button" onclick="hangUp();">Hang Up</button>