***Guide***How to make your own Streamingplatform like Twitch and Co. using Wordpress, MariaDB, Letsencrypt,nginx-rmtp by alfg


Recommended Posts

****Guide******How to make your own Streamingplattform like Twitch and Co.

 

See Updated New/Infos at the Ende!

 

Project-Prolog:

 

My Goal in this Project was to make a solid Streaming Server with a Website (in some kind of Twitch and Co.) that can only be accessed by my Friends and me and can handle up to 4 or more streams at once. So you may think thats absolut unnecessary and you are right but let‘s getting started anyway 🙂🤪

 

What the Heck do i need for this?

 

1.        A good Server/Pc (in may case a Dell Poweredge R610 with Dual Xeon X5675@3GHZ and 40GB of RAM)

2.       A solid Internetconnection

3.       Of Course a Running Unraid OS

4.       Two subdomains of your choice one for your website and the other for your streaming server (i used no-ip.com)

5.       A Reverse Proxy with Let’s Encrypt ; SpaceinvaderOne has a Great Video Guide

6.       Some Dockercontainers: MariaDB, Wordpress, nginx-rtmp by alfg (https://hub.docker.com/r/alfg/nginx-rtmp/)

7.        Some Friends to Test

8.       A lots of nerves and Time

9.       Friends or yourself for some Desgin stuff for your cool website logo and images

10.     Your choice of Drug to keep you calm like Coffee, Beer, Pizza etc.

 

 

 

The First steps on Wordpress:

 

First of all install MariaDB and make a Database for Wordpress ( i recommend to watch the Video Guide from SpaceInvaderOne How Setup up Nextcloud

 

After you setup MariaDB proberly install Wordpress and Setup your admin account etc..

 

[I First started to build the website with serveral Wordpress-Plugins on my local network. But i recommend to go first with the setup of your Domain for your website via Letsencrypt]

 

Then make your „Resverse Proxy Dockernet“ in Unraid and install Letsencrypt like seen in the Video Guide from SpaceinvaderOne. Enter your Domains in Letsencrypt

 

Move to Wordpress --> Settings--> Generally and change the Wordpress-Adress and the Website-Adress to your domains name like:  https://example.yourdomain.com

grafik.png.abba207d1d50c7ff657e2f10c4f59fa7.png

 

 

(Dont worry if you cant access your Website after Save the changes and refresh; you can change this in the WP Config to your localhost/network back if something goes wrong)

 

Move to the Letsencrypt Appdata Folder -->nginx-->proxy-confs

(Here we have to setup a new config because at the time of writting this guide there was no Wordpress proxy-confs)

 

Make a new text file and enter following:

 

server {
    listen 443 ssl;
    listen [::]:443 ssl;

    server_name yoursubdomain.*; #change this to your subdomain

    include /config/nginx/ssl.conf;

    client_max_body_size 0;

    location / {
        include /config/nginx/proxy.conf;
        resolver 127.0.0.11 valid=30s;
        set $upstream_app Wordpress;
        set $upstream_port 80;
        set $upstream_proto http;
        proxy_pass $upstream_proto://$upstream_app:$upstream_port;

        proxy_max_temp_file_size 2048m;
    }
}

Save the file and rename it to wordpress.subdomain.conf

 

Put Wordpress and Letsencrypt in the same „reverse Proxy Dockernet“ and restart the docker containers. Now u should be able to access your webiste via your Subdomain with SSL Encryption.

 

If you can acces your website the address bar in Firefox should be like this:

grafik.png.f95a9c0ccb6a668c4498f2408c78f30c.png

 

[For sure you can make this all working without SSL but i strongly recommend to go with SSL for Security Reason and for accessability. Because some Browser will otherwise block the content of your website]

 

The Second Steps or the „StreamingServer“ itself:

 

Install the nginx-rtmp Docker Container by alfg via Community Apps (you have to enable the Docker Hub Repo in Unraid in order to find the Container). And Set it up like this:

grafik.png.1118b3e6f65476dcc1783b704592654b.png

 

(Keep in Mind your Docker allocations to setup the ports correct to avoid conflicts)

 

I think you don't need the Container Path „Certs“ since we are using Letsencrypt but i needed it for some testing.

You will need the "Certs" Path. Just Copy the "Certs" Files for your Subdomain (StreamingServerDomain) from LetsEncrypt to this Folder and keep in mind to change the  config below to your Certificate Files location and Name.

 

Then pull and install the container. It is possibly that after your installtion the docker container wont run and you get some Errors. (mostly because a config is missing)

To solve this Problem ove to your Appdata -->nginx-rtmp-->conf and create a new text file and paste the following:

daemon off;
worker_processes  auto;
error_log /dev/stdout info;

events {
    worker_connections 1024;
}

rtmp {
    server {
        listen 1935;
        chunk_size 4000;

        application stream {
            live on;

            exec ffmpeg -i rtmp://localhost:1935/stream/$name
              -c:a libfdk_aac -b:a 128k -c:v libx264 -b:v 2500k -f flv -g 30 -r 30 -s 1280x720 -preset superfast -profile:v baseline rtmp://localhost:1935/hls/$name_720p2628kbs
              -c:a libfdk_aac -b:a 128k -c:v libx264 -b:v 1000k -f flv -g 30 -r 30 -s 854x480 -preset superfast -profile:v baseline rtmp://localhost:1935/hls/$name_480p1128kbs
              -c:a libfdk_aac -b:a 128k -c:v libx264 -b:v 750k -f flv -g 30 -r 30 -s 640x360 -preset superfast -profile:v baseline rtmp://localhost:1935/hls/$name_360p878kbs
              -c:a libfdk_aac -b:a 128k -c:v libx264 -b:v 400k -f flv -g 30 -r 30 -s 426x240 -preset superfast -profile:v baseline rtmp://localhost:1935/hls/$name_240p528kbs
              -c:a libfdk_aac -b:a 64k -c:v libx264 -b:v 200k -f flv -g 15 -r 15 -s 426x240 -preset superfast -profile:v baseline rtmp://localhost:1935/hls/$name_240p264kbs;
        }

        application hls {
            live on;
            hls on;
            hls_fragment_naming system;
            hls_fragment 3;
            hls_playlist_length 20;
            hls_path /opt/data/hls;
            hls_nested on;

            hls_variant _720p2628kbs BANDWIDTH=2628000,RESOLUTION=1280x720;
            hls_variant _480p1128kbs BANDWIDTH=1128000,RESOLUTION=854x480;
            hls_variant _360p878kbs BANDWIDTH=878000,RESOLUTION=640x360;
            hls_variant _240p528kbs BANDWIDTH=528000,RESOLUTION=426x240;
            hls_variant _240p264kbs BANDWIDTH=264000,RESOLUTION=426x240;
        }
    }
}

http {
    access_log /dev/stdout combined;

    ssl_ciphers         HIGH:!aNULL:!MD5;
    ssl_protocols       TLSv1 TLSv1.1 TLSv1.2;
    ssl_session_cache   shared:SSL:10m;
    ssl_session_timeout 10m;

    server {
        listen 80;

        # Uncomment these lines to enable SSL.
        # Update the ssl paths with your own certificate and private key.
         listen 443 ssl;
         ssl_certificate     /opt/certs/example.crt; # Change the Filename to your pasted File from Letsencrypt 
         ssl_certificate_key /opt/certs/example.key; # Change the Filename to your pasted File from Letsencrypt

        location /hls {
            types {
                application/vnd.apple.mpegurl m3u8;
                video/mp2t ts;
            }
            root /opt/data;
            add_header Cache-Control no-cache;
            add_header Access-Control-Allow-Origin *;
        }

        location /live {
          alias /opt/data/hls;
          types {
              application/vnd.apple.mpegurl m3u8;
              video/mp2t ts;
          }
          add_header Cache-Control no-cache;
          add_header Access-Control-Allow-Origin *;
        }

        location /stat {
            rtmp_stat all;
            rtmp_stat_stylesheet static/stat.xsl;
        }

        location /static {
            alias /www/static;
        }

        location = /crossdomain.xml {
            root /www/static;
            default_type text/xml;
            expires 24h;
        }
    }
}

Save it and rename it to „nginx.conf.template“. Then restart your „StreamingServer“. I if it starts you a ready to test the „Streaming Server“ itself.

 

I recommend for Testing purpose to use OBS and VLC-Player.

 

Go in OBS-->Settings-->Stream change Platform to Custom and enter:

rtmp://yourlocalhostip:1935/stream

As Streamkey you can go with anything you wish but you will need it to watch the stream later. So i will go for testing with 1234.

 

Start streaming your Desktop. If you get no Errors from OBS and it looks like this:

grafik.png.0deeea74c72477760ce7882e19baf43c.png

 

You are good to go.

 

While you are streaming open VLC go to Media--> Open Networkstream and add the following:

 

http://<server ip>:8083/live/yourstreamkey.m3u8 #change the port to your added Viewing Port

If you see your stream we are ready for the Final steps.

 

Make your Streamingserver reachable over WWW and SSL Encrypted

 

So now if everything is working we need to make the Streamingserver reachable over the Internet so that your friends can push their streams all over the world to your server. Then we have to make the Streamingserver SSL Encrypted. Why u may ask? Because the most Browser will block your video streams over http in wordpress. So it happend to me and to find this out was a pain in the ***.

 

Trust me …😉

 

First you have to forward the port 1935 on your Router.

 

Then check, if you push your stream over your „Streamingserversubdomain“ comes through to your Streamingserver.

 

In favor to do that change in OBS your „Server“ to:

 

rtmp://subdomainforyourstreamingserver:1935/stream 

Stream and check via VLC like above if you see something.

 

As next step we need to make the SSL encryption working:

 

Go to the Letsencrypt Appdata Folder--> nginx-->proxy-conf and make a new text file and paste the following (since there is no subdomain.conf for the streaming dockercontainer i had to make my own):

 

server {
    listen 443 ssl;
    listen [::]:443 ssl;

    server_name yourdomain.*;  #change this to your subdomain for your streaming server
    

    include /config/nginx/ssl.conf;

    client_max_body_size 0;

    location / {
        include /config/nginx/proxy.conf;
        resolver 127.0.0.11 valid=30s;
        set $upstream_app nginx-rtmp;
        set $upstream_port 443;
        set $upstream_proto https;
        proxy_pass $upstream_proto://$upstream_app:$upstream_port;

        proxy_max_temp_file_size 2048m;
    }
}

Save it and rename it to: nginx-rtmp.subdomain.conf.

 

Set your nginx-rtmp alias your streaming server into the "Reverse Proxy Dockernet".

Restart the Streamingserver and Letsencrypt.

 

Now your video stream should be SSL encrypted.

 

Start a Stream with OBS.

 

To test, take your handy test tool VLC Player and open the following networkstream:

https://yourstreamserversubdomain/live/yourstreamkey.m3u8

Congratulations ! If you see your stream everything is set up and ready to go.

 

Now you can Design your Wordpress page.

 

To Show the Streams on your webpage i recommend Playerjs (Wordpress-plugin). You only need your „watching“ link with the streamkey.

 

Playerjs uses shortcodes. Here an example how the shortcode + your "watching" link should look like:

grafik.png.a96c0b7fd3ea290247bc1f349b836dae.png

 

Multiple Streams

 

If you want that multiple streams can run and be watched you have to setup an individual streamkey for each stream.

 

 

Some Infos:

 

I tested this setup for hours with 4 People pushing theirs Streams at the same time while watching the streams and it worked great.

 

My CPU Usage was at max. 35% -mostly lower-.

All other Containers e.g. Nextcloud, Shinobi etc. worked perfect while streaming and watching.

The Total RAM usage was by 40% ( with all Conatiners and two VMs -Ubuntu and WIN Server2019 – running).

 

For some sort of security and restriction i used a Wordpress Plugin to give the website a Basic http Authentication before you can access the website. For that i used the WP-Plugin „ Frontend HTTP Authentication Protection“.

 

On the Server-Side i recommend a 100Mbits Internetconnection with 40Mbit upload.

On the Client-Side i recommend a 50Mbits Internetconnecntion with min 30 Mbit upload.

 

 

THANKS FOR READING AND HAPPY STREAMING!

PS.: If you have any further questions or need help feel free to contact me i will try my best to help you out.

 

 

PS.: If you have any further questions or need help feel free to contact me i will try my best to help you out.

 

Updates:

 

Update for the Streaming-Server Part:

 

I’m continuous working on the Idea to get a perfect working Streaming Environment in Frontend and Backend Terms. This little Update is about Security in the Streaming Server Part because in the described Guide above we had the issue that the Streamkey was visible to the Public on the Wordpress-site if you dug a bit deeper in. Beside this anyone who knows the streaming server url can push a RTMP-Stream to it. After long way of Researching and Try and Error i came up with the following Solution that could be easy implementend into Existing Instances/Configs (Nginx).

 

Therefor we use “notify_method get,” “on_publish” and create a new location with an if-argument in the http section. (For further information about nginx Directives I recommend to dive into this: https://github.com/arut/nginx-rtmp-module/wiki/Directives )

 

First of all we enable the “notify_method get” in the nginx config under the rtmp-Block:

rtmp {
    server {
        listen 1935;
        chunk_size 4000;
	notify_method get; #####insert this to enable the notify_method.
    
etc.    
.
.
.

 

Then you have to set up on_publish under the hls-application in my case it is called application hls but it could be different Name in your Config.

application hls {
            live on;
	    meta on;
	    wait_key on;
	    on_publish http://localhost/stream_auth; #### set this up, you can change “stream_auth” to whatever you want
            hls on;
            hls_fragment_naming system; ### Recommend
            hls_fragment 1;
            hls_playlist_length 4;
            hls_path /opt/data/hls;
            hls_nested on;
	    deny play all;  ##### Disable to View the Stream in raw RTMP

            hls_variant _720p2628kbs BANDWIDTH=2628000,RESOLUTION=1280x720;
            hls_variant _480p1128kbs BANDWIDTH=1128000,RESOLUTION=854x480;
            hls_variant _360p878kbs BANDWIDTH=878000,RESOLUTION=640x360;
            hls_variant _240p528kbs BANDWIDTH=528000,RESOLUTION=426x240;
            hls_variant _240p264kbs BANDWIDTH=264000,RESOLUTION=426x240;
        }
  }

 

Then we move over to our http{} section and under server{} we create a new location with the name we had given a step before.

 

location /stream_auth {			#### the name that we set above
        if ($arg_psk = "streamkey") {	###in here we define our streamkey
          return 201;
        }

          return 404;
}

 

What we did was to create a little Function that check the Streamkey in the pushed stream. If it is the Same the Server return an http 201 code and starts the stream if not it return http code 404 an you can’t push your stream.

 

To Push a Stream for example over OBS you have to use the following scheme as streamkey:

streamname?psk=streamkey

 

“Streamname” cloud be anything you want.

“Streamkey” must be the setted key in your conf otherwise you can't stream.

 

So it looks like this in OBS:

 

grafik.png.52961bbab4831a93a7c9c6f172cbb1dd.png

 

To watch the Stream you have to use the following scheme:

 

https://yoursubdomain.yourstreamserverdomain.de/live/streamname/index.m3u8

(to point out the difference in the previous Settings above to wathc the stream you had to use the following scheme:

 

https://yoursubdomain.yourstreamserverdomain.de/live/streamname/streamkey.m3u8

 

)

 

That’s it.

If you want to or have the Skill you can set as location a PHP-App/Script for Authentification or even more.

I’m actually in the development of a Backend in PHP and MySQL, so you can sign up, get a random generated streamkey and streamname which is checked, so there is no StreamingKey “Hardcoded” in the config.

 

Streamserver Tuning:

Besides that I was disappointed about the delay of my Stream. To minize that I changed in the configs the following:

application hls {
            live on;
	    meta on;
	    wait_key on;
	    on_publish http://localhost/stream_auth;
            hls on;
            hls_fragment_naming system;
            hls_fragment 1;  #### changed this to 1
            hls_playlist_length 4; #### changed this to 4
            hls_path /opt/data/hls;
            hls_nested on;
	    deny play all;

            hls_variant _720p2628kbs BANDWIDTH=2628000,RESOLUTION=1280x720;
            hls_variant _480p1128kbs BANDWIDTH=1128000,RESOLUTION=854x480;
            hls_variant _360p878kbs BANDWIDTH=878000,RESOLUTION=640x360;
            hls_variant _240p528kbs BANDWIDTH=528000,RESOLUTION=426x240;
            hls_variant _240p264kbs BANDWIDTH=264000,RESOLUTION=426x240;
        }

 

Now my stream are delayed with 5-8secs instead of 30secs-60secs.

 

If you want to know more or need help feel free to Contact me. (English or German).

Thanks for reading and Happy streaming.

 

Edited by DasNekuum
Added a Update Section and insert a Update to the Guide
  • Like 1
Link to comment
  • 3 weeks later...
On 3/11/2020 at 4:08 PM, DasNekuum said:

****Guide******How to make your own Streamingplattform like Twitch and Co.

 

Project-Prolog:

 

My Goal in this Project was to make a solid Streaming Server with a Website (in some kind of Twitch and Co.) that can only be accessed by my Friends and me and can handle up to 4 or more streams at once. So you may think thats absolut unnecessary and you are right but let‘s getting started anyway 🙂🤪

 

What the Heck do i need for this?

 

1.        A good Server/Pc (in may case a Dell Poweredge R610 with Dual Xeon X5675@3GHZ and 40GB of RAM)

2.       A solid Internetconnection

3.       Of Course a Running Unraid OS

4.       Two subdomains of your choice one for your website and the other for your streaming server (i used no-ip.com)

5.       A Reverse Proxy with Let’s Encrypt ; SpaceinvaderOne has a Great Video Guide

6.       Some Dockercontainers: MariaDB, Wordpress, nginx-rtmp by alfg (https://hub.docker.com/r/alfg/nginx-rtmp/)

7.        Some Friends to Test

8.       A lots of nerves and Time

9.       Friends or yourself for some Desgin stuff for your cool website logo and images

10.     Your choice of Drug to keep you calm like Coffee, Beer, Pizza etc.

 

 

 

The First steps on Wordpress:

 

First of all install MariaDB and make a Database for Wordpress ( i recommend to watch the Video Guide from SpaceInvaderOne How Setup up Nextcloud

 

After you setup MariaDB proberly install Wordpress and Setup your admin account etc..

 

[I First started to build the website with serveral Wordpress-Plugins on my local network. But i recommend to go first with the setup of your Domain for your website via Letsencrypt]

 

Then make your „Resverse Proxy Dockernet“ in Unraid and install Letsencrypt like seen in the Video Guide from SpaceinvaderOne. Enter your Domains in Letsencrypt

 

Move to Wordpress --> Settings--> Generally and change the Wordpress-Adress and the Website-Adress to your domains name like:  https://example.yourdomain.com

grafik.png.abba207d1d50c7ff657e2f10c4f59fa7.png

 

 

 

(Dont worry if you cant access your Website after Save the changes and refresh; you can change this in the WP Config to your localhost/network back if something goes wrong)

 

Move to the Letsencrypt Appdata Folder -->nginx-->proxy-confs

(Here we have to setup a new config because at the time of writting this guide there was no Wordpress proxy-confs)

 

Make a new text file and enter following:

 


server {
    listen 443 ssl;
    listen [::]:443 ssl;

    server_name yoursubdomain.*; #change this to your subdomain

    include /config/nginx/ssl.conf;

    client_max_body_size 0;

    location / {
        include /config/nginx/proxy.conf;
        resolver 127.0.0.11 valid=30s;
        set $upstream_app Wordpress;
        set $upstream_port 80;
        set $upstream_proto http;
        proxy_pass $upstream_proto://$upstream_app:$upstream_port;

        proxy_max_temp_file_size 2048m;
    }
}

Save the file and rename it to wordpress.subdomain.conf

 

Put Wordpress and Letsencrypt in the same „reverse Proxy Dockernet“ and restart the docker containers. Now u should be able to access your webiste via your Subdomain with SSL Encryption.

 

If you can acces your website the address bar in Firefox should be like this:

grafik.png.f95a9c0ccb6a668c4498f2408c78f30c.png

 

[For sure you can make this all working without SSL but i strongly recommend to go with SSL for Security Reason and for accessability. Because some Browser will otherwise block the content of your website]

 

The Second Steps or the „StreamingServer“ itself:

 

Install the nginx-rtmp Docker Container by alfg via Community Apps. And Set it up like this:

grafik.png.1118b3e6f65476dcc1783b704592654b.png

 

(Keep in Mind your Docker allocations to setup the ports correct to avoid conflicts)

 

I think you don't need the Container Path „Certs“ since we are using Letsencrypt but i needed it for some testing.

 

Then pull and install the container. It is possibly that after your installtion the docker container wont run and you get some Errors. (mostly because a config is missing)

To solve this Problem ove to your Appdata -->nginx-rtmp-->conf and create a new text file and paste the following:


daemon off;
worker_processes  auto;
error_log /dev/stdout info;

events {
    worker_connections 1024;
}

rtmp {
    server {
        listen 1935;
        chunk_size 4000;

        application stream {
            live on;

            exec ffmpeg -i rtmp://localhost:1935/stream/$name
              -c:a libfdk_aac -b:a 128k -c:v libx264 -b:v 2500k -f flv -g 30 -r 30 -s 1280x720 -preset superfast -profile:v baseline rtmp://localhost:1935/hls/$name_720p2628kbs
              -c:a libfdk_aac -b:a 128k -c:v libx264 -b:v 1000k -f flv -g 30 -r 30 -s 854x480 -preset superfast -profile:v baseline rtmp://localhost:1935/hls/$name_480p1128kbs
              -c:a libfdk_aac -b:a 128k -c:v libx264 -b:v 750k -f flv -g 30 -r 30 -s 640x360 -preset superfast -profile:v baseline rtmp://localhost:1935/hls/$name_360p878kbs
              -c:a libfdk_aac -b:a 128k -c:v libx264 -b:v 400k -f flv -g 30 -r 30 -s 426x240 -preset superfast -profile:v baseline rtmp://localhost:1935/hls/$name_240p528kbs
              -c:a libfdk_aac -b:a 64k -c:v libx264 -b:v 200k -f flv -g 15 -r 15 -s 426x240 -preset superfast -profile:v baseline rtmp://localhost:1935/hls/$name_240p264kbs;
        }

        application hls {
            live on;
            hls on;
            hls_fragment_naming system;
            hls_fragment 3;
            hls_playlist_length 20;
            hls_path /opt/data/hls;
            hls_nested on;

            hls_variant _720p2628kbs BANDWIDTH=2628000,RESOLUTION=1280x720;
            hls_variant _480p1128kbs BANDWIDTH=1128000,RESOLUTION=854x480;
            hls_variant _360p878kbs BANDWIDTH=878000,RESOLUTION=640x360;
            hls_variant _240p528kbs BANDWIDTH=528000,RESOLUTION=426x240;
            hls_variant _240p264kbs BANDWIDTH=264000,RESOLUTION=426x240;
        }
    }
}

http {
    access_log /dev/stdout combined;

    ssl_ciphers         HIGH:!aNULL:!MD5;
    ssl_protocols       TLSv1 TLSv1.1 TLSv1.2;
    ssl_session_cache   shared:SSL:10m;
    ssl_session_timeout 10m;

    server {
        listen 80;

        # Uncomment these lines to enable SSL.
        # Update the ssl paths with your own certificate and private key.
         listen 443 ssl;
         ssl_certificate     /opt/certs/example.crt;
         ssl_certificate_key /opt/certs/example.key;

        location /hls {
            types {
                application/vnd.apple.mpegurl m3u8;
                video/mp2t ts;
            }
            root /opt/data;
            add_header Cache-Control no-cache;
            add_header Access-Control-Allow-Origin *;
        }

        location /live {
          alias /opt/data/hls;
          types {
              application/vnd.apple.mpegurl m3u8;
              video/mp2t ts;
          }
          add_header Cache-Control no-cache;
          add_header Access-Control-Allow-Origin *;
        }

        location /stat {
            rtmp_stat all;
            rtmp_stat_stylesheet static/stat.xsl;
        }

        location /static {
            alias /www/static;
        }

        location = /crossdomain.xml {
            root /www/static;
            default_type text/xml;
            expires 24h;
        }
    }
}

Save it and rename it to „nginx.conf“. Then restart your „StreamingServer“. I if it starts you a ready to test the „Streaming Server“ itself.

 

I recommend for Testing purpose to use OBS and VLC-Player.

 

Go in OBS-->Settings-->Stream change Platform to Custom and enter:


rtmp://yourlocalhostip:1935/stream

As Streamkey you can go with anything you wish but you will need it to watch the stream later. So i will go for testing with 1234.

 

Start streaming your Desktop. If you get no Errors from OBS and it looks like this:

grafik.png.0deeea74c72477760ce7882e19baf43c.png

 

You are good to go.

 

While you are streaming open VLC go to Media--> Open Networkstream and add the following:

 


http://<server ip>:8083/live/yourstreamkey.m3u8 #change the port to your added Viewing Port

If you see your stream we are ready for the Final steps.

 

Make your Streamingserver reachable over WWW and SSL Encrypted

 

So now if everything is working we need to make the Streamingserver reachable over the Internet so that your friends can push their streams all over the world to your server. Then we have to make the Streamingserver SSL Encrypted. Why u may ask? Because the most Browser will block your video streams over http in wordpress. So it happend to me and to find this out was a pain in the ***.

 

Trust me …😉

 

First you have to forward the port 1935 on your Router.

 

Then check, if you push your stream over your „Streamingserversubdomain“ comes through to your Streamingserver.

 

In favor to do that change in OBS your „Server“ to:

 


rtmp://subdomainforyourstreamingserver:1935/stream 

Stream and check via VLC like above if you see something.

 

As next step we need to make the SSL encryption working:

 

Go to the Letsencrypt Appdata Folder--> nginx-->proxy-conf and make a new text file and paste the following (since there is no subdomain.conf for the streaming dockercontainer i had to make my own):

 


server {
    listen 443 ssl;
    listen [::]:443 ssl;

    server_name yourdomain.*;  #change this to your subdomain for your streaming server
    

    include /config/nginx/ssl.conf;

    client_max_body_size 0;

    location / {
        include /config/nginx/proxy.conf;
        resolver 127.0.0.11 valid=30s;
        set $upstream_app nginx-rtmp;
        set $upstream_port 443;
        set $upstream_proto https;
        proxy_pass $upstream_proto://$upstream_app:$upstream_port;

        proxy_max_temp_file_size 2048m;
    }
}

Save it and rename it to: nginx-rtmp.subdomain.conf.

 

Set your nginx-rtmp alias your streaming server into the "Reverse Proxy Dockernet".

Restart the Streamingserver and Letsencrypt.

 

Now your video stream should be SSL encrypted.

 

Start a Stream with OBS.

 

To test, take your handy test tool VLC Player and open the following networkstream:


https://yourstreamserversubdomain/live/yourstreamkey.m3u8

Congratulations ! If you see your stream everything is set up and ready to go.

 

Now you can Design your Wordpress page.

 

To Show the Streams on your webpage i recommend Playerjs (Wordpress-plugin). You only need your „watching“ link with the streamkey.

 

Playerjs uses shortcodes. Here an example how the shortcode + your "watching" link should look like:

grafik.png.a96c0b7fd3ea290247bc1f349b836dae.png

 

Multiple Streams

 

If you want that multiple streams can run and be watched you have to setup an individual streamkey for each stream.

 

 

Some Infos:

 

I tested this setup for hours with 4 People pushing theirs Streams at the same time while watching the streams and it worked great.

 

My CPU Usage was at max. 35% -mostly lower-.

All other Containers e.g. Nextcloud, Shinobi etc. worked perfect while streaming and watching.

The Total RAM usage was by 40% ( with all Conatiners and two VMs -Ubuntu and WIN Server2019 – running).

 

For some sort of security and restriction i used a Wordpress Plugin to give the website a Basic http Authentication before you can access the website. For that i used the WP-Plugin „ Frontend HTTP Authentication Protection“.

 

On the Server-Side i recommend a 100Mbits Internetconnection with 40Mbit upload.

On the Client-Side i recommend a 50Mbits Internetconnecntion with min 30 Mbit upload.

 

 

THANKS FOR READING AND HAPPY STREAMING!

PS.: If you have any further questions or need help feel free to contact me i will try my best to help you out.

 

 

PS.: If you have any further questions or need help feel free to contact me i will try my best to help you out.

 

 

Hi for the purpose of understanding, I have been trying to get just the streaming server working, I am not using MariaDB, WordPress, nor nextcloud, I just need to run the Rmtp to stream from OBS. I have followed your tutorial, not bad by the way, however I keep getting errors in the docker log show below, also my settings.

 

I can only assume it is the nginx.conf, plus the docker does not start

any hints on what i may be doing wrong

 

any help is very welcome I am losing the will to live

 

 image.thumb.png.11cec876c9482635d82cc1fbf88d87c3.png

 

image.png.a9a7c6a4fbbd18760e5b4a0f4f3986a4.png

Link to comment
3 hours ago, Danietech said:

 

Hi for the purpose of understanding, I have been trying to get just the streaming server working, I am not using MariaDB, WordPress, nor nextcloud, I just need to run the Rmtp to stream from OBS. I have followed your tutorial, not bad by the way, however I keep getting errors in the docker log show below, also my settings.

 

I can only assume it is the nginx.conf, plus the docker does not start

any hints on what i may be doing wrong

 

any help is very welcome I am losing the will to live

 

 image.thumb.png.11cec876c9482635d82cc1fbf88d87c3.png

 

image.png.a9a7c6a4fbbd18760e5b4a0f4f3986a4.png

Hey there i'm glad you like this Tutorial. Yeah the Problem is indeed the config file. Just right after my Guide a update appeared. You have to change your config file name to "nginx.conf.template". Be sure there is no other config in the folder and then start your container. Now it should run and you have two conf files in your Directorie. If you want to do any changes in the config file, you have to do the changes in the nginx.conf.template and delete the "old" nginx.conf.

Link to comment
  • 3 weeks later...

Thank you for this. I was able to get everything setup using this tutorial. 
A couple gotchas that I figured I'd point out. 

The nginx-rtmp container is not available in community apps without enabling the docker hub repo. 
I would also recommend making it more clear that you will need to copy your crt and key from your letsencrypt appdata to the keys folder in nginx-rtmp and change the file names in the config file. 

Other than that, I found it very easy to follow. 

Thanks!

  • Like 1
Link to comment
  • 5 months later...
  • 1 year later...
On 11/2/2021 at 9:15 PM, Skippyo said:

Hello how do i set it up with my domain not just subdomain? so its just www.domain.com not www.stream.domain.com

 

the "www "in your www.domain.com is your subdomain. So instead of using www.stream.domain.com use "www.domain.com" or "stream.domain.com" Example:

 

In your Swag/LetsEncrypt Proxy Conf:

 

    server_name yourdomain.*;  #change this to your subdomain for your streaming server <----here you put in your subdomain  just the "www." or "stream." or whatever subdomain you want

 

but i recommend a different subdomain for the stream server if you want to build it like i did.

 

Hope i could help.
   

Link to comment

thank you i have the website in wordpress up and running but when i try the local stream on vlc i get this error in nginx-rtmp

[info] 14#14: *64 recv() failed (104: Connection reset by peer) while reading client request line, client: 10.0.0.6, server: , request: "tp�u�A�=�.����6�z���]G���,��m.:�,̩���"

Link to comment
16 hours ago, Skippyo said:

thank you i have the website in wordpress up and running but when i try the local stream on vlc i get this error in nginx-rtmp

[info] 14#14: *64 recv() failed (104: Connection reset by peer) while reading client request line, client: 10.0.0.6, server: , request: "tp�u�A�=�.����6�z���]G���,��m.:�,̩���"

it seems that you used the wrong link in VLC. Provided that nginx had been setup correctly you have to use this pattern in VLC :

 

https://yourstreamserversubdomain/live/yourstreamkey.m3u8

 

"yourstreamserversubdomain" cloud also be IP-Adresss:Port

 

"yourstreamkey" had been defined by you in OBS

 

Can you verify that OBS is pushing out your stream?

 

If this doesn't helped you, please check the Guide again and look in Config Files for Typos.

Link to comment

Yes i can connect with obs and i use https://10.0.0.16:8083/live/test.m3u8 in VLC to try and watch but i still get the same error.

here are my config for nginx-rtmp. and btw how do i add 1080p 60 :P really new to unraid and coding 

daemon off;
worker_processes  auto;
error_log /dev/stdout info;

events {
    worker_connections 1024;
}

rtmp {
    server {
        listen 1935;
        chunk_size 4000;

        application stream {
            live on;

            exec ffmpeg -i rtmp://localhost:1935/stream/$name
              -c:a libfdk_aac -b:a 128k -c:v libx264 -b:v 2500k -f flv -g 30 -r 30 -s 1280x720 -preset superfast -profile:v baseline rtmp://localhost:1935/hls/$name_720p2628kbs
              -c:a libfdk_aac -b:a 128k -c:v libx264 -b:v 1000k -f flv -g 30 -r 30 -s 854x480 -preset superfast -profile:v baseline rtmp://localhost:1935/hls/$name_480p1128kbs
              -c:a libfdk_aac -b:a 128k -c:v libx264 -b:v 750k -f flv -g 30 -r 30 -s 640x360 -preset superfast -profile:v baseline rtmp://localhost:1935/hls/$name_360p878kbs
              -c:a libfdk_aac -b:a 128k -c:v libx264 -b:v 400k -f flv -g 30 -r 30 -s 426x240 -preset superfast -profile:v baseline rtmp://localhost:1935/hls/$name_240p528kbs
              -c:a libfdk_aac -b:a 64k -c:v libx264 -b:v 200k -f flv -g 15 -r 15 -s 426x240 -preset superfast -profile:v baseline rtmp://localhost:1935/hls/$name_240p264kbs;
        }

        application hls {
            live on;
            hls on;
            hls_fragment_naming system;
            hls_fragment 3;
            hls_playlist_length 20;
            hls_path /opt/data/hls;
            hls_nested on;

            hls_variant _720p2628kbs BANDWIDTH=2628000,RESOLUTION=1280x720;
            hls_variant _480p1128kbs BANDWIDTH=1128000,RESOLUTION=854x480;
            hls_variant _360p878kbs BANDWIDTH=878000,RESOLUTION=640x360;
            hls_variant _240p528kbs BANDWIDTH=528000,RESOLUTION=426x240;
            hls_variant _240p264kbs BANDWIDTH=264000,RESOLUTION=426x240;
        }
    }
}

http {
    access_log /dev/stdout combined;

    ssl_ciphers         HIGH:!aNULL:!MD5;
    ssl_protocols       TLSv1 TLSv1.1 TLSv1.2;
    ssl_session_cache   shared:SSL:10m;
    ssl_session_timeout 10m;

    server {
        listen 80;

        # Uncomment these lines to enable SSL.
        # Update the ssl paths with your own certificate and private key.
         listen 443 ssl;
         ssl_certificate     /opt/certs/cert.crt; # Change the Filename to your pasted File from Letsencrypt 
         ssl_certificate_key /opt/certs/cert.key; # Change the Filename to your pasted File from Letsencrypt

        location /hls {
            types {
                application/vnd.apple.mpegurl m3u8;
                video/mp2t ts;
            }
            root /opt/data;
            add_header Cache-Control no-cache;
            add_header Access-Control-Allow-Origin *;
        }

        location /live {
          alias /opt/data/hls;
          types {
              application/vnd.apple.mpegurl m3u8;
              video/mp2t ts;
          }
          add_header Cache-Control no-cache;
          add_header Access-Control-Allow-Origin *;
        }

        location /stat {
            rtmp_stat all;
            rtmp_stat_stylesheet static/stat.xsl;
        }

        location /static {
            alias /www/static;
        }

        location = /crossdomain.xml {
            root /www/static;
            default_type text/xml;
            expires 24h;
        }
    }
}

 

 

Link to comment

So i have setup quick a "Streamserver" and with the quick setup it works fine but i didn't use SSL. I just commented the SSL Section in den Conf of nginx out.

 

So maybe your ssl_certifacte are wrong or you have none or use the domain-name instead of the IP.

 

Anyway to test if besides this everything works fine just comment the following section out :

        # Uncomment these lines to enable SSL.
        # Update the ssl paths with your own certificate and private key.
         listen 443 ssl;
         ssl_certificate     /opt/certs/cert.crt; # Change the Filename to your pasted File from Letsencrypt 
         ssl_certificate_key /opt/certs/cert.key; # Change the Filename to your pasted File from Letsencrypt

 

after this restart everything and use in VLC:  http://server-ip:8083/live/test.m3u8 instead of https.

 

After testing i recommend to setup SSL for your "streamserver".

 

Let me know if you have success.

 

Cheers :)

 

Link to comment

ye the problem is SSL tried http and it worked great. this is my conf in nginx (Swag) 

server {
    listen 443 ssl;
    listen [::]:443 ssl;

    server_name www.*;  #change this to your subdomain for your streaming server
    

    include /config/nginx/ssl.conf;

    client_max_body_size 0;

    location / {
        include /config/nginx/proxy.conf;
        resolver 127.0.0.11 valid=30s;
        set $upstream_app nginx-rtmp;
        set $upstream_port 443;
        set $upstream_proto https;
        proxy_pass $upstream_proto://$upstream_app:$upstream_port;

        proxy_max_temp_file_size 2048m;
    }
}

 

Link to comment

Your Swag Conf looks okay.

I think the Problem is in the Conf of your Streaming server. You know have to use the outcommented Section to enable SSL.  Just Copy the "Certs" Files (Cert.crt and Cert.key)  from Swag (you will find them under /swag/keys)  to Cert-Folder in nginx-rtmp and keep in mind to change the  config to your Certificate Files location and Name if needed and don't forget to uncomment in the rtmp-conf. Then your streaming server should work fine provided you forwared all necessary Ports and the Docker Container is in the right Network.

 

 

Link to comment
7 hours ago, DasNekuum said:

Didn't even knew until now about Owncast. It seems with a quick research that it is a custom build without the nginx-rtmp modul but can't verify this. In Owncast you have also WebChat. I will take a deeper look into this. Thanks for the hint.

I also created a Container that is available in the CA App with Intel iGPU and NVENC hardware transcoding support. :)

 

Really easy to set up. ;)

Link to comment
9 minutes ago, ich777 said:

I also created a Container that is available in the CA App with Intel iGPU and NVENC hardware transcoding support. :)

 

Really easy to set up. ;)

Yeah. Tested it. Nice work btw :). But big con for me was that there was no option for multiple streams. So i think i will stick with nginx :)

Link to comment
On 11/12/2021 at 6:47 PM, ich777 said:

I think I don't understand completely... You can create two containers or do you want two streams on one site?

Sent from my C64
 

With the nginx-modul (in this case as docker-container) i can set up multiple streams for multiple users to stream at the same time. I know i can create just more container but this fits not for me because i don't want 5 or even more container to maintain in Unraid. But Thanks for the Input :) and thanks for your work in the CA.

  • Like 1
Link to comment

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.