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

SViOS Meetup: HTTP Live Streaming

jnwng
May 19, 2014

SViOS Meetup: HTTP Live Streaming

coursera deals with users all over the world; we want to share the important pieces on providing that experience on mobile, and some of the obstacles we overcame.

jnwng

May 19, 2014
Tweet

More Decks by jnwng

Other Decks in Technology

Transcript

  1. HTTP Live Streaming
    HTTP Live Streaming
    HTTP Live Streaming
    how we got education into your pocket

    View full-size slide

  2. @yickzilla
    Yixin Zhu

    View full-size slide

  3. @jnwng
    Jon Wong

    View full-size slide

  4. @katfishi
    Katheryn Shi

    View full-size slide

  5. We envision a future where
    everyone has access to a
    world-class education.

    View full-size slide

  6. We envision a future where
    everyone has access to a
    world-class education.

    View full-size slide

  7. How can we increase access?
    !

    View full-size slide

  8. Turns out, mobile apps provide
    lots and lots of access.
    !
    We had to answer
    a few questions though…

    View full-size slide

  9. What platform should we build for
    first?

    View full-size slide

  10. iOS!
    What platform should we build for
    first?

    View full-size slide

  11. What should the primary feature
    of our app be?

    View full-size slide

  12. What should the primary feature
    of our app be?
    Videos!

    View full-size slide

  13. Since all our videos are online we
    should be able to just play them
    no problem, right?

    View full-size slide

  14. Nope!
    Since all our videos are online we
    should be able to just play them
    no problem, right?

    View full-size slide

  15. Turns out,
    the App Store has rules
    for media delivery within apps.

    View full-size slide

  16. 10
    Every video over
    minutes must use
    HTTP Live Streaming
    (when played over cellular networks)

    View full-size slide

  17. 0:00 0:40
    A normal video plays like this.
    foo.mp4

    View full-size slide

  18. 0:10 0:40
    A normal video plays like this.
    foo.mp4

    View full-size slide

  19. 0:20 0:40
    A normal video plays like this.
    foo.mp4

    View full-size slide

  20. 0:30 0:40
    A normal video plays like this.
    foo.mp4

    View full-size slide

  21. With HTTP Live Streaming,
    instead of this…
    40s

    View full-size slide

  22. … you have this.
    10s 10s 10s 10s

    View full-size slide

  23. 0:00 0:40
    360p
    540p
    720p
    foo.ts
    foo.ts
    foo.ts
    HLS playback works like this:

    View full-size slide

  24. 0:00 0:40
    360p
    540p
    720p
    foo.ts
    foo.ts
    foo.ts
    HLS playback works like this:

    View full-size slide

  25. 0:00 0:40
    360p
    540p
    720p
    foo.ts
    foo.ts
    foo.ts
    HLS playback works like this:

    View full-size slide

  26. 0:00 0:40
    360p
    540p
    720p
    foo.ts
    foo.ts
    foo.ts
    HLS playback works like this:

    View full-size slide

  27. index360.m3u8
    index540.m3u8
    index720.m3u8
    1 Bitrate : 1 Playlist

    View full-size slide

  28. index360.m3u8
    index540.m3u8
    index720.m3u8
    master.m3u8
    And one playlist to rule them all.

    View full-size slide

  29. 6things to
    keep in mind
    (when using HLS)

    View full-size slide

  30. 1
    Video segmentation
    is not so simple.

    View full-size slide

  31. Most frames in a compressed
    video are a diff of the first
    frame it started with…

    View full-size slide

  32. =
    i-frame
    diffed frames

    View full-size slide

  33. =
    i-frame
    diffed frames

    View full-size slide

  34. =
    …so if we want to
    segment our video here…

    View full-size slide

  35. =
    …so if we want to
    segment our video here…
    … make it an i-frame.

    View full-size slide

  36. 2Bandwidth cutoffs
    are important

    View full-size slide

  37. HTTP Live Streaming
    uses the cutoffs
    to figure out when
    to switch streams.

    View full-size slide

  38. Put them too close and
    you’ll waste your efforts…
    360p
    540p
    720p

    View full-size slide

  39. Put them too close and
    you’ll waste your efforts…
    360p
    540p
    720p

    View full-size slide

  40. … too far and stream switching
    becomes jarring.
    360p
    540p
    720p

    View full-size slide

  41. … too far and stream switching
    becomes jarring.
    360p
    540p
    720p

    View full-size slide

  42. Our ideal cutoff is about 1.5x - 2.0x
    bandwidth before switching.
    360p
    540p
    720p
    1.5x
    2.0x

    View full-size slide

  43. 3
    FFmpeg is awesome

    View full-size slide

  44. It’s a cross-platform,
    open-source solution
    for encoding videos
    of all different formats…

    View full-size slide

  45. … its used by
    many amazing companies
    at scale (including Coursera)…

    View full-size slide

  46. … ‘nuff said.

    View full-size slide

  47. 4Don’t underestimate
    audio-only

    View full-size slide

  48. Mobile internet access
    was not made equal.

    View full-size slide

  49. Having audio-only means
    we can get education to
    Nigeria, Indonesia, and
    everywhere in between.

    View full-size slide

  50. 5
    Client-side
    made easy

    View full-size slide

  51. So how do we
    integrate our
    videos into our
    iOS app?

    View full-size slide

  52. AVFoundation
    makes the job
    incredibly easy

    View full-size slide

  53. AVFoundation addresses
    time-varying collections of
    data

    View full-size slide

  54. = AVAsset
    + +…

    View full-size slide

  55. AVAsset AVPlayer

    View full-size slide

  56. …and we’re done!

    View full-size slide

  57. Our commitment to access
    means we can’t just cater to
    an English audience

    View full-size slide

  58. Web Video Text Tracks
    (WebVTT) subtitles are easy to
    use with HLS videos

    View full-size slide

  59. զత电脑ࠑ时ਖ਼ࡏզ宠෺鳄⻥鱼తᡙࢠཬɻ

    View full-size slide

  60. 06:02.000 --> 06:10.000
    My laptop is in my pet alligator’s
    stomach.
    զత电脑ࠑ时ਖ਼ࡏզ宠෺鳄⻥鱼తᡙࢠཬɻ

    View full-size slide

  61. AVAsset AVPlayer

    View full-size slide

  62. …and we’re done!
    (…c’est tout!)

    View full-size slide

  63. Accessibility
    Engineering
    Effort

    View full-size slide

  64. 6Choose your
    tools wisely

    View full-size slide

  65. Network Link
    Conditioner

    View full-size slide

  66. Charles Web Proxy
    charlesproxy.com

    View full-size slide

  67. If you want to help
    educate the world…
    !
    we’re hiring.

    View full-size slide