Real World WebRTC

Given at dot.js in Paris, 2015

Transcript

1. Real World WebRTC
2. WebRTC
3. WebRTC is rad
4. WebRTC is cheap
5. WebRTC is cutting-edge
6. WebRTC is difficult
7. WebRTC is difficult Adapters? Plugins? Polyfills? Native? Prefixes? Extensions?
8. High Level
9. Camera Access
10. navigator.getUserMedia
11. var opt = {video: true}; navigator.getUserMedia(opt, onSuccess, onError);
12. var opt = {video: true, audio: true}; navigator.getUserMedia(opt, onSuccess, onError);
13. getUserMedia(opt, onSuccess, onError);
14. element.srcObject = stream;
15. codepen.io/contra/full/eyjgf (PLEASE MUTE)
16. P2P
17. PeerConnection
18. PeerConnection - Offer var pc = new PeerConnection(); pc.addStream(stream); pc.createOffer(function(offer) { var sdp = new SessionDescription(offer); pc.setLocalDescription(sdp, function() { // TODO: send to other user }); });
19. PeerConnection - Answer var pc = new PeerConnection(); pc.addStream(stream); var offer = new SessionDescription(msg); pc.setRemoteDescription(offer, function() { pc.createAnswer(function(answer) { var sdp = new SessionDescription(answer); pc.setLocalDescription(sdp, function() { // TODO: send to other user }); }); });
20. DataChannel
21. DataChannel var dataChannel = pc.createDataChannel('cool-stuff'); dataChannel.onopen = function() { dataChannel.send('yo sup'); };
22. DataChannel TCP UDP SCTP Reliability reliable unreliable configurable Delivery ordered unordered configurable Transmission byte-oriented message-oriented message-oriented Flow Control yes no yes
23. Making a Real Product
24. Initial Prototype
25. "Oops" Realization
26. Do we need to?
27. Do we need to? YES
28. Android
29. Android <3 Crosswalk
30. iOS
31. iOS <3 iosrtc
32. iOS <3 iosrtc
33. IE/Safari
34. IE/Safari <3 Temasys
35. RTC Everywhere
36. http://rtc.works
37. http://rtc.works Chrom e Firefox Safari IE Android Edge iOS Node.js