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

Feross Aboukhadijeh

September 24, 2020
Tweet

More Decks by Feross Aboukhadijeh

Other Decks in Technology

Transcript

  1. BUILDING SPEAKEASY
    WEBRTC IN THE REAL-WORLD

    View full-size slide

  2. WHAT WENT RIGHT?

    View full-size slide

  3. WHAT WENT WRONG?

    View full-size slide

  4. 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

    View full-size slide

  5. IOS BUG #1 - HMM... THIS IS STRANGE
    > Open inspector
    > Select video element
    > Open console
    $0.pause()
    $0.play()
    > Suddenly it works!

    View full-size slide

  6. 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 })

    View full-size slide

  7. 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

    View full-size slide

  8. 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
    })
    }

    View full-size slide

  9. IOS BUG #2 - HACKY FIX
    if (isIos) {
    return stream
    }
    // ...rest of implementation below

    View full-size slide

  10. 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

    View full-size slide

  11. IOS BUG #4
    > Switching to another app and back to Safari breaks
    local stream
    > Seems fixed in iOS 13.5

    View full-size slide

  12. IOS BUG #4 - THE HACKY FIX
    const handleVisibilityChange = () => {
    if (!document.hidden) {
    videoEl.pause()
    videoEl.play().catch(() => {})
    }
    }
    document.addEventListener('visibilitychange', handleVisibilityChange)

    View full-size slide

  13. 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

    View full-size slide

  14. IOS BUG #5 - THE HACKY FIX
    const handlePause = () => {
    videoElem.play().catch(() => {})
    }
    videoElem.addEventListener('pause', handlePause)

    View full-size slide

  15. 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

    View full-size slide

  16. IOS BUG #6 - THE HACKY FIX
    const VIDEO_CONSTRAINTS = {
    video: isIos
    ? {
    width: 1280,
    height: 720
    }
    : {
    width: 1920,
    height: 1080
    },
    audio: true
    }

    View full-size slide

  17. 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

    View full-size slide

  18. I COULD GO ON...

    View full-size slide

  19. WHAT HAPPENED THAT I DIDN'T
    EXPECT?

    View full-size slide

  20. HTTPS://VIRUS.CAFE

    View full-size slide

  21. AUDIO CHAT WITHOUT AN ACCOUNT

    View full-size slide

  22. SOME USERS BLOCK THE CAMERA

    View full-size slide

  23. WHAT DID I LEARN?

    View full-size slide

  24. CRITICAL MASS

    View full-size slide

  25. SHARED CONTEXT

    View full-size slide

  26. WEBRTC APPS ARE FUN
    THE END

    View full-size slide

  27. SPEAKEASY.CO/JSDOTLA

    View full-size slide