在Web网页播放网络摄像机RTSP视频流方案汇总

rtsp是实时流协议，一般用于网络摄像机；但由于现代浏览器安全问题，不再原生支持插件方式播放(RealMedia (for RTSP) or Flash (for RTMP))；

1 RTMP方案

rtmp是adobe公司的私有协议，基于tcp实现，早期在flash上可以直接支持；

现在多为flv播放器支持。

方案描述：

ffmpeg 将rtsp视频流转为rtmp视频流，而后通过flv.js播放；

后端：

ffmpeg + nginx + nginx-rtmp-module

ffmpeg命令：
ffmpeg -buffer_size 4096000 -rtsp_transport tcp -i rtsp://[用户名]:[密码]@[IP]:554/h264/ch1/main/av_stream -threads 8 -tune zerolatency -acodec aac -vcodec libx264 -r 25 -vb 2500k -vf scale=iw/2:-1 -f flv rtmp://localhost:1935/myapp/flv

Web播放组件：

video.js
EasyPlayer.js
vlc (主流浏览器已不支持)
LivePlayer（与EasyPlayer.js惊人的相似）

2 HLS方案

HLS是苹果公司的直播流协议，H5原生支持；

方案描述：

基于方案1的扩展，ffmpeg 将rtsp视频流切片转存为多个ts视频缓存起来，并通过nginx代理出去，web接入hls协议(m3u8)播放

nginx-rtmp-module的原生支持，niginx.conf加个配置即可
后端：

ffmpeg + nginx + nginx-rtmp-module

ffmpeg命令:

ffmpeg -f rtsp -rtsp_transport tcp -i rtsp://[用户名]:[密码]@[IP]:554/h264/ch1/main/av_stream -c copy -f hls -hls_time 1 -hls_list_size 3 -hls_wrap 3 D:/nginx-1.19.3/media/hls/test.m3u8

nginx配置：参考方案1
Web播放组件：

video.js
EasyPlayer.js
方案结论：

相对比较简单的一个方案了
延时过高，在3-5秒以上，甚至更久，适合点播
nginx-rtmp-module在windows下编译很麻烦

3 HTTP-FLV方案
方案描述：

本质上还是ffmpeg将rtsp视频流转为rtmp视频流，只是ffmpeg在转码的时候已经将视频转换成了flv格式的，nginx-http-flv-module将rtmp流转为http-flv流，web播放flv格式视频（可能我的理解有误，具体原理没有深究）
nginx-http-flv-module是基于nginx-rtmp-module的二次开发，作者貌似又新弄了一个 nginx-http-live-module，不免费也不开源，有兴趣的自行去了解
后端：

ffmpeg + nginx + nginx-http-flv-module

ffmpeg命令：与1方案一致，已经包含了flv视频流的转码
nginx配置：与1方案一致
Web播放组件：

flv.js
videojs-flvjs
EasyPlayer.js
方案结论：

网上说flv方案的延时在1-3秒，然而我实际测试远不止3秒，用flv.js播放能有20多秒延时…
nginx-http-flv-module在windows下编译很麻烦

4 JSMpeg方案（推荐）
方案描述：

ffmpeg + http server(接流)+ websocket(server中继转发,client接收流) + jsmpeg.js
后端：

ffmpeg + http server + websocket server

http服务端：用于接收ffmpeg转码后的流
websocket服务端：用于http server收到的流推送给各个客户端
Web播放组件：

5 WebRTC方案
方案描述：

WebRTC可以使得web端直接连接rtsp视频流，不过初步了解了后，感觉学习成本有点大，便没有深究
后端：

需要搭建一个信令服务器
Web播放组件：

使用原生video元素即可
方案结论：