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/

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

Unknown 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

Aarijali said...

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

seo said...

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

seo 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

Aarijali said...

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

robinjack 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

Unknown 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

tamsi 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

tamsi 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

tamsi said...

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

Unknown 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

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

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

Unknown 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

Unknown 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

Aarij said...

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

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

Komali said...

Nice Explanation
Click here
Window Phones

Aparna said...

Nice blog...! It was the very best article about this title and thank you for giving a brief explanation. Keep posting more updating them...
Oracle DBA Training in Chennai
best oracle dba training in chennai
Spark Training in Chennai
Oracle Training in Chennai
Unix Training in Chennai
Power BI Training in Chennai
Social Media Marketing Courses in Chennai
Pega Training in Chennai
Linux Training in Chennai
Tableau Training in Chennai

Ady said...

Nice Blog Post.Thanks for sharing this post.
Bigo Live is the most popular video broadcasting app on the mobile platform
Download the application
BIGO LIVE APK
BIGO LIVE LOGIN
MESSENGER APP
BIGO MOD APK
Bigo Live Stream Games
Bigo Live for Windows Phone
Excellent Platform

Rethu said...

Hey Nice Blog!!! Thank you for sharing information. Wonderful blog & good post.Its really helpful for me, waiting for a more new post. Keep Blogging!

Are you a social media narcissist? And you would like to be the same person on social media as you are in real life? ‘Yes’ then install

Click below link

Bigo Live Connector
50 Million Bigo Live connector
Bigo Live PC connecto
Bigo Live
Live Stream

Aparna said...

I appreciate for your a good job and this post gives very useful information. Keep it up...!
Excel Training in Chennai
Excel classes in Chennai
Tableau Training in Chennai
Oracle Training in Chennai
Job Openings in Chennai
Pega Training in Chennai
Linux Training in Chennai
Spark Training in Chennai
Embedded System Course Chennai
Soft Skills Training in Chennai
Excel Training in T Nagar

lokesh said...

This blog contains useful information. Thank you for deliverying this usfull blog..
Spoken English Classes in Bangalore
Spoken English Classes in Chennai
English Speaking Course in Bangalore
Best Spoken English Classes in Bangalore
Spoken English in Bangalore
Spoken English Classes in Marathahalli
AWS Training in Bangalore
Data Science Courses in Bangalore
DevOps Training in Bangalore
DOT NET Training in Bangalore

Laila Thakur said...

Great article. Your blogs are unique and simple that is understood by anyone.

Laila Thakur said...

This is the one of the most important information for me. And I am feeling glad reading your article. The article is really excellent ?kuk ba 2nd year result subject wise

Anonymous said...

Awesome article, it was exceptionally helpful! I simply began in this and I'm becoming more acquainted with it better! Cheers, keep doing awesome!
uok ba 3rd year result 2022