6 months with webrtc
DESCRIPTION
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.TRANSCRIPT
![Page 1: 6 Months with WebRTC](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b494464a795915788b4586/html5/thumbnails/1.jpg)
6 Months with WebRTC
![Page 2: 6 Months with WebRTC](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b494464a795915788b4586/html5/thumbnails/2.jpg)
![Page 3: 6 Months with WebRTC](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b494464a795915788b4586/html5/thumbnails/3.jpg)
![Page 4: 6 Months with WebRTC](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b494464a795915788b4586/html5/thumbnails/4.jpg)
![Page 5: 6 Months with WebRTC](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b494464a795915788b4586/html5/thumbnails/5.jpg)
![Page 6: 6 Months with WebRTC](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b494464a795915788b4586/html5/thumbnails/6.jpg)
![Page 7: 6 Months with WebRTC](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b494464a795915788b4586/html5/thumbnails/7.jpg)
![Page 8: 6 Months with WebRTC](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b494464a795915788b4586/html5/thumbnails/8.jpg)
![Page 9: 6 Months with WebRTC](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b494464a795915788b4586/html5/thumbnails/9.jpg)
![Page 10: 6 Months with WebRTC](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b494464a795915788b4586/html5/thumbnails/10.jpg)
![Page 11: 6 Months with WebRTC](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b494464a795915788b4586/html5/thumbnails/11.jpg)
![Page 12: 6 Months with WebRTC](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b494464a795915788b4586/html5/thumbnails/12.jpg)
![Page 13: 6 Months with WebRTC](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b494464a795915788b4586/html5/thumbnails/13.jpg)
![Page 14: 6 Months with WebRTC](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b494464a795915788b4586/html5/thumbnails/14.jpg)
![Page 15: 6 Months with WebRTC](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b494464a795915788b4586/html5/thumbnails/15.jpg)
![Page 16: 6 Months with WebRTC](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b494464a795915788b4586/html5/thumbnails/16.jpg)
![Page 17: 6 Months with WebRTC](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b494464a795915788b4586/html5/thumbnails/17.jpg)
![Page 18: 6 Months with WebRTC](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b494464a795915788b4586/html5/thumbnails/18.jpg)
![Page 19: 6 Months with WebRTC](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b494464a795915788b4586/html5/thumbnails/19.jpg)
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); } });
}
![Page 20: 6 Months with WebRTC](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b494464a795915788b4586/html5/thumbnails/20.jpg)
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/
![Page 21: 6 Months with WebRTC](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b494464a795915788b4586/html5/thumbnails/21.jpg)
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);
![Page 22: 6 Months with WebRTC](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b494464a795915788b4586/html5/thumbnails/22.jpg)
Learnings: UX considerations
Code sample to go here
![Page 23: 6 Months with WebRTC](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b494464a795915788b4586/html5/thumbnails/23.jpg)
Learnings: Dropped connections
![Page 24: 6 Months with WebRTC](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b494464a795915788b4586/html5/thumbnails/24.jpg)
Learnings: Manual Handshaking
Code sample to go here
![Page 25: 6 Months with WebRTC](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b494464a795915788b4586/html5/thumbnails/25.jpg)
Learnings: Corporate Firewalls
Code sample to go here
Image from http://www.html5rocks.com/en/tutorials/webrtc/basics/
![Page 26: 6 Months with WebRTC](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b494464a795915788b4586/html5/thumbnails/26.jpg)
![Page 27: 6 Months with WebRTC](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b494464a795915788b4586/html5/thumbnails/27.jpg)