Welcome! (This field is for presenter notes and commentary.)
Press:
  • Space or ← / → to move around
  • Ctrl/Command / – or + to zoom in and out if slides don’t fit
  • N to show/hide speaker notes
  • H to highlight important elements in code snippets

HTML5 MULTI-PARTY VIDEO CONFERENCING

Silvia Pfeiffer
Web Directions Code - May 02, 2013
3:25 - 3:40pm

Slide template from HTML5WOW

Web (R)Evolution

  • Publishing Content
  • Web Applications
  • Telecommunications

Step 1: Access the camera

getUserMedia
<video id="local1" muted autoplay"></video>
<script>
  var local1 = document.getElementById("local1");
  function startVideo1() {
    navigator.getUserMedia({video:true}, successCallback1);
    function successCallback1(stream) {
      local1.src = window.URL.createObjectURL(stream); 
    }
  }
</script>

Step 2: Set up Signalling

Signalling Server

Using socket.io:

node reflector.js
var server = require('http').createServer();
var io = require('socket.io').listen(server.listen(1337));

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

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

});

Step 3: Connect the Peers directly

PeerConnection
<video id="remotevid" autoplay></video>
var remotevid = document.getElementById('remotevid');

peerConn = new RTCPeerConnection({"iceServers":[]});
peerConn.onicecandidate = onIceCandidate;
peerConn.onaddstream = onRemoteStreamAdded;
peerConn.addstream(localStream);
peerConn.createOffer(setLocalAndSendMessage);

function onRemoteStreamAdded(event) {
  remoteVideo.src = window.URL.createObjectURL(event.stream);
}

function setLocalAndSendMessage(sessionDescription) {
  peerConn.setLocalDescription(sessionDescription);
  socket.json.send(sessionDescription);
}
Peer-to-peer demo
apprtc.html


Code on Google Code

Picture created with Gliffy

Step 4: Connect multiple Peers directly

Multi-Peer: Full Mesh
Created with Gliffy
Multi-peer demo

Using socket.io:

node server.js

Load Web page:




Code by &yet on GitHub:

  • Server Code
  • Client Code
Restricting Bandwidth Use
var constraint = { audio: true,
                   video: {
                     mandatory: {
                       minHeight: 50,
                       maxHeight: 180,
                       maxFrameRate: 5,
                     },
                     optional: []
                   }
                 };
getUserMedia(constraint, onUserMediaSuccess, onUserMediaError);
Check Statistics

chrome://webrtc-internals

Thanks!

@silviapfeiffer

silviapfeiffer1@gmail.com

Slides: http://www.html5videoguide.net/presentations/WebDirCode2013/

More: Sydney WebRTC Meetup