- 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

3:25 - 3:40pm
Slide template from HTML5WOW
Web (R)Evolution
- Publishing Content
- Web Applications
- Telecommunications
Step 1: Access the camera
<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
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
<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); }

Code on Google Code
Picture created with Gliffy
Step 4: Connect multiple Peers directly

Using socket.io
:
node server.js
Load Web page:
Code by &yet on GitHub:

var constraint = { audio: true, video: { mandatory: { minHeight: 50, maxHeight: 180, maxFrameRate: 5, }, optional: [] } }; getUserMedia(constraint, onUserMediaSuccess, onUserMediaError);
chrome://webrtc-internals
Thanks!
Slides: http://www.html5videoguide.net/presentations/WebDirCode2013/
More: Sydney WebRTC Meetup