Tuesday, July 16, 2013

HTTP Live Streaming Tutorial With HTML5 and Ruby Sinatra

HTTP Live Streaming is a way to send audio and video over HTTP from a web server to client software on the desktop or to iOS-based devices. HTTP Live Streaming sends audio and video as a series of small files, typically of about 10 seconds duration, called media segment files. An index file, or playlist, gives the clients the URLs of the media segment files. The playlist can be periodically refreshed to accommodate live broadcasts, where media segment files are constantly being produced.

Full Source Code: http://bit.ly/12EdHal

1. Download Apple HTTP Live Streaming Command Line Tools: https://developer.apple.com/streaming/

2. With the MP4 video (mine is Iron-Man-3.mp4) in the same directory:


$ mediafilesegmenter Iron-Man-3.mp4 

dyn-209-2-221-215:tutorial ktran$ mediafilesegmenter Iron-Man-3.mp4 
Jul 16 2013 14:25:35.304: Using floating point is not backward compatible to iOS 4.1 or earlier devices
Jul 16 2013 14:25:35.304: Processing file /Users/ktran/Desktop/tutorial/Iron-Man-3.mp4
Jul 16 2013 14:25:35.338: Finalized fileSequence0.ts
Jul 16 2013 14:25:35.343: segment bitrate  1.98 Mbits/sec is new max
Jul 16 2013 14:25:35.370: Finalized fileSequence1.ts
Jul 16 2013 14:25:35.377: segment bitrate  4.38 Mbits/sec is new max
Jul 16 2013 14:25:35.401: Finalized fileSequence2.ts
Jul 16 2013 14:25:35.401: segment bitrate  5.24 Mbits/sec is new max
Jul 16 2013 14:25:35.420: Finalized fileSequence3.ts
Jul 16 2013 14:25:35.440: Finalized fileSequence4.ts
Jul 16 2013 14:25:35.470: Finalized fileSequence5.ts
Jul 16 2013 14:25:35.471: segment bitrate  6.56 Mbits/sec is new max
Jul 16 2013 14:25:35.490: Finalized fileSequence6.ts
Jul 16 2013 14:25:35.514: Finalized fileSequence7.ts
Jul 16 2013 14:25:35.549: Finalized fileSequence8.ts
Jul 16 2013 14:25:35.550: segment bitrate  8.19 Mbits/sec is new max
Jul 16 2013 14:25:35.586: Finalized fileSequence9.ts
Jul 16 2013 14:25:35.613: Finalized fileSequence10.ts
Jul 16 2013 14:25:35.653: Finalized fileSequence11.ts
Jul 16 2013 14:25:35.703: Finalized fileSequence12.ts
Jul 16 2013 14:25:35.739: Finalized fileSequence13.ts
Jul 16 2013 14:25:35.765: Finalized fileSequence14.ts
Jul 16 2013 14:25:35.766: Finalized fileSequence15.ts
Jul 16 2013 14:25:35.766: segment does not contain sync frame
Jul 16 2013 14:25:35.767: average bit rate is  5.28 Mbits/sec - max file bit rate is  8.19 Mbits/sec
dyn-209-2-221-215:tutorial ktran$ 

3. Install Ruby Sinatra and Thin (if not installed)

$ gem install sinatra
$ gem install thin


dyn-209-2-214-100:tutorial ktran$ gem install sinatra
Successfully installed sinatra-1.4.3
1 gem installed
Installing ri documentation for sinatra-1.4.3...
Installing RDoc documentation for sinatra-1.4.3...
dyn-209-2-214-100:tutorial ktran$
dyn-209-2-214-100:tutorial ktran$ gem install thin
Building native extensions.  This could take a while...
Successfully installed thin-1.5.1
1 gem installed
Installing ri documentation for thin-1.5.1...
Installing RDoc documentation for thin-1.5.1...
dyn-209-2-214-100:tutorial ktran$

3. Create the server.rb file and index.html file in the same directory as your video segments. 

 server.rb


require 'sinatra'
require 'rubygems'

get '/' do
  File.read(File.join('.', 'index.html'))
end

get '/:filename' do
  File.read(File.join('.', "#{params[:filename]}"))
end

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>HTTP Live Streaming Example</title>
        <link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
        <script src="http://vjs.zencdn.net/c/video.js"></script>
    </head>
    <body>
    <video class="video-js vjs-default-skin"  
       controls preload="auto" width="1280" height="720"   
       data-setup='{"example_option":true}'>  
   <source src="http://localhost:4567/prog_index.m3u8" type='application/x-mpegURL'/ >
     </video>
    </body>
</html>

3. Start the server.

$ ruby server.rb


4. Go to a web browser and go to the address: http://localhost:4597.

 First Mistake - I Didn't Create a General Route to Send Files - But At Least I Know It's Correctly Requesting All of the Segments


dyn-209-2-214-100:tutorial ktran$ ruby server.rb 
== Sinatra/1.4.3 has taken the stage on 4567 for development with backup from Thin
>> Thin web server (v1.5.1 codename Straight Razor)
>> Maximum connections set to 1024
>> Listening on localhost:4567, CTRL+C to stop
127.0.0.1 - - [16/Jul/2013 14:59:33] "GET / HTTP/1.1" 200 1204 0.0040
127.0.0.1 - - [16/Jul/2013 14:59:33] "GET /prog_index.m3u8 HTTP/1.1" 200 680 0.0009
127.0.0.1 - - [16/Jul/2013 14:59:33] "GET /prog_index.m3u8 HTTP/1.1" 200 680 0.0010
127.0.0.1 - - [16/Jul/2013 14:59:33] "GET /fileSequence0.ts HTTP/1.1" 404 453 0.0011
127.0.0.1 - - [16/Jul/2013 14:59:33] "GET /fileSequence1.ts HTTP/1.1" 404 453 0.0013
127.0.0.1 - - [16/Jul/2013 14:59:33] "GET /fileSequence2.ts HTTP/1.1" 404 453 0.0009
127.0.0.1 - - [16/Jul/2013 14:59:33] "GET /fileSequence3.ts HTTP/1.1" 404 453 0.0009
127.0.0.1 - - [16/Jul/2013 14:59:33] "GET /fileSequence4.ts HTTP/1.1" 404 453 0.0009
127.0.0.1 - - [16/Jul/2013 14:59:33] "GET /fileSequence5.ts HTTP/1.1" 404 453 0.0009
127.0.0.1 - - [16/Jul/2013 14:59:33] "GET /fileSequence6.ts HTTP/1.1" 404 453 0.0008
127.0.0.1 - - [16/Jul/2013 14:59:33] "GET /fileSequence7.ts HTTP/1.1" 404 453 0.0010
127.0.0.1 - - [16/Jul/2013 14:59:33] "GET /fileSequence8.ts HTTP/1.1" 404 453 0.0009
127.0.0.1 - - [16/Jul/2013 14:59:33] "GET /fileSequence9.ts HTTP/1.1" 404 453 0.0008
127.0.0.1 - - [16/Jul/2013 14:59:33] "GET /fileSequence10.ts HTTP/1.1" 404 454 0.0008
127.0.0.1 - - [16/Jul/2013 14:59:33] "GET /fileSequence11.ts HTTP/1.1" 404 454 0.0009
127.0.0.1 - - [16/Jul/2013 14:59:33] "GET /fileSequence12.ts HTTP/1.1" 404 454 0.0011
127.0.0.1 - - [16/Jul/2013 14:59:33] "GET /fileSequence13.ts HTTP/1.1" 404 454 0.0011
127.0.0.1 - - [16/Jul/2013 14:59:33] "GET /fileSequence14.ts HTTP/1.1" 404 454 0.0008
127.0.0.1 - - [16/Jul/2013 14:59:33] "GET /fileSequence15.ts HTTP/1.1" 404 454 0.0009

Success




dyn-209-2-214-100:tutorial ktran$ ruby server.rb 
== Sinatra/1.4.3 has taken the stage on 4567 for development with backup from Thin
>> Thin web server (v1.5.1 codename Straight Razor)
>> Maximum connections set to 1024
>> Listening on localhost:4567, CTRL+C to stop
127.0.0.1 - - [16/Jul/2013 15:04:18] "GET / HTTP/1.1" 200 1204 0.0039
127.0.0.1 - - [16/Jul/2013 15:04:18] "GET /prog_index.m3u8 HTTP/1.1" 200 680 0.0011
127.0.0.1 - - [16/Jul/2013 15:04:18] "GET /prog_index.m3u8 HTTP/1.1" 200 680 0.0008
127.0.0.1 - - [16/Jul/2013 15:04:18] "GET /fileSequence0.ts HTTP/1.1" 200 2468252 0.0208
127.0.0.1 - - [16/Jul/2013 15:04:18] "GET /fileSequence1.ts HTTP/1.1" 200 5461964 0.0228
127.0.0.1 - - [16/Jul/2013 15:04:18] "GET /fileSequence2.ts HTTP/1.1" 200 6529428 0.0398
127.0.0.1 - - [16/Jul/2013 15:04:18] "GET /fileSequence3.ts HTTP/1.1" 200 5280732 0.0163
127.0.0.1 - - [16/Jul/2013 15:04:18] "GET /fileSequence4.ts HTTP/1.1" 200 5495616 0.0246
127.0.0.1 - - [16/Jul/2013 15:04:18] "GET /fileSequence5.ts HTTP/1.1" 200 8170480 0.0412
127.0.0.1 - - [16/Jul/2013 15:04:33] "GET /fileSequence6.ts HTTP/1.1" 200 4904168 0.0152
127.0.0.1 - - [16/Jul/2013 15:04:43] "GET /fileSequence7.ts HTTP/1.1" 200 6491452 0.0148
127.0.0.1 - - [16/Jul/2013 15:04:53] "GET /fileSequence8.ts HTTP/1.1" 200 10209716 0.0429
127.0.0.1 - - [16/Jul/2013 15:05:03] "GET /fileSequence9.ts HTTP/1.1" 200 9690648 0.0372
127.0.0.1 - - [16/Jul/2013 15:05:13] "GET /fileSequence10.ts HTTP/1.1" 200 6523036 0.0215
127.0.0.1 - - [16/Jul/2013 15:05:22] "GET /fileSequence11.ts HTTP/1.1" 200 5998328 0.0246
127.0.0.1 - - [16/Jul/2013 15:05:33] "GET /fileSequence12.ts HTTP/1.1" 200 8308284 0.0357
127.0.0.1 - - [16/Jul/2013 15:05:42] "GET /fileSequence13.ts HTTP/1.1" 200 6363236 0.0265
127.0.0.1 - - [16/Jul/2013 15:05:53] "GET /fileSequence14.ts HTTP/1.1" 200 7246648 0.0295
127.0.0.1 - - [16/Jul/2013 15:06:02] "GET /fileSequence15.ts HTTP/1.1" 200 255492 0.0037
127.0.0.1 - - [16/Jul/2013 15:06:54] "GET /fileSequence0.ts HTTP/1.1" 200 2468252 0.0124
127.0.0.1 - - [16/Jul/2013 15:06:54] "GET /fileSequence1.ts HTTP/1.1" 200 5461964 0.0062
127.0.0.1 - - [16/Jul/2013 15:06:54] "GET /fileSequence2.ts HTTP/1.1" 200 6529428 0.0151
127.0.0.1 - - [16/Jul/2013 15:06:54] "GET /fileSequence3.ts HTTP/1.1" 200 5280732 0.0034
127.0.0.1 - - [16/Jul/2013 15:06:54] "GET /fileSequence4.ts HTTP/1.1" 200 5495616 0.0052
127.0.0.1 - - [16/Jul/2013 15:06:54] "GET /fileSequence5.ts HTTP/1.1" 200 8170480 0.0167
Note: You can't view the movie on multiple browsers at once.

Sources: http://www.christopherlavender.com/2012/07/14/http-live-streaming-part-1-setup-segment-stream/

33 comments :

Annie Monie said...

Hi Kurry Tran,

It's nice to be back here in your blog, I've commented before on one of your blog post about http://kurrytran.blogspot.com/2011/07/simple-ios-5-tutorial-using-storyboard.html and I really enjoyed reading your site content as it was very informative and it's nice to see that there are lot of active readers in your blog.

I've been reading and watching about HTML5 since last month cause I'm planning to redesign my blog theme Techie-Pinoy and as of now I really need some good reference before I start, any links you have in mind, just reply it to this comment and i will get back to you asap.

Steve Smith said...

Very nice information on HTTP Live Streaming with HTML5.

online HTML5 Training

rooney said...

Interesting. However the title of your post is a bit confusing. I don't see what is "live" in streaming a static movie. How do you handle streams on the server, created by a webcam for example or loaded from another resource at the same time and forwarding them to an iOS device? This would be live streaming.

SELVIN said...

Thanks for the information ..........
HTML5 Training In Chennai |
HTML5 course In Chennai

steve said...


Thank you for sharing the wounderful Article
شركة نقل عفش بينبع

نقل الاثاث بالمدينة المنورة
http://www.transferfurnituremedina.com/
http://www.transferfurnituremedina.com/yanbu-movers/

aarij ali said...

This blog website is pretty cool! How was it made ! Tax Enquiry Accounts

Anas Qureshi said...

This blog website is pretty cool! How was it made ! HMRC Tax Enquiry Advice

Anas Qureshi said...

Much obliged to you for such an elegantly composed article. It's brimming with astute data and diverting depictions. Your perspective is the best among numerous. Let Campaign Tax Enquiry

aarij ali said...

Thankyou for this howling post, I am glad I observed this site on yahoo. Tax Investigation Self Employed

Robin Jack said...

I truly welcome the sort of themes you post here. A debt of gratitude is in order for sharing us an extraordinary data that is really useful. Great day! Let Property Campaign Accountants

Azi Seo said...

I'm happy I discovered this site, I couldn't discover any learning on this matter earlier to.Also work a website and in the event that you are ever keen on doing some guest composing for me if conceivable don't hesitate to tell me, im dependably search for individuals to look at my site. Buy to Let Property Tax Advisors

Unknown said...

Fantastic article. Exceptionally fascinating to peruse. I truly love to peruse such a decent article. Much obliged! continue shaking. Buy to Let Property Tax Advice

Unknown said...

I truly like your thoughts on the issue. I now have an unmistakable thought on what this matter is about.. domain authority blog comments

Unknown said...

Best work you have done, this online site is truly cool with incredible certainties. Buy to Let Tax Advisor

Azi Seo said...

Amazing and extremely energizing site. Affection to watch. Continue Rocking. Buy to Let Property Tax Advice London

tamsi said...

Wow what a Great Information about World Day its exceptionally pleasant educational post. a debt of gratitude is in order for the post. Property Tax Accountant

tamsi said...

I truly value this awesome post that you have accommodated us. I guarantee this would be gainful for the greater part of the general population. Property Tax Advice

Azi Seo said...

howdy was simply checking whether you minded a remark. i like your site and the thme you picked is super. I will be back. Property Tax Advisors

tamsi said...

A debt of gratitude is in order for setting aside an ideal opportunity to talk about this, I feel emphatically about it and affection adapting more on this theme. On the off chance that conceivable, as you pick up skill, would you brain overhauling your online journal with additional data? It is to a great degree accommodating for me. Profile backlinks

tamsi said...

howdy, your sites are better than average. I value your work. Tax on Buy to Let Property

Legends Of Bangladesh. said...

Legends of Bangladesh A bunch of pure souls who achieved the glory for a country, Bangladesh, will remember forever as the legends of the nation

Azi Seo said...

hi!! Exceptionally fascinating discourse happy that I went over such educational post. Keep doing awesome. Happy to be a piece of your net group. Tax Investigation Accountants

Azi Seo said...

Much obliged for this extraordinary post, i discover it exceptionally fascinating and extremely well thoroughly considered and set up together. I anticipate perusing your work later o Tax Investigation Advisors

tamsi said...

That is the excellent mindset, nonetheless is just not help to make every sence whatsoever preaching about that mather. Virtually any method many thanks in addition to i had endeavor to promote your own article in to delicius nevertheless it is apparently a dilemma using your information sites can you please recheck the idea. thanks once more. Tax Investigation Self Assessment

tamsi said...

Howdy! Pleasant post! If you don"t mind let us know when I will see a postliminary! Tax Investigation Specialists

tamsi said...

Goodness, cool post. I"d like to compose like this as well – requiring significant investment and genuine diligent work to make an incredible article… yet I put things off an excessive amount of and never appear to begin. Much obliged however. Tax Investigation Self Employed

Aarij said...

Your site is truly cool and this is an incredible moving article. Tax Investigation Accountants

tamsi said...

I like this post,And I figure that they having a great time to peruse this post,they might take a decent site to make an information,thanks for sharing it to me. Tax Investigation Advisors

tamsi said...

I experience considerable difficulties my considerations on substance, yet I truly felt I ought to here. Your article is truly awesome. I like the way you composed this data. Tax Investigation Specialists

tamsi said...

Much obliged, that was a truly cool read! Tax Investigation Self Assessment

tamsi said...

I can see that you are a specialist at your field! I am dispatching a site soon, and your data will be exceptionally helpful for me.. A debt of gratitude is in order for all your help and wishing all of you the achievement in your business. Tax Investigation Self Employed

tamsi said...

If you don't mind proceed with this extraordinary work and I anticipate a greater amount of your marvelous blog entries. Revenue Tax Investigation

basha said...

Superb blog I visit this blog it's extremely marvelous. Interestingly, in this blog content composed plainly and justifiable. The substance of data is exceptionally instructive.
oracle fusion financials classroom training
Workday HCM Online Training
Oracle Fusion Financials Online Training
Oracle Fusion HCM Online Training
Oracle Fusion SCM Online Training
Oracle Fusion HCM Classroom Training