Question / Help OBS to HTML5 via RTMP

Ayden McIsaac

New Member
Hi all


I am but a meager systems guy. This is my first post on this site.

I work at a high school and for our presentation software for announcements and such we use XSplit. This is similar to OBS and allows us to use a green screen. To share it with the rest of the users on the network, XSplit has a built in webserver which lets users visit a persistent URL and view the the live stream in Flash.

Since Flash is now slowly being shunned by Chrome and will likely go that way with all browsers, the logical next step for anything using Flash seems to be to get to HTML5.

So here I am, trying to get from Point A (OBS/XSplit/presentation software), to Point B (HTML5 code on a website doing <source src="rtmp://mydangRTMPstream" type="">.

Obviously OBS can be output to existing streaming services like Twitch, YouTube, etc. but these lack certain privacy requirements, or persistent url requirements we have. Alternatively you can output to RTMP, but this of course cannot be fed directly into HTML5.

I believe I have to get my RTMP stream somehow converted into something else before I can plug it into HTML5, but not sure what the best thing to use is, and how much coding I would have to do, as I am not a coder.

Has anyone here successfully accomplished what I'm describing? Or know of a tutorial for this adventure?

Thanks
 

wallrik

Member

Ayden McIsaac

New Member
I did figure out how to do what I need, although it is rather roundabout and probably less efficient on resources than using proper coding and use of players. In case anyone wants to know, here is what I did:

1. Setup an RTMP/Nginx server (the tutorial dodge linked above works).
2. Output your OBS stream to your RTMP server
3. Input your RTMP stream into VLC and output to HTTP as Theora+Vorbis(OGG)
4. Plug your http:// stream address from VLC into your HTML code using video src
5. Serve up your HTML with IIS and voila you can have a bunch of local machines viewing your stream in Chrome without trying to display Flash

I am just wondering though, why do all the instructions I find on the internet suggest first outputting your stream to a custom RTMP server. It seems relatively easy for VLC to pipe anything into its own HTTP server in a variety of formats, isn't there an equivalent HTTP media streaming server that deploys as easily as NGinx out there?
 

wallrik

Member
Since nginx is pretty good at also serving HTTP content you can use that server to host everything - rtmp server and http server. No need to set up an IIS server or use VLC.

Like if you first set up a server with something like this,
Code:
rtmp {
    server {
        listen 1935;
        application stream {
            live on;
            meta copy;
            wait_key on;
            wait_video on;
            idle_streams off;
            allow publish 192.168.1.0/24;
            deny publish all;

            hls on;
            hls_path /tmp/hls;
        }
    }
}

And in the very same nginx config you set up your HTTP server (just an example)
Code:
http {
    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;
    server_tokens off;

    include /etc/nginx/mime.types;
    default_type application/octet-stream;

    access_log /var/log/nginx/access.log;
    error_log /var/log/nginx/error.log;

    server {
        listen 80 default_server;
        listen [::]:80 default_server;
        server_name _;

        root /var/www/html;
        index index.html;

        location /hls/ {
            root /tmp;
            add_header Cache-Control no-cache;
        }
    }
}

So the HLS playlist in this example would be created under http://<server>/hls/

I don't remember exactly what the playlist name will be, I think it's the streamkey name with file extension m3u8 but when you run the server you can just check the files being created :) (I'm too lazy to Google it right now)

You will also obviously need to change and set up your own paths. Config is just to illustrate how it can be done :)

Good luck!
 

yvilene

New Member
There are actually two parts to your question.

Once you have a working server you need a webpage that can play the stream without Flash.

There's a bunch of alternatives out there but here's a start:
https://github.com/video-dev/hls.js (there are links here to other players that use hls.js)
https://github.com/videojs/video.js
https://github.com/mediaelement/mediaelement
https://github.com/flowplayer/flowplayer
https://github.com/clappr/clappr
https://github.com/google/shaka-player
Hi, please forgive me for sounding ignorant but the players you mention, can they be used to pull my livestream from obx/nginx/? I'm having a really hard time finding a player to use for streaming a live mp4 video show on my website that doesn't cost a bazillion dollars or doesn't just play already uploaded videos. THANK you.
 
Top