$30 off During Our Annual Pro Sale. View Details »

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
  2. @yickzilla Yixin Zhu

  3. @jnwng Jon Wong

  4. @katfishi Katheryn Shi

  5. Who are we?

  6. We envision a future where everyone has access to a

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

    world-class education.
  8. How can we increase access? !

  9. Turns out, mobile apps provide lots and lots of access.

    ! We had to answer a few questions though…
  10. What platform should we build for first?

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

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

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

  14. Since all our videos are online we should be able

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

    able to just play them no problem, right?
  16. Turns out, the App Store has rules for media delivery

    within apps.
  17. 10 Every video over minutes must use HTTP Live Streaming

    (when played over cellular networks)
  18. 0:00 0:40 A normal video plays like this. foo.mp4

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

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

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

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

  23. … you have this. 10s 10s 10s 10s

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

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

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

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

    works like this:
  28. index360.m3u8 index540.m3u8 index720.m3u8 1 Bitrate : 1 Playlist

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

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

  31. 1 Video segmentation is not so simple.

  32. Most frames in a compressed video are a diff of

    the first frame it started with…
  33. =

  34. =

  35. = i-frame diffed frames

  36. = i-frame diffed frames

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

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

    … make it an i-frame.
  39. 2Bandwidth cutoffs are important

  40. HTTP Live Streaming uses the cutoffs to figure out when

    to switch streams.
  41. Put them too close and you’ll waste your efforts… 360p

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

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

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

    720p
  45. Our ideal cutoff is about 1.5x - 2.0x bandwidth before

    switching. 360p 540p 720p 1.5x 2.0x
  46. 3 FFmpeg is awesome

  47. It’s a cross-platform, open-source solution for encoding videos of all

    different formats…
  48. … its used by many amazing companies at scale (including

    Coursera)…
  49. … ‘nuff said.

  50. 4Don’t underestimate audio-only

  51. Mobile internet access was not made equal.

  52. Having audio-only means we can get education to Nigeria, Indonesia,

    and everywhere in between.
  53. 5 Client-side made easy

  54. So how do we integrate our videos into our iOS

    app?
  55. AVFoundation makes the job incredibly easy

  56. AVFoundation addresses time-varying collections of data

  57. = AVAsset + +…

  58. AVAsset AVPlayer

  59. …and we’re done!

  60. Our commitment to access means we can’t just cater to

    an English audience
  61. Web Video Text Tracks (WebVTT) subtitles are easy to use

    with HLS videos
  62. զత电脑ࠑ时ਖ਼ࡏզ宠෺鳄⻥鱼తᡙࢠཬɻ

  63. 06:02.000 --> 06:10.000 My laptop is in my pet alligator’s

    stomach. զత电脑ࠑ时ਖ਼ࡏզ宠෺鳄⻥鱼తᡙࢠཬɻ
  64. AVAsset AVPlayer

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

  66. Accessibility Engineering Effort

  67. 6Choose your tools wisely

  68. Network Link Conditioner

  69. Transloadit

  70. Charles Web Proxy charlesproxy.com

  71. Demo

  72. Thank you!

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

    hiring.
  74. Questions?