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.

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?