Free and Easy Http Live Streaming

In Windows with a USB Webcam

to

 

With this approach, one can deliver a live stream on a web page from a home server.

A benefit of this approach is presenting a live audio/video feed on a self styled web page entirely

in-house from your home computer to Android, Linux, Windows, IOS, and other devices.

 

The software used is free and the approach is relatively easy.

 

What you will need -

A Web Server

There are many choices. i would suggest two.

Abyss Web Server

- a good lightweight web server.

USB Webserver

- a good lightweight web server with php and mysql.

 

A Live Encoder and Media Server

This approach uses two apps from Unreal Streaming Technologies.

Thier Live Server (a live encoder) and Media Server.

 

A Web Media Player

To include in your web page to play the live stream.

This approach uses Plyr.

To serve up HLS (http live streaming), HLS capability must be added to Plyr.

To use Plyr, download a HLS capable Plyr in a demo web page from me HERE or below.

 

A USB Webcam

To extend the range of your USB webcam, a USB repeater cable with an AC adaptor can be used.

 

Install and Configure Web Server

 

Let's use the Abyss web server. Install using the default settings if you wish.

32bit or 64bit depending on your system. The installer will choose for your type.

You will not need ssl support or asp.net support for this.

 

At the startup configuration prompt choose if you want to start the server manually or

when you logon or whenever the computer starts.

 

Start the web server after installation. Click okay to start the console and your browser will open.

Choose your language. Then enter a login name and password to use. After this is done, you will be prompted

to enter your credentials again to login into the server administration area.

Your server is up and running.

Please notice the port being used is 80.

The folder where you put your web files is called htdocs within the Abyss install folder at C:\Abyss Web Server.

Create a folder within this folder and name it hls.

So the path to the hls folder would be C:\Abyss Web Server\htdocs\hls

To access the web server from your browser, you can type localhost into your browser address window.

You can also enter your computer's internal IP address within your home network.

You will need to know your computer's internal IP address.

To find out what your computers internal IP address is, type into the windows search box, cmd, and hit enter.

This will start a windows program called Command Prompt.

 

In the command window, type in, ipconfig, and hit enter.

Depending on your computer there may be more or less information here.

 

What you look for is your ethernet adaptor or your wifi adaptor. The address you want is the IPv4 Address.

Here mine is 192.168.0.101.

Type that address into your browser and you should get the default web page for your server.

Also take note of the default gateway address. Mine is 192.168.0.1

If i type 192.168.0.1 into my browser, i will get my home router administration page.

Within your router's administration options, you will find a dialogue for opening ports.

You will want to open port 80 for the internal IP address of your computer.

This will be needed for the web server.

While you are there, also open up port 3140 for the internal IP address of your computer.

This will be needed for the unreal media server.

Opening these ports allows these applications to send and receive information from the internet.

 

If all has gone well, you can now access your web server from the internet using your networks public IP address.

To find out what it is, you can type into Google, my ip.

Hopefully when you enter this address into your browser, you will get your web server's default web page.

You're serving to the world!

If you can access your web server from your internal IP address, but not your public IP address.

you may have a firewall blocking the web server or media servers.

Go into your firewall's application control dialogue and grant full access to the Abyss Web Server,

Live Server, and Media Server to send and recieve data from the internet.

If you are having any issues, please contact me or leave a comment.

 

Install and Configure Streaming Servers

Install the Live Server and Media Server from Unreal Streaming Technologies.

The installation is quick and simple.

 

The Live Server captures the output from your webcam and encodes it.

After installation, open up the Live Server Configurator from the start menu.

It will look like this. Configure a new live source.

Right click on Live Sources and select Add new media source.

 

Select Add Video Channel and select your webcam.

i have several video sources available. Yours may list only your webcam and the MMS Client Source.

Be sure no other cam software is running or you will not be able to select your cam.

Click next.

 

Leave the default settings and click next.

 

Choose the resolution of video you wish to stream and the frame rate.

The larger the video and higher the frame rate, the more upstream bandwidth will be needed.

If the frame rate is 15 frames per second, you'll use half the bandwidth.

See how it runs from the web page and try different frame sizes and rates.

This setting seems to work well with a standard high speed cable internet.

 

Add any video transformations you may wish such as a logo, text, or timestamp.

Preview will only work if you have the Unreal Media Player installed.

i think deinterlace has something to do with shoes...

 

Select Add Audio Channel and choose your webcam microphone or other suitable microphone listed and click next.

 

Leave the default settings and click next.

 

 

At the top select Buffered Streaming. At the bottom select IOS/Android mobile devices.

In the middle select Manual and when you do another dialogue will appear.

 

Choose a Bitrate and Sample Rate for AAC audio encoding.

The one i have selected is a good choice. Click on Video Encoding.

 

For Bitrate, choose a rate corresponding to the speed of your internet connection.

The default setting here is shown as 400 kbps or kb/sec.

A high speed cable connection can stream about 1200 kb/sec.

Select 2000 ms for the Maximum time between K-Frames and click OK than click next.

 

Enter a Provider description. Any single word name for your stream will do.

Remember this name and click next.

 

If you wish to record your stream, this dialogue configures it.

 

After clicking on Configure Storage, you will see this additional dialogue.

The root folder is any folder you choose to save the recordings to. Click the button and choose the folder.

Configure the other options to your liking.

Configure MetaData if you wish add an author and comments to the video file's metadata.

(This will not be seen in the video)

Click Ok and Finish.

 

The live server should show your live source as below with what name you chose in the provider description.

The Live Server can be started and stopped from the File menu.

See how easy that was...

It gets even easier from here.

So moving right along,

 

Open up the Media Server Configurator from the start menu.

 

If you click on properties in the file menu, you will see all this gobbledy goop.

You don't have to change anything.

I wanted you to take note of the upper left corner where the ports that are used are listed.

Notice that port 5130 is used for the Live Encoder (Server)

which you opened earlier when configuring the web server port.

 

After closing that dialogue, right click on Live Broadcasts and select New Live Broadcast.

You will see the dialogue below. Choose Static live broadcast.

 

Click Ok and the next dialogue will appear.

The top 3 lines need to be configured.

Live broadcast Alias is the name you gave to your stream in the Live Server configuration under provider description.

The IP address is the internal IP address of your computer which we determined earlier.

The live source ID will be 1.

The description is anything you would like.

 

After clicking Ok, things will look like this.

 

Right click on your stream and choose, Start HLS broadcasting.

 

You will see the dialogue below..

The Web Folder Url is the external IP address of your home network which we determined earlier.

with a forward slash and hls. This points to the hls folder you made earlier in your web server's web folder.

 

The Web folder path is where the hls folder is on your computer and clicking the button will allow you to

navigate to the hls folder and select it.

Click Ok

 

Hopefully you should see HLS in progress in the lower left part of the window.

 

 

If you go to the hls folder in windows explorer you will find several files are there.

You will find .ts files and a .m3u8 file.

Here there are 5 .ts files because if you look at the second picture above, you will see that 5 was

selected as to how many .ts files to keep and for how long.

 

The m3u8 file is like a playlist file for the .ts files and is important in that this is the file you will reference in

the configuration of the web media player on your home server's web page.

 

Pay no attention to the folder address in the window. Yours will be different.

 

see, a piece of cake!

 

 

Now, for the rest of the story...

 

We need to create a web page in your web server's web folder, include the Web Media Player and

configure it to use those .ts files by referencing that .m3u8 file.

 

So please download these demo files, we will make a change to the code and you should be up and running.

 

 

Neatly tucked away inside the demo.zip file you may of just downloaded is a folder called mystream.

Inside are the following files and folders.

Put these files and folders in your web server's web folder.

Overwrite the default index.html file that is there.

You may have already created the hls folder from before, so you don't have to make a new one.

If you click on any of the files below, you will see it's source code, except for the index.html file which

will open the web page, with the player, but no stream. You can then right click to view the source code.

Take a look at hls.js or plyr.js

I'm amazed that people can figure out how to write all that stuff...

 

mystream

index.html
css
plyr.css
style.css
hls
js
hls.js
index.js
plyr.js

 

 

The only change we need to make is within the index.js file which is shown below.

the line of code we are concerned with is this one,

hls.loadSource('http://24.180.215.79/hls/mystream.m3u8');

You must change 24.180.215.79 to your own public IP address found by typing "my ip" into google.

All of these files can be opened in notepad, wordpad, or any text editor. I like Notepad ++

Make the change and you should be ready to stream!

 


(function () {
  var video = document.querySelector('#player');

  if (Hls.isSupported()) {
    var hls = new Hls();
    hls.loadSource('http://24.180.215.79/hls/mystream.m3u8');
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED,function() {
      video.play();
    });
  }
  
  plyr.setup(video);
})();

 

Please note that the name of the .m3u8 file "mystream" is the name you gave to your stream when

configuring the Live Server. Be sure to change it to the name you gave your stream, if it wasn't mystream.