How to Live Stream on Linux

linux-live-streaming-header

This post will take you through the process of how to live stream on Linux, by creating a simple live stream player page in a Linux environment.  This example uses a web server, a MetaCDN account and some open source goodies.

Ingredients:

  • 1 x Linux machine (My development box, running Ubuntu 12.04).
  • 1 x Photo of a TV.
  • 1 x Accessible web server ( in our case, running apache – http://httpd.apache.org).
  • 1 x MetaCDN live streaming account (www.metacdn.com).
  • 1 x Text Editor Of Your Choice (vim).
  • 1 x GIMP.  No, not a person with a physical impairment – we’re talking about the GNU Image Manipulation Program. (http://www.gimp.org).
  • 1 x FFMPEG (https://www.ffmpeg.org).

Using the swiss army knife of video (ffmpeg), you can easily  capture a variety of sources and transcode video ready for live streaming.  It doesn’t have to be the droll output from your webcam, anything that ffmpeg can swallow and transcode (e.g. static video files, ip webcam feeds) can be sent to our system and broadcast to all and sundry.

Step 1.  Create your stream.

First, we create our MetaCDN Live Stream.  We don’t want to chew up too much of the office upload bandwidth so we’ll only use two qualities – 400kbit and 600kbit.  It takes about 10 minutes to provision the stream once submitted, so we will create the stream first and build the viewer page while the stream provisions.

Create that live stream

Step 2.  Prepare the player page.

Lacking a better option, I grabbed a photo of the office TV for the player background.  We’ll shape the embeddable player to fit where the TV screen is, for a bit of a lounge room effect.

Once we have our photo, use GIMP to crop it to 1920×1080 pixels and compress the hell out of it to lower the load time.

Next step is to upload the processed photo to the MetaCDN system.  From there, we can provision the file to the MetaCDN CDN (say that a few times fast) as a static file.  Once provisioned, we can use the CDN file link to give us ‘lightning’ fast access to the file data.

Upload the file to the file bucket area (basically a dedicated area where you can upload any type of file for later processing).

fileupload

Now the file is in the bucket, we can use it as a source for a static file upload.  This will provision the file on the CDN and spit out a file link.

Provision a Static CDN file.
Use the uploaded image file
Use the uploaded image file from our bucket as the source.
staticdepurl
Bam.  Grab that CDN file url.

Next, we whip up a HTML page which will contain the live stream player.  It is a dead-simple page with a single div of width 1920px, height 1080px.   Create a background-image css entry for the div and use the CDN url to our photo as the source.

streamhtml

The result so far: http://stubby.metacdn.com/livestreamdemo/livestream_early

Step 3.  Embed the live stream player.

Now we have our background, let’s grab the live stream player embed HTML and place it in our player page.  For effect, we’ll size the player to fit where the TV screen is on the photo.

The embed HTML is accessed by navigating to the live stream list in the MetaCDN portal. By clicking on the triangle to the right of our stream, all the technical details relating to our stream are revealed.

Note there are some fields here – the MetaCDN URL can be used to preview the player (It’s covered with our branding so unless you want to give us free advertising, you probably don’t want to send this around).  With this, you can check that your stream is playable when you start your broadcast.

The Embed Code is what we will be using for the player page.  It is a HTML snippet consisting of an iframe housing our player.

The Facebook Metadata consists of some tags that I will add to the head element of the player page, so I can embed the page in Facebook and it will display nicely in the feed listing alongside all the other trash posted there. Note that you will have to click on the use HTTPS checkbox before copying the metadata, as Facebook requires HTTPS connections.

Stream details ahoy.
Stream details ahoy.

After some fluffing about with the iframe size and positioning, we have our player neatly embedded in the image where the TV screen is.  The final markup:

finalmarkup
mmmm. HTML.

Last step.  Broadcast.

Ok, the playback page is ready to go – It’s broadcast time.  Fire up ffmpeg.  There isn’t much to it for our example(but the devil is in the details, of course):

ffmpeg - GoPro input file, 2 output streams to the MetaCDN publishing point.
ffmpeg – GoPro input file, 2 output streams to the MetaCDN publishing point.

Note that the numbers match up with our live stream definitions from before.  One input file and two output streams (480×270 @ 400kbit, 960×540 @ 600kbit).

If working correctly, your term will be showing ffmpeg output diagnostics and magic will be happening.  To test, we’ll use the MetaCDN URL to view and press play on the player:

Press kangaroo's snout to watch the stream.
Press kangaroo’s snout to watch the stream.

Viewing.  The End.

We’re done!  Now point your browser at the player page to behold the final result:

http://stubby.metacdn.com/livestreamdemo/livestream

After making some mods to the broadcast script, the server is now looping through streaming a bunch of demo files.  If you’ve hit rock bottom and have nothing better to do with your life, be our guest and watch them all.  There’s some footage on show from around Melbourne, Australia (and Big Buck Bunny, for good measure).

In a future issue, we’ll talk about adding embed restrictions to limit the player views to our server.  Until then, happy Linux streaming!

Share this postShare on Facebook2Tweet about this on TwitterShare on Google+1Share on LinkedIn2