Kurry Tran's Blog: HTTP Live Streaming Tutorial With HTML5 and Ruby Sinatra

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.; September 6, 2015 at 10:22 AM
Unknown said...: Very nice information on HTTP Live Streaming with HTML5.

online HTML5 Training; November 18, 2015 at 5:58 AM
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.; March 3, 2016 at 8:06 PM
SELVIN said...: Thanks for the information ..........
HTML5 Training In Chennai |
HTML5 course In Chennai; August 12, 2018 at 10:58 PM
Aarijali said...: This blog website is pretty cool! How was it made ! Tax Enquiry Accounts; September 21, 2018 at 10:44 AM
seo said...: This blog website is pretty cool! How was it made ! HMRC Tax Enquiry Advice; September 25, 2018 at 10:39 AM
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; October 2, 2018 at 9:51 AM
Aarijali said...: Thankyou for this howling post, I am glad I observed this site on yahoo. Tax Investigation Self Employed; October 4, 2018 at 5:03 PM
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; October 14, 2018 at 1:17 AM
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; December 16, 2018 at 10:59 AM
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; December 17, 2018 at 9:40 PM
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; December 20, 2018 at 11:20 AM
tamsi said...: Best work you have done, this online site is truly cool with incredible certainties. Buy to Let Tax Advisor; December 21, 2018 at 10:33 PM
Unknown said...: Amazing and extremely energizing site. Affection to watch. Continue Rocking. Buy to Let Property Tax Advice London; December 27, 2018 at 5:12 PM
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; December 28, 2018 at 11:04 PM
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; December 31, 2018 at 12:12 AM
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; January 3, 2019 at 1:57 PM
tamsi said...: howdy, your sites are better than average. I value your work. Tax on Buy to Let Property; January 8, 2019 at 12:33 AM
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; January 13, 2019 at 10:33 AM
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; January 17, 2019 at 4:25 PM
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; January 20, 2019 at 12:24 AM
tamsi said...: Howdy! Pleasant post! If you don"t mind let us know when I will see a postliminary! Tax Investigation Specialists; January 23, 2019 at 12:44 AM
Aarij said...: Your site is truly cool and this is an incredible moving article. Tax Investigation Accountants; February 13, 2019 at 1:43 PM
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; February 20, 2019 at 12:19 AM
tamsi said...: Much obliged, that was a truly cool read! Tax Investigation Self Assessment; February 22, 2019 at 5:08 AM
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; February 26, 2019 at 10:04 AM
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; March 3, 2019 at 9:31 AM
Komali said...: Nice Explanation
Click here
Window Phones; April 9, 2019 at 9:42 PM
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; June 9, 2019 at 10:13 PM
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; June 17, 2019 at 10:28 PM
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; June 22, 2019 at 3:45 AM
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; September 19, 2019 at 12:26 AM
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; February 8, 2020 at 2:05 AM
Laila Thakur said...: Great article. Your blogs are unique and simple that is understood by anyone.; July 16, 2022 at 12:14 AM
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; July 25, 2022 at 11:29 PM
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; August 5, 2022 at 12:48 AM