Search code examples
nginxvideo-streaminghtml5-videoh.264http-live-streaming

Sending H.264 live stream to Nginx and publish as HLS to embed into website


according to this post I am trying to display an H.264 live stream from an ip camera (AXIS M1145-L + CamStreamer plugin) on a webpage without using any external browser plugins (only pure HTML5) and for desktop.

As I`ve read there it is possible to do it with video.js and HLS, so this is what I have tried:

Stream from camera (push to rtmp with CamStreamer) --> to nginx (rtmp module) --> 
nginx serves HLS --> display with video.js and videojs-hls plugin in browser

While watching the stream within VLC using it`s hls URL (http://192.168.1.105:8080/hls/movie.m3u8) I do not have any problems or lags but I can not get it to work in the browser with video.js.

It always reports me invalid media.

The original stream is pushed to: rtmp://192.168.1.105:1935/hls/movie

192.168.1.105 is the machine where nginx is running.

The Hls stream then is accesible on http://192.168.1.105:8080/hls/movie.m3u8

What I totally want to avoid is the need of re-encoding the video as the machine on where it will run later does not have the power to do it and it will be a full hd stream too. This is why I have abandoned FFmpeg (needed to re-encode Mp4 for Live-Streaming). Also the machine will not have continous internet access, so online transcoding also isn`t possible.

Please help. Thank you !


Solution

  • Finally got it.

    Using hls.js library (https://github.com/dailymotion/hls.js) standalone without video.js did the trick. The video is now playing fine in Chrome/Opera on Windows 7. Did not yet try it with others.

    So I guess it`s a player/codec dependend problem of video.js.

    The html page with the player needs to be on a server (NOT local filesystem!) otherwise browser safety restrictions will come in place which prevents the video from playing. Noticed that while trying from a local html page in browser while hls.js demo worked with same stream.

    Thank you for your tips !