将H.264直播流发送到Nginx并发布为HLS以嵌入到网站中

Question

根据this帖子我试图在网页上显示来自ip camera（AXIS M1145-L + CamStreamer插件）的H.264直播流，而不使用任何外部浏览器插件（仅限纯HTML5）和用于桌面。

正如我在那里看过的那样，可以用video.js和HLS来做，所以这就是我的尝试：

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

在使用它的hls URL（http://192.168.1.105:8080/hls/movie.m3u8）观看VLC中的流时，我没有任何问题或滞后，但我无法使用video.js在浏览器中使用它。

它总是报告无效媒体。

• vlc中的流+编解码器信息： http://s8.postimg.org/vb63fgfwh/codec.png

• 我的nginx配置：http://pastebin.com/9GuAMuBx

• html源代码：http://pastebin.com/QGmEamjT

Chrome中的

• 输出：http://s8.postimg.org/dwlv76irl/error_html.png

原始信息流被推送到： rtmp：//192.168.1.105：1935 / hls / movie

192.168.1.105 是运行nginx的机器。

然后可以在http://192.168.1.105:8080/hls/movie.m3u8

上访问Hls流

我完全想要避免的是需要重新编码视频，因为稍后运行的机器无法执行此操作，而且它也将是一个完整的高清视频流。这就是为什么我放弃了FFmpeg（需要为实时流重新编码Mp4）。此外，该机器不会连续上网，因此也无法进行在线转码。

请帮忙。谢谢！

Answer 1

终于明白了。

使用hls.js库（https://github.com/dailymotion/hls.js）独立没有 video.js就可以了。该视频现在在Windows 7上的Chrome / Opera中运行良好。尚未与其他人一起尝试。

所以我猜它是video.js的播放器/编解码器依赖问题。

带有播放器的html页面需要位于服务器上（不是本地文件系统！），否则将出现浏览器安全限制，阻止视频播放。注意到在浏览器中从本地html页面尝试时，hls.js演示使用相同的流。

感谢您的提示！

Answer 2

我遇到了类似的问题，试图让一个Video.js播放器（使用HLS contrib模块）在PC / Chrome中加载HLS流。播放器将显示“无法加载媒体...因为格式不受支持。”

我后来发现它在Mac / Safari和PC / MS Edge浏览器中播放得很好。

对HLS的完全浏览器支持仍然相当缺乏。 https://www.jwplayer.com/html5/#adaptive-streaming

我在Bitmovin的播放器Bitdash上取得了成功，并意识到这是一个浏览器问题（不是流或nginx问题）。