Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WebRTC Hacks: Lessons Learned

1,712 views

Published on

Presented at Twilio's 2016 Signal Conference: Developers of all varieties are building awesome apps leveraging WebRTC, but it doesn't always start that way. This session will highlight some of the more interesting hacks and use cases using WebRTC from the blog and real commercial deployments. Hear trends among WebRTC developers that are just starting to mature deployments with hundreds of millions of monthly minutes. This session will review other's mistakes and successes with practical guidelines to help you add and grow WebRTC in your app.

Published in: Internet
  • Be the first to comment

  • Be the first to like this

WebRTC Hacks: Lessons Learned

  1. 1. WebRTC Hacks: Lessons Learned Twilio Signal 2016 What would Macguyver do.. with WebRTC?
  2. 2. 2May 26, 2016 Hi! CHAD HART Independent Consultant, Chief Editor, webrtcHacks https://webrtcHacks.com @webrtcHacks @chadwallacehart chad@chadwallacehart.com
  3. 3. May 26, 2016 3
  4. 4. May 26, 2016 4
  5. 5. May 26, 2016 5
  6. 6. 6May 26, 2016 Hack #1: Motion Detecting Baby Monitor https://webrtchacks.com/baby-motion-detector/
  7. 7. 7May 26, 2016 Detecting motion https://github.com/ReallyGood/js-motion-detection
  8. 8. 8May 26, 2016 Hack #1: Motion Detecting Baby Monitor https://webrtchacks.com/baby-motion-detector/
  9. 9. 9May 26, 2016 Lessons Learned • SDKs & cloud services make WebRTC super simple • Use HTML5 Canvas on your media stream • You don’t need to know what you’re doing 9
  10. 10. 10May 26, 2016 Hack #2: Build your own phone company with WebRTC and a weekend https://webrtchacks.com/own-phoneco-with-webrtc/
  11. 11. 11May 26, 2016 Build your own WebRTC Server Back-end Stack Server Logic
  12. 12. 12May 26, 2016 Lessons Learned: Building out a Back-end • Signaling: easier than expected • Cloud setup wasn’t so bad • Don’t skip SSL for HTTPS • Don’t skip TURN server • Don’t get detached from UX 12
  13. 13. 13May 26, 2016 Hack #3: How to train a dog with JavaScript https://webrtchacks.com/javascript-dog-trainer/
  14. 14. 14May 26, 2016 This is Levy
  15. 15. 15May 26, 2016 Levy liked our old couch
  16. 16. 16May 26, 2016 We got a new couch. Levy wasn’t welcome here.
  17. 17. 17May 26, 2016 Levy didn’t care
  18. 18. 18May 26, 2016 Fun with my kids toys (& IoT)
  19. 19. 19May 26, 2016 Quick proof-of-concept Could I mix WebRTC & IoT to train my dog?
  20. 20. 20May 26, 2016 Not fun: getting organized • Signaling Server • Web server • IoT device • Browser-based monitor app • Browser-based viewing app • MMS API
  21. 21. 21May 26, 2016 Fun: seeing it work https://webrtchacks.com/javascript-dog-trainer/ MMS Alert
  22. 22. 22May 26, 2016 Fun: seeing it work https://webrtchacks.com/javascript-dog-trainer/
  23. 23. 23May 26, 2016 Lessons Learned • New features for free: recording • MMS is easier than writing an app to get mobile notifications • Apple makes things difficult • More “things” means more opportunities for short RTC sessions
  24. 24. 24May 26, 2016 Hack 4: ThirdEye: WebRTC + Computer vision eyes when & where you need them ThirdEye
  25. 25. 25May 26, 2016 Start boring..
  26. 26. 26May 26, 2016 Adding computer vision
  27. 27. 27May 26, 2016
  28. 28. 28May 26, 2016 Solving real problems
  29. 29. 29May 26, 2016
  30. 30. 30May 26, 2016 Other lessons learned • Gathering context from real time streams isn’t so hard • Don’t make the signaling harder than it needs to be • Someone really needs to make a wifi WebRTC camera
  31. 31. 31May 26, 2016 Thinking about machines & RTC P2P M2P P2M M2M Person to person calling because of machines Machine makes a call when something happens Send machine real time audio/video for processing Machines send other machines audio/video for real time processing Whole new categories of interactions that will drive RTC growth
  32. 32. 32May 26, 2016 My Next Hack: Adding WebRTC to Toys?
  33. 33. 33May 26, 2016
  34. 34. WebRTC hacks in the wild
  35. 35. 35May 26, 2016 The browser as a real time media processor Canvas Web Audio http://www.html5rocks.com/en/tutorials/webaudio/games/http://diveinto.html5doctor.com/canvas.html
  36. 36. 36May 26, 2016 Hacks that are new: make your own conferencing server https://webrtchacks.com/web-audio-conference/
  37. 37. 37May 26, 2016 Hacks we don’t like https://webrtchacks.com/dear-ny-times/
  38. 38. 38May 26, 2016 http://randomwalker.info/publications/OpenWPM_1_million_site_tracking_measurement.pdf
  39. 39. 39May 26, 2016 Hacking a hack – the WebRTC notifier https://webrtchacks.com/webrtc-notify/
  40. 40. 40May 26, 2016 Production Hack: skip the P2P https://webrtchacks.com/slack-webrtc-slacking/
  41. 41. 41May 26, 2016 Retrospective: long, but not impossible jump from a hack to reality • Security • TURN service • Elasticity • Redundancy • Versioning • Compliance • Multi-party • Monitoring • Active test • Security • iOS • Android • Internet Explorer • Safari • UX timing • Bandwidth checks • Device checks • Failure recovery Server-side Client-side
  42. 42. https://upload.wikimedia.org/wikipedia/commons/2/26/USAF_EOD_explosion.jpg

×