CODEWITHSUNDEEP
nginxvideo-streaminghtml5-videoh.264http-live-streaming
Thomas233
Thomas233

Reputation: 319

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 !

Upvotes: 2

Views: 13191

Answers (2)

Thomas233
Thomas233

Reputation: 319

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 !

Upvotes: 3

iangetz
iangetz

Reputation: 512

I ran into a similar issue trying to get a Video.js player (with the HLS contrib module) to load an HLS stream in PC/Chrome. The player would display "The media could not be loaded... because the format is not supported."

I later found it played fine in Mac/Safari and PC/MS Edge browsers.

Full browser support for HLS is still fairly lacking. https://www.jwplayer.com/html5/#adaptive-streaming

I had success with Bitmovin's player Bitdash and realized it was a browser issue (not stream or nginx issue).

Upvotes: 0

Related Questions