Live-Streaming Site in 30 Mins

In 3 Small Steps

This guide came about when I tried creating a video live-streaming site.

I had started with a harder task: running the live-streaming service on the public internet, both for public viewers and potential streamers.

I’d started with following this guide, but encountered difficulty configuring everything about the networking behind a VPC + loadbalancer.

Instead, I found a much shorter route to my proof-of-concept: running everything locally on my Macbook.

Prerequisites

If not installed already, install:

1. Receive Stream via RTMP (~2mins)

We can use a pre-existing Docker image, tiangolo/nginx-rtmp.

The image contains our prerequisites: nginx + the nginx-rtmp-module plugin.

In your local terminal, run:

$ docker run -d -p 1935:1935 --name nginx-rtmp tiangolo/nginx-rtmp

And to verify that the Docker container is running (in the background):

$ docker ps

You should see output like this:

CONTAINER ID        IMAGE                 COMMAND                  CREATED             STATUS              PORTS                    NAMES
031c98b488b8        tiangolo/nginx-rtmp   "nginx -g 'daemon of…"   30 minutes ago      Up 3 seconds        0.0.0.0:1935->1935/tcp   nginx-rtmp

We now have a server that will now act as a proxy between our video stream:

  1. producer (camera hardware) and
  2. consumers (web player, mobile app, or otherwise).

Next steps…

2. Broadcast Stream via RTMP to Server (~1min)

In OBS, navigate to “Settings” -> “Stream”, and select “Custom” from the dropdown.

Enter rtmp://127.0.0.1/live in the hostname.

Enter test as the streaming key. Note: this key can be modified to support multiple streams.

Click “Ok”, and “Start streaming”.

3. Consume Stream (~2-5mins)

Lastly, create an index.html file in a scratch directory on your filesystem, copy-pasting this content:

<html>
    <head>
        <link href="https://vjs.zencdn.net/7.7.5/video-js.css" rel="stylesheet" />
        <script src="https://vjs.zencdn.net/7.7.5/video.js">&</script>
        <script src="https://cdn.jsdelivr.net/npm/videojs-flash@2/dist/videojs-flash.min.js">&</script>
    </head>
    <body>
        <video id="my-video"
			 class="video-js vjs-default-skin vjs-big-play-centered"
			 controls 
			 autoplay
			 preload="auto" 
			 data-setup='{"techorder" : ["flash","html5] }'>
            <source src="rtmp://127.0.0.1:1935/live/test" type="rtmp/mp4"/>

        </video>

        <script>
          var player = videojs('my-video');
        </script>
    </body>
</html>

If you need help serving the file up to be viewed in your browser, run the following in your terminal in the same directory as your index.html:

$ python -m http.server

Or if you have Python 2:

$ python -m SimpleHttpServer

You can then open the page in your browser at http://localhost:8000/ to see your livestream.

You will need to enable Flash for this page in order for the video player to play (TODO: add details of how to do this in Chrome/Safari/Firefox).

Results

The end resulting livestream in Chrome

Future Goals

  1. Publish stream to a public domain name, e.g live.maxmautner.com
  2. Host the video-player at a public domain name
  3. Remove need for Flash video player (encode from RTMP to HLS)
  4. Implement player in:
    1. Android app
    2. iOS app
    3. TV app?
  5. Load test & identify CDN/scaling costs and options

Resources

· cameras, video-conferencing, video