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

EdgeConf 2013 - Realtime/WebRTC Intro Talk

Henrik Joreteg
September 23, 2013

EdgeConf 2013 - Realtime/WebRTC Intro Talk

Video of talk and panel discussion here: http://www.youtube.com/watch?v=Al3SEbeK61s

Henrik Joreteg

September 23, 2013
Tweet

More Decks by Henrik Joreteg

Other Decks in Technology

Transcript

  1. @HenrikJoreteg
    EdgeConf Realtime

    View full-size slide

  2. PICTURE OF KIDS
    Talky.io

    View full-size slide

  3. low-latency
    peer-to-peer
    networking
    in the browser

    View full-size slide

  4. uses data channels
    to send files to other
    current visitors

    View full-size slide

  5. de-centralized
    +
    encrypted
    =
    big win for web

    View full-size slide

  6. So how’s WebRTC
    coming along?

    View full-size slide

  7. att.js
    (required modded chromium)

    View full-size slide

  8. Sweet, so we’re good?!

    View full-size slide

  9. WebRTC is pretty
    still pretty finicky

    View full-size slide

  10. Setting up a video call
    between two users...

    View full-size slide

  11. - prefixed methods
    - very different error types
    - strings on FF
    - error object chrome
    - neither follows spec
    - constraints (audio/video + resolution) but not in FF
    - screensharing in chrome (flag)
    - hard to detect failure type
    - requires https or fails silently
    navigator.getUserMedia

    View full-size slide

  12. getUserMedia module

    View full-size slide

  13. - convert stream to blob URL set as src
    - chrome set “autoplay” to true
    - FF you attach and then call `.play()`
    - You really want to be able to mirror
    and mute in one swoop.
    Attaching a media stream

    View full-size slide

  14. attachMediaStream module

    View full-size slide

  15. - total greenfield, not spec’ed
    - help users discover/pass data messages
    - capabilities detection
    - screensharing from chrome to FF
    fails silently (to be fair, it’s flagged)
    Signaling Server

    View full-size slide

  16. signalmaster server

    View full-size slide

  17. - prefixed
    - createDataChannel
    (very finicky set of options)
    - SDP hack to remove default
    upload limitation in chrome.
    - RTCPeerConnection v. mozRTCConnection
    Peer Connections

    View full-size slide

  18. RTCPeerConnection module

    View full-size slide

  19. - data channels not interoperable
    - single video stream per connection
    - screensharing requires other peer connection
    - stream re-broadcasting doesn’t work (well)
    - Different levels of support for TURN
    Other Challenges:

    View full-size slide

  20. THERE ARE
    OTHER
    BROWSERS!

    View full-size slide

  21. First time (that i know of) where
    direct-interoperability is needed
    between browsers

    View full-size slide

  22. SimpleWebRTC
    var webrtc = new SimpleWebRTC({
    localVideoEl: 'localVideo',
    remoteVideosEl: 'remotesVideos',
    autoRequestMedia: true
    });
    webrtc.on('readyToCall', function () {
    webrtc.joinRoom('room name');
    });

    View full-size slide

  23. PeerJS
    OpenTok
    RTCMultiConnection
    (https://www.webrtc-experiment.com)

    View full-size slide

  24. Tinkerability

    View full-size slide

  25. jQuery -> DOM
    socket.io -> WebSockets
    simpleWebRTC -> WebRTC

    View full-size slide

  26. WebRTC needs more
    Open Web hackers

    View full-size slide

  27. feedback
    file bugs
    improve APIs
    push for interoperability

    View full-size slide

  28. IsWebRTCReadyYet.com

    View full-size slide

  29. Real User Feedback Data From Talky

    View full-size slide

  30. Let’s make the
    Open Web
    even awesomer
    with WebRTC <3

    View full-size slide

  31. THANKS!
    @HenrikJoreteg, @andyet on twitter

    View full-size slide