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

Transcript

1. BUILDING SPEAKEASY WEBRTC IN THE REAL-WORLD
3. WHAT WENT RIGHT?
4. simple-peer
15. MODERATION
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
34. I COULD GO ON...
35. WHAT HAPPENED THAT I DIDN'T EXPECT?
36. HTTPS://VIRUS.CAFE
38. AUDIO CHAT WITHOUT AN ACCOUNT
40. SOME USERS BLOCK THE CAMERA
41. WHAT DID I LEARN?
42. CRITICAL MASS
43. SHARED CONTEXT
45. WEBRTC APPS ARE FUN THE END
46. SPEAKEASY.CO/JSDOTLA