Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building Speakeasy – WebRTC in the Real-World

Building Speakeasy – WebRTC in the Real-World

The story of how I built a WebRTC app to help people connect for 1-on-1 video chats during the pandemic. A tale of product learnings, technical decisions, and lots of conversations!

Presented at JS.LA (https://js.la/)

Links:
- https://speakeasy.co
- https://github.com/feross/simple-peer
- https://feross.org

B498d33041627b07726dc29c28f02df7?s=128

Feross Aboukhadijeh

September 24, 2020
Tweet

Transcript

  1. BUILDING SPEAKEASY WEBRTC IN THE REAL-WORLD

  2. None
  3. WHAT WENT RIGHT?

  4. simple-peer

  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. MODERATION

  16. None
  17. WHAT WENT WRONG?

  18. IOS BUGS

  19. IOS BUG #1 > 10% of the time, audio is

    muted for one end of the WebRTC call1 > Fixed in iOS 13.6 1 https://bugs.webkit.org/show_bug.cgi?id=212669
  20. IOS BUG #1 - HMM... THIS IS STRANGE > Open

    inspector > Select video element > Open console $0.pause() $0.play() > Suddenly it works!
  21. IOS BUG #1 - THE HACKY FIX const handlePlay =

    () => { videoEl.pause() } const handlePause = () => { videoEl.play().catch(() => {}) } videoEl.addEventListener('play', handlePlay, { once: true }) videoEl.addEventListener('pause', handlePause, { once: true })
  22. IOS BUG #2 > Second invocation of getUserMedia() breaks video

    stream from first invocation2 > Seems intentional, still an issue in iOS 14 2 https://bugs.webkit.org/show_bug.cgi?id=179363
  23. IOS BUG #2 - APPLY CONSTRAINTS const smallStream = stream.clone()

    const videoTracks = smallStream.getVideoTracks() for (let i = 0, len = videoTracks.length; i < len; i += 1) { const track = videoTracks[i] await track.applyConstraints({ width: 640, height: 360 }) }
  24. IOS BUG #2 - HACKY FIX if (isIos) { return

    stream } // ...rest of implementation below
  25. IOS BUG #3 > Camera/microphone do not work when app

    is added to homescreen3 > Fixed in iOS 13.5.1 3 https://bugs.webkit.org/show_bug.cgi?id=185448
  26. IOS BUG #4 > Switching to another app and back

    to Safari breaks local stream > Seems fixed in iOS 13.5
  27. IOS BUG #4 - THE HACKY FIX const handleVisibilityChange =

    () => { if (!document.hidden) { videoEl.pause() videoEl.play().catch(() => {}) } } document.addEventListener('visibilitychange', handleVisibilityChange)
  28. IOS BUG #5 > Connecting or disconnecting AirPods permanently breaks

    remote stream5 > Seems fixed in iOS 14, but issue remains open 5 https://bugs.webkit.org/show_bug.cgi?id=209594
  29. IOS BUG #5 - THE HACKY FIX const handlePause =

    () => { videoElem.play().catch(() => {}) } videoElem.addEventListener('pause', handlePause)
  30. IOS BUG #6 > Cannot select 1080p video stream. The

    highest that does not error is 720p6 > Native apps don't have this problem 6 https://bugs.webkit.org/show_bug.cgi?id=179994
  31. IOS BUG #6 - THE HACKY FIX const VIDEO_CONSTRAINTS =

    { video: isIos ? { width: 1280, height: 720 } : { width: 1920, height: 1080 }, audio: true }
  32. IOS BUG #7 > WKWebView doesn't support WebRTC API7 >

    Third-party browsers must use WKWebView > So WebRTC apps do not work in third-party browsers like Chrome, Firefox, Brave 7 https://bugs.webkit.org/show_bug.cgi?id=188360
  33. None
  34. I COULD GO ON...

  35. WHAT HAPPENED THAT I DIDN'T EXPECT?

  36. HTTPS://VIRUS.CAFE

  37. None
  38. AUDIO CHAT WITHOUT AN ACCOUNT

  39. None
  40. SOME USERS BLOCK THE CAMERA

  41. WHAT DID I LEARN?

  42. CRITICAL MASS

  43. SHARED CONTEXT

  44. None
  45. WEBRTC APPS ARE FUN THE END

  46. SPEAKEASY.CO/JSDOTLA