If your iOS app streams video, then you're going to be using HTTP Live Streaming. Between the serious support for it in iOS, and App Store rules mandating its use in some cases, there realistically is no other choice. But where do you get started and what do you have to do? In this session, we'll take a holistic look at how to use HLS. We'll cover how to encode media for HLS and how to get the best results for all the clients and bitrates you might need to support, how to serve that media (and whether it makes sense to let someone else do it for you), and how to integrate the HLS stream into your app.

1. Mobile Movies with
HTTP Live Streaming
Chris Adamson • @invalidname
CocoaConf
Jun 29, 2012 • Reston, VA
Sides and code will be on my blog:
http://www.subfurther.com/blog
Sunday, July 1, 12

2. So Many Streaming
Apps!
Sunday, July 1, 12

3. So Many Streaming
Apps!
Sunday, July 1, 12

4. Netflix
Sunday, July 1, 12

5. Flixter
Sunday, July 1, 12

6. ABC
Sunday, July 1, 12

7. PBS
Sunday, July 1, 12

8. DirecTV
Sunday, July 1, 12

9. UStream
Sunday, July 1, 12

10. Crunchyroll
Sunday, July 1, 12

11. TwitchTV
Sunday, July 1, 12

12. Sounds good? How
do I get in on that?
Sunday, July 1, 12

13. What You'll Learn
• What streaming is (and isn't)
• Setting up HLS on the server
• Using HLS streams in iOS apps
• Real-world deployment
Sunday, July 1, 12

14. HLS: What It Is (and
isn't)
Sunday, July 1, 12

15. Good Ol' Broadcast
Sunday, July 1, 12

16. Broadcast Media
• Always live on some channel (a band of EM
spectrum).
• Every client tuned to that channel sees the
same thing, at the same time.
• One-way, one-to-many model.
Sunday, July 1, 12

17. Internet
• Generally one-to-one (host to host).
• Multicast IP is an exception, but is rare on
the public Internet.
• Two-way communication over sockets.
• Routing can take many hops, via multiple
transport media (wire, wifi, cellular, etc.).
Sunday, July 1, 12

18. Impedence Mismatch!
Sunday, July 1, 12

19. Ye Olde Streaming
• Client makes socket connection and keeps it
open for duration of program.
• Server sends media at playback speed (plus
buffering).
• Shoutcast: MP3 files served slowly over HTTP.
• Typically use a special port number and
special server software.
Sunday, July 1, 12

20. Streaming Problems
• Difficult and expensive to scale.
• Special port numbers routinely blocked by
businesses, ISPs, firewalls, etc.
• Competing standards: Real Player, Windows
Media, QuickTime (all with their own plugins).
• No wonder Flash won.
• Good luck holding a socket connection on cellular.
Sunday, July 1, 12

21. What If…
• We didn't need an always-on socket
connection?
• We could just run over port 80?
• We could just adopt industry standards like H.
264 and AAC instead of cooking custom
codecs?
Sunday, July 1, 12

22. HTTP Live Streaming
• Serves media as a series of short flat files, via
HTTP, usually on port 80.
• Any web server will do.
• Client software reassembles the data into a
continuous media stream.
• Spec does not specify contents, but Apple uses
H.264 and AAC, just like all their media apps.
Sunday, July 1, 12

23. Serving up HLS
• Client URL is an .m3u8 playlist file
• Playlist points to the media segment files
Sunday, July 1, 12

24. Sunday, July 1, 12

25. The HLS playlist
#EXTM3U
#EXT-X-TARGETDURATION:10
#EXT-X-VERSION:3
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-PLAYLIST-TYPE:VOD
#EXTINF:9.975,!
fileSequence0.ts
#EXTINF:9.975,!
fileSequence1.ts
#EXTINF:9.975,!
fileSequence2.ts
#EXTINF:9.9767,!
fileSequence3.ts
#EXTINF:9.975,!
[...]
#EXT-X-ENDLIST
Sunday, July 1, 12

26. The HLS playlist
#EXTM3U Format: .m3u8 format,
#EXT-X-TARGETDURATION:10
#EXT-X-VERSION:3
just a list of files to play
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-PLAYLIST-TYPE:VOD
#EXTINF:9.975,!
fileSequence0.ts
#EXTINF:9.975,!
fileSequence1.ts
#EXTINF:9.975,!
fileSequence2.ts
#EXTINF:9.9767,!
fileSequence3.ts
#EXTINF:9.975,!
[...]
#EXT-X-ENDLIST
Sunday, July 1, 12

27. The HLS playlist
#EXTM3U Format: .m3u8 format,
#EXT-X-TARGETDURATION:10
#EXT-X-VERSION:3
just a list of files to play
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-PLAYLIST-TYPE:VOD Metadata tags describe
#EXTINF:9.975,!
fileSequence0.ts the contents
#EXTINF:9.975,!
fileSequence1.ts
#EXTINF:9.975,!
fileSequence2.ts
#EXTINF:9.9767,!
fileSequence3.ts
#EXTINF:9.975,!
[...]
#EXT-X-ENDLIST
Sunday, July 1, 12

28. The HLS playlist
#EXTM3U Format: .m3u8 format,
#EXT-X-TARGETDURATION:10
#EXT-X-VERSION:3
just a list of files to play
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-PLAYLIST-TYPE:VOD Metadata tags describe
#EXTINF:9.975,!
fileSequence0.ts the contents
#EXTINF:9.975,!
fileSequence1.ts
#EXTINF:9.975,! Each segment file
fileSequence2.ts
#EXTINF:9.9767,!
preceded by metadata
fileSequence3.ts (e.g., duration)
#EXTINF:9.975,!
[...]
#EXT-X-ENDLIST
Sunday, July 1, 12

29. The HLS playlist
#EXTM3U Format: .m3u8 format,
#EXT-X-TARGETDURATION:10
#EXT-X-VERSION:3
just a list of files to play
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-PLAYLIST-TYPE:VOD Metadata tags describe
#EXTINF:9.975,!
fileSequence0.ts the contents
#EXTINF:9.975,!
fileSequence1.ts
#EXTINF:9.975,! Each segment file
fileSequence2.ts
#EXTINF:9.9767,!
preceded by metadata
fileSequence3.ts (e.g., duration)
#EXTINF:9.975,!
[...] If no end tag, client
#EXT-X-ENDLIST refreshes periodically
Sunday, July 1, 12

30. Web Demo
Sunday, July 1, 12

31. <video src="prog_index.m3u8" width="640" height="480"
controls autoplay>No video tag support</video>
Sunday, July 1, 12

32. How is this better than
a flat .m4v file?
• Streams can provide variants for different
bandwidths (as we’ll see…)
• Segments make it easier to scrub into the
video
• Streams can be live video
Sunday, July 1, 12

33. The “Live” in HLS
• A playlist is a live stream if it doesn’t have an
#EXT-X-ENDLIST tag
• Live playlist will generally just contain the last
minute or so of segments
• Client will refresh playlist every minute or so,
download whatever segments it doesn’t already
have, queue them locally
• “Live” isn’t really “live” (often a minute behind)
Sunday, July 1, 12

34. Serving up HLS
Sunday, July 1, 12

35. Sunday, July 1, 12

36. Sunday, July 1, 12

37. Sunday, July 1, 12

38. Sunday, July 1, 12

39. Sunday, July 1, 12

40. mediafilesegmenter
• Splits an A/V file into segment files, creates
the .m3u8 playlist
• Source must be .mov or .m4v with H.264 video,
AAC audio
• Output segments will be MPEG-2 Transport Stream
(.ts) files, or .aac if audio-only
• Segment paths are relative, use -b to prepend URL
stub
Sunday, July 1, 12

41. Technical Note TN2224
The following audio and video formats are supported:
• Video: H.264 Baseline Profile Level 3.0 (iPhone/iPod Touch),
Main Profile Level 3.1 (iPad 1,2)
• Audio: HE-AAC or AAC-LC up to 48 kHz, stereo audio OR
MP3 (MPEG-1 Audio Layer 3) 8 kHz to 48 kHz, stereo audio
Note: iPhone 3G supports Baseline Profile Level 3.1. If your
app runs on older iPhones, however, you should use H.264
Baseline Profile 3.0 for compatibility.
Sunday, July 1, 12

42. Yuna:HTTP Live Streaming tests cadamson$ mediafilesegmenter
-f basic source/IMG_0251.MOV
Jun 24 2012 10:01:24.203: Using floating point is not
backward compatible to iOS 4.1 or earlier devices
Jun 24 2012 10:01:24.204: Processing file /Users/cadamson/
Documents/HTTP Live Streaming tests/source/IMG_0251.MOV
Jun 24 2012 10:01:24.338: Finalized /Users/cadamson/
Documents/HTTP Live Streaming tests/basic/fileSequence0.ts
Jun 24 2012 10:01:24.375: segment bitrate 3.78028e+06 is
new max
Jun 24 2012 10:01:24.468: Finalized /Users/cadamson/
Documents/HTTP Live Streaming tests/basic/fileSequence1.ts
Jun 24 2012 10:01:24.554: Finalized /Users/cadamson/
Documents/HTTP Live Streaming tests/basic/fileSequence2.ts
Jun 24 2012 10:01:24.631: Finalized /Users/cadamson/
Documents/HTTP Live Streaming tests/basic/fileSequence3.ts
Jun 24 2012 10:01:24.717: Finalized /Users/cadamson/
Documents/HTTP Live Streaming tests/basic/fileSequence4.ts
Sunday, July 1, 12

43. Demo
Sunday, July 1, 12

44. Variant Playlists
• One bitrate does not fit all: Mac on Ethernet
versus iPhone on Edge.
• Solution: encode your video at multiple bitrates,
offer metadata in playlist about what's
available, let client figure out which to use.
• HLS clients automatically switch to best variant
for current network conditions, switch on the fly.
Sunday, July 1, 12

45. variantplaylistcreator
• Creates a playlist that itself points to playlists
created with mediafilesegmenter.
• Each entry contains metadata describing the
bitrate and encoding of the variant.
• Tool takes argument pairs: file or URL of a
variant .m3u8, and metadata .plist created with
mediafilesegmenter -I flag
• First entry in variant playlist is default; client will try
this one first
Sunday, July 1, 12

46. Encoding the variants
Sunday, July 1, 12

47. TN2224
Recommendations
Sunday, July 1, 12

48. Creating variants
Yuna:HTTP Live Streaming tests cadamson$
mediafilesegmenter -I -f variants/
broadband/ source/IMG_0254_Broadband.m4v
Yuna:HTTP Live Streaming tests cadamson$
mediafilesegmenter -I -f variants/wifi
source/IMG_0254_WiFi.m4v
Yuna:HTTP Live Streaming tests cadamson$
mediafilesegmenter -I -f variants/
cellular source/IMG_0254_Cellular.m4v
Sunday, July 1, 12

49. Creating variant playlist
Yuna:HTTP Live Streaming tests cadamson$
variantplaylistcreator -o variants/
variants.m3u8 variants/broadband/
prog_index.m3u8 source/
IMG_0254_Broadband.plist variants/wifi/
prog_index.m3u8 source/
IMG_0254_WiFi.plist variants/cellular/
prog_index.m3u8 source/
IMG_0254_Cellular.plist
Sunday, July 1, 12

50. Demo
Sunday, July 1, 12

51. That's Great, but…
How do we keep people from stealing our stream?
Sunday, July 1, 12

52. Encryption
• HLS encrypts files, not transport.
• Easy to scale: still serving flat files, but now
they're useless without decryption keys.
• Serving the keys still needs to be secure.
• Necessary, but not sufficient, for DRM.
Sunday, July 1, 12

53. Encrypting a playlist
Yuna:HTTP Live Streaming tests cadamson$ mediafilesegmenter -
I -k keys -f encrypted/cellular source/IMG_0426_Cellular.m4v
Jun 24 2012 18:59:47.115: Using new key/iv rotation period;
this is not backward compatible to iOS 3.1.* or earlier
devices. Use the "-encrypt-iv=sequence" option for
compatibility with those devices.
Jun 24 2012 18:59:47.115: Using floating point is not
backward compatible to iOS 4.1 or earlier devices
Jun 24 2012 18:59:47.115: Processing file /Users/cadamson/
Documents/HTTP Live Streaming tests/source/
IMG_0426_Cellular.m4v
Jun 24 2012 18:59:47.152: changing IV
Jun 24 2012 18:59:47.160: Finalized /Users/cadamson/
Documents/HTTP Live Streaming tests/encrypted/cellular/
fileSequence0.ts
Jun 24 2012 18:59:47.160: segment bitrate 271257 is new max
Sunday, July 1, 12

54. Encrypted .ts files
Sunday, July 1, 12

55. Encrypted .ts files
Sunday, July 1, 12

56. Encrypted .ts files
Sunday, July 1, 12

57. Encrypted .ts files
Sunday, July 1, 12

58. Protect those keys
/www/protected
/www/hls
Sunday, July 1, 12

59. Demo
Sunday, July 1, 12

60. Live Streaming
• mediastreamsegmenter mostly works like the
file version, but takes its input from UDP
stream or a Unix pipe
• How the heck do you create a UDP A/V
stream?
Sunday, July 1, 12

61. VLC streams .ts/UDP
http://stackoverflow.com/questions/3846145
Sunday, July 1, 12

62. VLC streams .ts/UDP
mediastreamsegmenter -s 3 -D -f /Library/
WebServer/Documents/httplivestreaming/live
127.0.0.1:1234
http://stackoverflow.com/questions/3846145
Sunday, July 1, 12

63. Demo (Or Not)
Sunday, July 1, 12

64. Client-side HLS
Sunday, July 1, 12

65. Opening an HLS
stream
• Provide the .m3u8 URL to
MPMoviePlayerController or AVPlayer
• Add the movie view or layer to your UI,
customizing size or scaling if necessary
Sunday, July 1, 12

66. MPMoviePlayerController
// create new movie player
self.moviePlayer = [[MPMoviePlayerController alloc]
! ! ! ! ! ! ! ! initWithContentURL:streamURL];
[self.moviePlayer prepareToPlay];
[self.moviePlayer.view setFrame:
! ! ! ! ! ! ! self.movieContainerView.bounds];
[self.movieContainerView addSubview:
! ! ! ! ! ! ! ! self.moviePlayer.view];
self.moviePlayer.scalingMode =
! ! ! ! ! ! ! ! MPMovieScalingModeFill;
Sunday, July 1, 12

67. MPMovieScalingMode
AspectFit
Sunday, July 1, 12

68. MPMovieScalingMode
AspectFill
Sunday, July 1, 12

69. MPMovieScalingMode
Fill
Sunday, July 1, 12

70. Accessing Encrypted
Streams
• Media Player and AV Foundation can use
NSURLCredentials that you've provided
• Place credentials in NSURLCredentialStorage
• Server can provide the keys securely(*) with
HTTP Basic or Digest authentication, an
HTTPS script, etc.
* - For various values of "secure"
Sunday, July 1, 12

71. Setting credentials (1)
NSURLProtectionSpace *protectionSpace =
! [[NSURLProtectionSpace alloc]
! ! initWithHost:host
! ! port:port
! ! protocol:protocol
! ! realm:realm
! ! authenticationMethod:
! ! ! NSURLAuthenticationMethodDefault];
Sunday, July 1, 12

72. Setting credentials (2)
NSURLCredential *credential =
! [NSURLCredential credentialWithUser:username
! ! ! ! ! ! ! ! ! password:password
! ! ! ! ! ! ! ! ! ! ! persistence:
! ! ! NSURLCredentialPersistenceForSession];
[[NSURLCredentialStorage
! sharedCredentialStorage]
! ! setDefaultCredential:credential
! ! forProtectionSpace:protectionSpace];
Sunday, July 1, 12

73. Streaming in the Real
World
It's not all about iPhones…
Sunday, July 1, 12

74. Streaming Clients
• Mobile Devices: iPhone, iPad, iPod Touch…
plus Android, Windows Mobile, etc.
• Mac and Windows PCs
• Over-the-top (OTT) boxes: Apple TV, Roku
• Game consoles
Sunday, July 1, 12

75. Let's Get Practical
• What devices do you have to be on?
• What devices will you get for free?
• How to encode and deliver to the devices you
need?
Sunday, July 1, 12

76. HLS Alternatives
• Flash still rules on the desktop/browser
space, thanks in part to Mozilla's obstinance
about H.264 in <video> (irony alert: H.264 is
the de facto standard for Flash video)
• Adobe Dynamic Streaming and Microsoft
Smooth Streaming are highly similar to HLS:
bitrate-adaptive streams over HTTP
Sunday, July 1, 12

77. MPEG-DASH
• Attempt at a standardized approach to HTTP
adaptive-bitrate streaming. ISO/IEC 23009-1.
http://xkcd.com/927/
Sunday, July 1, 12

78. Emerging Consensus
• Flash for PCs
• HTTP Live Streaming for iOS
• Plus whatever other devices you need to
support
Sunday, July 1, 12

79. Real-World HLS
• Can you competently encode all your media
at all the variant bitrates you need?
• Do you have a way to QC all your streams?
• Can you handle the server load?
Sunday, July 1, 12

80. Content Delivery
Networks
http://en.wikipedia.org/wiki/Content_delivery_network
Sunday, July 1, 12

81. Content Delivery
Networks
• CDNs host your media on edge servers that are
closer to your clients. Less strain on your
servers and the backbones.
• Examples: Akamai, Limelight, EdgeCast
• Big media companies may have their own CDN
• Most already know how to do HLS
Sunday, July 1, 12

82. Outsourcing HLS
Ads from "Streaming Media" June/July 2012
Sunday, July 1, 12

83. Outsourcing HLS
Ads from "Streaming Media" June/July 2012
Sunday, July 1, 12

84. Outsourcing HLS
Ads from "Streaming Media" June/July 2012
Sunday, July 1, 12

85. Outsourcing HLS
Ads from "Streaming Media" June/July 2012
Sunday, July 1, 12

86. Outsourcing HLS
Ads from "Streaming Media" June/July 2012
Sunday, July 1, 12

87. Outsourcing HLS
Ads from "Streaming Media" June/July 2012
Sunday, July 1, 12

88. Takeaways
• HLS is a very practical streaming solution
• Only part of the picture if you're multi-platform
• Encoding and serving correctly requires some
care and expertise
• Client-side software requirements are fairly
simple
Sunday, July 1, 12

89. Q&A
Slides and code will be available on my blog:
http://www.subfurther.com/blog
http://www.slideshare.net/invalidname
@invalidname
Sunday, July 1, 12