Question / Help Player for both pc and mobile?

[Yorubannin]

Hey, so i finally got my OBS private stream working with nginx-rtmp on windows, secured with php password and playing in a website with videojs player... But the last thing i wasn't able to do is make the videojs player work on mobile devices (safari, etc.) so im asking for help on what player i should use to make the stream available to both pc and mobile devices. Help would be much appreciated. (I tried setting up HLS, hosted the .js files on my website, but .m3u8 video wouldnt show up on the videojs player)

 

[Fenrir]

HLS works in mobile, you just need to add the full path to the playlist as the source.

Example: //your.host.com/hls/streamkey.m3u8

 

[Yorubannin]

I did, and i tried all kinds of ways even with ports in the address etc. the m3u8 file appeared in D:/streami/testi2/tmp/hls but i dont think the player got it since i got errors and usually i tried obs server rtmp://192.168.1.2/hls and i tried different sources too (myip is my external ip or dns):

<source src="http://myip/hls/stream.m3u8" type="application/x-mpegURL">
<source src="http://myip/hls/stream" type="application/x-mpegURL">
<source src="http://myip:8080/hls/stream.m3u8" type="application/x-mpegURL">

also in many guides there was no mention of videojs-contrib-hls.min.js file which i suppose is needed? Tried it aswell...

in obs i tried
rtmp://192.168.1.2/hls
rtmp://192.168.1.2:1935/hls
rtmp://192.168.1.2:8080/hls
with key: stream

with these .js files scripted
video.js , video-js.css , videojs-ie8.min.js , videojs-contrib-hls.min.js

here is my player:

<video id="my-video" class="video-js vjs-default-skin vjs-16-9 vjs-big-play-centered" controls poster="images/poster.jpg" preload="auto" data-setup="{}">
<source src="http://myip:8080/hls/stream.m3u8" type="application/x-mpegURL">
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
  </video>

  <script src="video-js-5.11.6/video.js"></script>

  <script src="video-js-5.11.6/videojs-contrib-hls.min.js"></script>

here is my nginx.conf:

#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;
}

rtmp {

    server {

        listen 1935;
        chunk_size 4000;

        application hls {
            live on;
            hls on;
            hls_path tmp/hls;
        }

        # MPEG-DASH is similar to HLS

        application dash {
            live on;
            dash on;
            dash_path tmp/dash;
        }
    }
}

http {

    server {

        listen      8080;

        location /hls {
            # Serve HLS fragments
            types {
                application/vnd.apple.mpegurl m3u8;
                video/mp2t ts;
            }
            root /tmp;
            add_header Cache-Control no-cache;
        }
 
        location /dash {
            # Serve DASH fragments
            root /tmp;
            add_header Cache-Control no-cache;
        }
    }
}

here one of the errors i encountered, maybe something to do with hls_path that i edited in nginx.conf to tmp/hls; (in guide examples /tmp/hls; but then nginx wouldnt even start)

2016/09/09 00:01:23 [emerg] 11396#9592: CreateDirectory() "/tmp/hls" failed (3: The system cannot find the path specified)
2016/09/09 07:32:50 [error] 5460#11168: *5 CreateFile() "D:/tmp/hls/stream.m3u8" failed (3: The system cannot find the path specified), client: 192.168.1.1, server: , request: "GET /hls/stream.m3u8 HTTP/1.1", host: "myip:8080", referrer: "http://mywebpage.com/?page=privatestream"

so the real path of stream.m3u8 is D:/streami/testi2/tmp/hls/stream.m3u8 so its probably not picking it up?

 

[Fenrir]

Looks like the issue might just be with your hls path. nginx process needs to be able to write to the hls root directory as specified. I would avoid using relative paths and stick to explicit. Create the /tmp/hls path and provide your nginx user rights to it. Right now you're pointing the location block and the application block at two separate paths (one relative and one explicit).

Also, verify the stream is working in a player like VLC first before trying in video.js. It does, however, work just fine assuming it's configured correctly.

 

[Yorubannin]

Yes the stream works through VLC with rtmp code, not sure if you can test m3u8 on it aswell, didn't work atleast. Im sorry but i don't understand what you mean by providing nginx user rights to the /tmp/hls path? if i change hls_path tmp/hls; in rtmp section to hls_path /tmp/hls; nginx don't even start.

How can i make the paths correct? The real path is D:/streami/testi2/tmp/hls/stream.m3u8 testi2 being the nginx folder

(See pic)

 

[Yorubannin]

So for anyone interested i got it working like this, all folder permissions granted for tmp/hls and changing some paths:

#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;
}

rtmp_auto_push on;
rtmp {
   server {
      listen 1935;
      chunk_size 4096;

      access_log logs/rtmp_access.log;

      ping 30s;
      ping_timeout 10s;

        application src {
            live on;
            push rtmp://localhost/hls;
        }
        application hls {
            live on;
            hls on;
            hls_path D:/streami/testi2/tmp/hls;
            hls_fragment 3s;
        }
   }
}

http {
    include       mime.types;
    server {
        listen       80;
        server_name  localhost;
        location / {
            root   html;
            index  index.html index.htm;
        }

        location /hls {
            # Serve HLS fragments
            types {
                application/vnd.apple.mpegurl m3u8;
                video/mp2t ts;
            }
            root tmp;
            add_header Cache-Control no-cache;
        }
    }
}

and player like this:

  <video id="stream" class="video-js vjs-default-skin vjs-16-9 vjs-big-play-centered" controls poster="images/drunk.jpeg" preload="auto" data-setup="{}">
<source src="http://myip/hls/stream.m3u8" type='application/x-mpegURL'>
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
  </video>

  <script src="video-js-5.11.6/video.js"></script>
<script src="video-js-5.11.6/videojs-contrib-hls.min.js"></script>

it uses upload speed in kind of a weird way when i look at my task manager, constantly ticking between the normal stream (2mbps) and 9-11mbps which im guessing is because of the m3u8 and ts files just ticking separately, not really being that high?