Question / Help Live Streaming to a browser

3DFun · May 13, 2014

Hello,

I'm doing some research and am looking for the easiest way to live stream whats on one computer to another computer..
OBS looks like the tool I need.

I don't want to have to use a twitch or anything similar.

Is it possible to directly stream from OBS to a browser?

If not is there something I can install locally on the same computer (win 7 64bit) that can act as a server I can send a custom live stream to? Then the browser could connect to that?

Thanks in advance for any help you can offer.

flavored · May 13, 2014

No, direct streaming to a browser isn't not possible afaik.

From what you're describing you'd need to set up an rmtp server ( https://obsproject.com/forum/threads/how-to-set-up-your-own-private-rtmp-server-using-nginx.12891/ ) and then make an html page with a player that can connect to the rtmp server.

3DFun · May 13, 2014

Thanks Flavored.
Yes, I saw that nginx option.

Thats another server to configure which I was trying to avoid.

I guess I was hoping someone made plug in that could do it.

I'm not sure what the plugin architecture is but I would assume a websocket based plugin should be pretty easy to code which I would hope makes it easy for HTML5 compliant browsers to view videostreams.

When I saw the OBS remote I thought I found it but it still needs you to configure a server to stream too.

Any other options or is RMTP on nginx it?
Is there an nginx equiv for windows 7 64bit? That would at least save me having to find another server.

flavored · May 13, 2014

there is an nginx build for windows with all the necessary plugins
using the guide above there is pretty much nothing else to confige and it works straight up in 5 minutes
extremely resource light

3DFun · May 13, 2014

NginX for windows....
How did I miss that!

Thank again Flavored. :)

3DFun · May 14, 2014

I could not find a windows build of nginx that included rtmp.
Am I yet again missing something obvious?

Sapiens · May 14, 2014

http://nginx-win.ecsds.eu/

3DFun · May 14, 2014

Thank you.
I have it streaming now.
Nginx is logging the successful stream.

Now my last step is to get the live stream displayed in a browser.

In OBS I have configured custom settings of:

Server: rtmp://192.168.1.108:9092/live
key: test

In nginx config file I have:

Code:

rtmp {
        server {
                listen 1935;
                chunk_size 4096;

                application live {
                        live on;
                        record off;
                }
        }
}

I've seen example for jw player but if you know something better to get working in a browser please let me know.
In browser I have configured jwplayer as such:

Code:

<script>
    jwplayer("myElement").setup({
    file: "rtmp://192.168.1.108:9092/live/flv:test",
    height: 360,
    width: 640
});

Jack0r · May 14, 2014

Hmm, you stream to port 9092 but listen on port 1935 in the server. Did you set a port forward so that works or?
Apart of that the jwplayer setup looks fine.

One thing noone mentioned so far, you will only be able to supply a small amount of viewers with a stream. The amount depends on your upload speed.

I also made some nginx related guides if you plan to do more in the future: http://www.helping-squad.com/wp/server/

3DFun · May 15, 2014

My mad I pasted the original code not what I am using in the config file for nginx
I am listening on 9092.

Code:

rtmp {
        server {
                listen 9092;
                chunk_size 4096;

                application live {
                        live on;
                        record off;
                }
        }
}

3DFun · May 15, 2014

Hello,

I think I'm very close but there is just something not working I believe in the way I am using the JW Player.
Please let me know what I am doing wrong:

JW Player Setup:

Code:

<script type='text/javascript'>
    jwplayer("myElement").setup({
    file: "rtmp://192.168.1.108:9092/live/flv:test",
    height: 1200,
    width: 1920
});

nginx config file:

Code:

#user  nobody;
# multiple workers works !
worker_processes  2;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  8192;
    # max value 16384, nginx recycling connections+registry optimization = 
    #   this.value * 20 = max concurrent connections currently tested with one worker
    #   C1000K should be possible depending there is enough ram/cpu power
    multi_accept on;
}


http {
include       mime.types;
default_type  application/octet-stream;
sendfile        on;
keepalive_timeout  65;
server {
listen       8080;
server_name  localhost;
# rtmp stat
location /stat {
rtmp_stat all;
rtmp_stat_stylesheet stat.xsl;
}
location /stat.xsl {
# you can move stat.xsl to a different location
root html;
}
# rtmp control
location /control {
rtmp_control all;
}
error_page   500 502 503 504  /50x.html;
location = /50x.html {
root   html;
}
}
}



rtmp {
        server {
                listen 9092;
                chunk_size 4096;

                application live {
                        live on;
                        record off;
                }
        }
}

OBS Broadcast settings:
Mode: Live Stream
Stream Service: Custom
Server: rtmp://192.168.1.108:9092/live
path/stream key: test

Stat page I see in nginx:

See attached image

Please guide me as to what I am doing wrong.

Jack0r · May 15, 2014

Everything looks fine and should work, if it does not I would suggest to try it with the default rtmp port 1935, or checking that all ports are forwarded correctly in your router/firewall.
Alternatively activate the error.log by removing the # in front or try testing nginx in single worker mode. More than one worker is only necessary if you plan to supply a very big amount of viewers with your stream in the future, I think.

3DFun · May 16, 2014

Thanks Jack0r.

I've tried that.
Still not working and no errors to be seen.

There is no port forwarding in place as this is all happening on the same computer.

3DFun · May 16, 2014

I've sort of fixed it. I had a person recommend using the test page from wowza.
Works a treat.
So its something with the jwplayer.
No idea what but if one of you have a better complete HTML page I can try for jwplayer I would be keen to try it.

Rehan Khan · Jul 22, 2015

@Jack0r
I really need your help i read your all guid regarding ngix rmtp server but i am stack in configuration i set rmtp listen to 1935 all going perfect even when i am going to broadcast using OBS its going perfect no drop frames but in web player says (error loading stream cannot connect to server) what should i do can you please solve my problem ???

ngix.conf version ngix_1.8.0

Code:

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}
rtmp {
        server {
                listen 1935;
                chunk_size 4096;

                application live {    
            live on;
            record off;
                }
        }
}

jw player code

Code:

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Live Stream</title>
    <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
    <link href='http://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">

<h1 align="center">Live Stream</h1>

</head>
<body>

  <div class="container clearfix">
<script type="text/javascript" src='jwplayer.js'></script>
    <div id='player_1'></div>
<script type='text/javascript'>
  jwplayer('player_1').setup({
    width: "100%",
    height: "100%",
    stretching: "fill",
    primary: "flash",
    autostart: "true",
    sources:
[
{file: "rtmp://111.88.34.128:1935/live/flv:rehankhan995.flv"}
]
  });
</script>
    <div id="copyright" class="grid_12">
    </div>
</body>
</html>

OBS setting:
FMS URL:rtmp://192.168.0.105:1935/live
play path/stream key:rehankhan995

but in my web browser player show (error loading stream cannot connect to server)?
please give me answer as soon as possible @Jack0r

Jack0r · Jul 23, 2015

Hmm, have you tried without .flv in the url?
{file: "rtmp://111.88.34.128:1935/live/flv:rehankhan995"}
Also, 111.88.34.128 is your external IP address? And your router forwards port 1935 to your pc?

jawadhassansoomro · Aug 15, 2015

Jack0r said:
Hmm, have you tried without .flv in the url?
{file: "rtmp://111.88.34.128:1935/live/flv:rehankhan995"}
Also, 111.88.34.128 is your external IP address? And your router forwards port 1935 to your pc?

[Note: RehanKhan is my team member who asked u live streaming questions before in the thread]
We are building streaming website like twitch.tv which let streamers to stream thier own channel.Is nginx server better for this project and which video player do you recommend for this project so it may support "rmtp" on all devices and all browsers even if they don't support flash and how can we save video when session is expired.What are recommendations to handle the load of streamers with minimum load on server itself

Question / Help Live Streaming to a browser

3DFun

New Member

flavored

Member

3DFun

New Member

flavored

Member

3DFun

New Member

3DFun

New Member

Sapiens

3DFun

New Member

Jack0r

The Helping Squad

3DFun

New Member

3DFun

New Member

Attachments

Jack0r

The Helping Squad

3DFun

New Member

3DFun

New Member

Rehan Khan

New Member

Jack0r

The Helping Squad

jawadhassansoomro

New Member