• Save
Mobile Movies with HTTP Live Streaming (CocoaConf Columbus, Aug '12)
Upcoming SlideShare
Loading in...5
×
 

Mobile Movies with HTTP Live Streaming (CocoaConf Columbus, Aug '12)

on

  • 3,549 views

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 ...

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.

Statistics

Views

Total Views
3,549
Views on SlideShare
3,519
Embed Views
30

Actions

Likes
7
Downloads
0
Comments
2

4 Embeds 30

https://si0.twimg.com 17
https://twimg0-a.akamaihd.net 6
https://twitter.com 6
http://blog.naver.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • If you have an app which uses HTTP Live Streaming you can now port your app to Windows 8 and Windows Phone 8 and re-use the same HLS content.

    http://www.3ivx.com/technology/windows/metro/http_live_streaming.html
    Are you sure you want to
    Your message goes here
    Processing…
  • Best Cars : Good posting. Thank you!!! - CarAutomobileThe Best Cars ListCar Reviews
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Mobile Movies with HTTP Live Streaming (CocoaConf Columbus, Aug '12) Mobile Movies with HTTP Live Streaming (CocoaConf Columbus, Aug '12) Presentation Transcript

  • Mobile Movies with HTTP Live Streaming Chris Adamson • @invalidname CocoaConf Aug 10, 2012 • Columbus, OH Sides and code available on my blog: http://www.subfurther.com/blogSaturday, August 11, 12
  • So Many Streaming Apps!Saturday, August 11, 12
  • So Many Streaming Apps!Saturday, August 11, 12
  • NetflixSaturday, August 11, 12
  • FlixterSaturday, August 11, 12
  • ABCSaturday, August 11, 12
  • PBSSaturday, August 11, 12
  • NBC Olympics Live ExtraSaturday, August 11, 12
  • DirecTVSaturday, August 11, 12
  • UStreamSaturday, August 11, 12
  • CrunchyrollSaturday, August 11, 12
  • TwitchTVSaturday, August 11, 12
  • Oh, and it can be embedded in the <video> tagSaturday, August 11, 12
  • Sounds good? How do I get in on that?Saturday, August 11, 12
  • What Youll Learn • What streaming is (and isnt) • Setting up HLS on the server • Using HLS streams in iOS apps • Real-world deploymentSaturday, August 11, 12
  • HLS: What It Is (and isnt)Saturday, August 11, 12
  • Good Ol BroadcastSaturday, August 11, 12
  • 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.Saturday, August 11, 12
  • 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.).Saturday, August 11, 12
  • Impedence Mismatch!Saturday, August 11, 12
  • 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.Saturday, August 11, 12
  • 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.Saturday, August 11, 12
  • What If… • We didnt 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?Saturday, August 11, 12
  • 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.Saturday, August 11, 12
  • Serving up HLS • Client URL is an .m3u8 playlist file • Playlist points to the media segment filesSaturday, August 11, 12
  • Saturday, August 11, 12
  • 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-ENDLISTSaturday, August 11, 12
  • 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-ENDLISTSaturday, August 11, 12
  • 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-ENDLISTSaturday, August 11, 12
  • 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-ENDLISTSaturday, August 11, 12
  • 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 periodicallySaturday, August 11, 12
  • Web DemoSaturday, August 11, 12
  • <video src="prog_index.m3u8" width="640" height="480" controls autoplay>No video tag support</video>Saturday, August 11, 12
  • 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 videoSaturday, August 11, 12
  • 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)Saturday, August 11, 12
  • Serving up HLSSaturday, August 11, 12
  • Saturday, August 11, 12
  • Saturday, August 11, 12
  • Saturday, August 11, 12
  • Saturday, August 11, 12
  • Saturday, August 11, 12
  • 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 stubSaturday, August 11, 12
  • 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.Saturday, August 11, 12
  • 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.tsSaturday, August 11, 12
  • DemoSaturday, August 11, 12
  • 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 whats available, let client figure out which to use. • HLS clients automatically switch to best variant for current network conditions, switch on the fly.Saturday, August 11, 12
  • 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 firstSaturday, August 11, 12
  • Encoding the variantsSaturday, August 11, 12
  • TN2224 RecommendationsSaturday, August 11, 12
  • 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.m4vSaturday, August 11, 12
  • 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.plistSaturday, August 11, 12
  • DemoSaturday, August 11, 12
  • Thats Great, but… How do we keep people from stealing our stream?Saturday, August 11, 12
  • Encryption • HLS encrypts files, not transport. • Easy to scale: still serving flat files, but now theyre useless without decryption keys. • Serving the keys still needs to be secure. • Necessary, but not sufficient, for DRM.Saturday, August 11, 12
  • 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 maxSaturday, August 11, 12
  • Encrypted .ts filesSaturday, August 11, 12
  • Encrypted .ts filesSaturday, August 11, 12
  • Encrypted .ts filesSaturday, August 11, 12
  • Encrypted .ts filesSaturday, August 11, 12
  • Protect those keys /www/protected /www/hlsSaturday, August 11, 12
  • DemoSaturday, August 11, 12
  • 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?Saturday, August 11, 12
  • VLC streams .ts/UDP http://stackoverflow.com/questions/3846145Saturday, August 11, 12
  • VLC streams .ts/UDP mediastreamsegmenter -s 3 -D -f /Library/ WebServer/Documents/httplivestreaming/live 127.0.0.1:1234 http://stackoverflow.com/questions/3846145Saturday, August 11, 12
  • Demo (Or Not)Saturday, August 11, 12
  • Client-side HLSSaturday, August 11, 12
  • 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 necessarySaturday, August 11, 12
  • 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;Saturday, August 11, 12
  • MPMovieScalingMode AspectFitSaturday, August 11, 12
  • MPMovieScalingMode AspectFillSaturday, August 11, 12
  • MPMovieScalingMode  FillSaturday, August 11, 12
  • Accessing Encrypted Streams • Media Player and AV Foundation can use NSURLCredentials that youve 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"Saturday, August 11, 12
  • Setting credentials (1) NSURLProtectionSpace *protectionSpace = ! [[NSURLProtectionSpace alloc] ! ! initWithHost:host ! ! port:port ! ! protocol:protocol ! ! realm:realm ! ! authenticationMethod: ! ! ! NSURLAuthenticationMethodDefault];Saturday, August 11, 12
  • Setting credentials (2) NSURLCredential *credential = ! [NSURLCredential credentialWithUser:username ! ! ! ! ! ! ! ! !         password:password ! ! ! ! ! ! ! ! ! ! ! persistence: ! ! ! NSURLCredentialPersistenceForSession]; [[NSURLCredentialStorage ! sharedCredentialStorage] ! ! setDefaultCredential:credential ! ! forProtectionSpace:protectionSpace];Saturday, August 11, 12
  • Streaming in the Real World Its not all about iPhones…Saturday, August 11, 12
  • 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 consolesSaturday, August 11, 12
  • Lets 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?Saturday, August 11, 12
  • HLS Alternatives • Flash still rules on the desktop/browser space, thanks in part to Mozillas 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 HTTPSaturday, August 11, 12
  • MPEG-DASH • Attempt at a standardized approach to HTTP adaptive-bitrate streaming. ISO/IEC 23009-1. http://xkcd.com/927/Saturday, August 11, 12
  • Emerging Consensus • Flash for PCs • HTTP Live Streaming for iOS • Plus whatever other devices you need to supportSaturday, August 11, 12
  • 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?Saturday, August 11, 12
  • Content Delivery Networks http://en.wikipedia.org/wiki/Content_delivery_networkSaturday, August 11, 12
  • 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 HLSSaturday, August 11, 12
  • Buy or BuildSaturday, August 11, 12
  • Outsourcing HLS Ads from "Streaming Media" June/July 2012Saturday, August 11, 12
  • Outsourcing HLS Ads from "Streaming Media" June/July 2012Saturday, August 11, 12
  • Outsourcing HLS Ads from "Streaming Media" June/July 2012Saturday, August 11, 12
  • Outsourcing HLS Ads from "Streaming Media" June/July 2012Saturday, August 11, 12
  • Outsourcing HLS Ads from "Streaming Media" June/July 2012Saturday, August 11, 12
  • Outsourcing HLS Ads from "Streaming Media" June/July 2012Saturday, August 11, 12
  • Outsourcing HLS Ads from "Streaming Media" June/July 2012Saturday, August 11, 12
  • Outsourcing HLS Ads from "Streaming Media" June/July 2012Saturday, August 11, 12
  • Outsourcing HLS Ads from "Streaming Media" June/July 2012Saturday, August 11, 12
  • Outsourcing HLS Ads from "Streaming Media" June/July 2012Saturday, August 11, 12
  • Outsourcing HLS Ads from "Streaming Media" June/July 2012Saturday, August 11, 12
  • Outsourcing HLS Ads from "Streaming Media" June/July 2012Saturday, August 11, 12
  • Outsourcing HLS Ads from "Streaming Media" June/July 2012Saturday, August 11, 12
  • Takeaways • HLS is a very practical streaming solution • Only part of the picture if youre multi-platform • Encoding and serving correctly requires some care and expertise • Client-side software requirements are fairly simpleSaturday, August 11, 12
  • Q&A Slides and code will be available on my blog: http://www.subfurther.com/blog http://www.slideshare.net/invalidname @invalidnameSaturday, August 11, 12