Presentation by Arin Sime, David Alfaro, and Mariana Lopez at the HTML5DevConf May 2014 in San Francisco. Overview of WebRTC and then what we learned in our first 6 months of using it to build a webinar tool.

1. 6 Months with WebRTC

19. Learnings: Browsers are a PITA
navigator.getUserMedia = (navigator.getUserMedia ||
navigator.webkitGetUserMedia ||navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
if(navigator.getUserMedia != null){
navigator.getUserMedia(options, function(stream) {
if(typeof callback === 'function'){
callback(stream);
}
}, function(e) {
console.log('No access to getUserMedia!', e);
if(e.name === "PermissionDeniedError" &&
window.location.protocol !== "https:"){
alert("Must be behind a SSL...");
}
if(typeof errorCallback === 'function'){
errorCallback(e);
}
});
}

20. Learnings: API’s are a big help
function publishStream(uuid) {
pubnub.publish({
user: uuid,
stream: myStream
});
pubnub.subscribe({
user: uuid,
stream: function (data, event) {
document.querySelector(‘#call-video’).src =
URL.createObjectUrl(event.stream);
},
disconnect: function (uuid, pc) {
document.querySelector(“#call-video”).src = “”;
$(document).trigger(“call:end”);
}
});
};
From: http://www.pubnub.com/developers/webrtc/

21. Learnings: Echoes not so helpful
agility_webrtc.showStream({ who : "presenter" , container : '#video'});
//If I'm the presenter, mute the video to prevent echos
$(”#video").prop('muted', true);

22. Learnings: UX considerations
Code sample to go here

23. Learnings: Dropped connections

24. Learnings: Manual Handshaking
Code sample to go here

25. Learnings: Corporate Firewalls
Code sample to go here
Image from http://www.html5rocks.com/en/tutorials/webrtc/basics/