Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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

Feross Aboukhadijeh

September 24, 2020
Tweet

More Decks by Feross Aboukhadijeh

Other Decks in Technology

Transcript

  1. 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
  2. IOS BUG #1 - HMM... THIS IS STRANGE > Open

    inspector > Select video element > Open console $0.pause() $0.play() > Suddenly it works!
  3. 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 })
  4. 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
  5. 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 }) }
  6. IOS BUG #2 - HACKY FIX if (isIos) { return

    stream } // ...rest of implementation below
  7. 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
  8. IOS BUG #4 > Switching to another app and back

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

    () => { if (!document.hidden) { videoEl.pause() videoEl.play().catch(() => {}) } } document.addEventListener('visibilitychange', handleVisibilityChange)
  10. 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
  11. IOS BUG #5 - THE HACKY FIX const handlePause =

    () => { videoElem.play().catch(() => {}) } videoElem.addEventListener('pause', handlePause)
  12. 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
  13. IOS BUG #6 - THE HACKY FIX const VIDEO_CONSTRAINTS =

    { video: isIos ? { width: 1280, height: 720 } : { width: 1920, height: 1080 }, audio: true }
  14. 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