- 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);
}
apprtc.htmlCode on Google Code
Picture created with Gliffy
Step 4: Connect multiple Peers directly
Created with Gliffy
Using socket.io:
node server.jsLoad 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