前言
由于项目需求，要在web上查看摄像机的实时视频（不能用付费方案），所以写下此文章记录下学习过程，也是踩了不少坑Web端采用vue框架开发及测试所有方案都离不开ffmpeg，感谢ffmpeg开发者仅在Windows10下测试EasyPlayer.js的使用教程请看这里
1 RTMP方案
方案描述：
ffmpeg 将rtsp视频流转为rtmp视频流，通过nginx代理，web接入rtmp协议播放，需要flash支持
后端：
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
nignx配置：（已包含方案1、2、3的配置）
#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 4096;
}
http {
include mime.types;
default_type application/octet-stream;
#log_format main '$remote_addr - $remote_user [$time_local] "$request" '
# '$status $body_bytes_sent "$http_referer" '
# '"$http_user_agent" "$http_x_forwarded_for"';
#access_log logs/access.log main;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
#gzip on;
server {
listen 9091;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html;
index index.html index.htm;
}
location ^~ /uwb/ {
proxy_pass http://127.0.0.1:18080;
proxy_send_timeout 1800;
proxy_read_timeout 1800;
proxy_connect_timeout 1800;
client_max_body_size 2048m;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded=-Proto $scheme;
#proxy_http_version 1.1;
#proxy_set_header Upgrade $http_upgrade;
#proxy_set_header Connection "upgrade";
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
location /flv {
flv_live on; #打开HTTP播放FLV直播流功能
chunked_transfer_encoding on; #支持'Transfer-Encoding: chunked'方式回复
add_header 'Access-Control-Allow-Origin' '*'; #添加额外的HTTP头
add_header 'Access-Control-Allow-Credentials' 'true'; #添加额外的HTTP头
add_header Cache-Control no-cache;
add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";
add_header Access-Control-Methods "GET, POST, OPTIONS";
}
location /hls/ {
types {
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
root media;
add_header Cache-Control no-cache;
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";
add_header Access-Control-Methods "GET, POST, OPTIONS";
}
location /dash {
root html/dash;
add_header 'Cache-Control' 'no-cache';
}
location /stat {
#推流播放和录制统计数据的配置
rtmp_stat all;
rtmp_stat_stylesheet stat.xsl;
}
location /stat.xsl {
root html/stat; #指定stat.xsl的位置
}
#如果需要JSON风格的stat, 不用指定stat.xsl
#但是需要指定一个新的配置项rtmp_stat_format
#location /stat {
# rtmp_stat all;
# rtmp_stat_format json;
#}
location /control {
rtmp_control all; #rtmp控制模块的配置
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
}
rtmp_auto_push on;
rtmp_auto_push_reconnect 1s;
rtmp_socket_dir /tmp;
rtmp {
out_queue 4096;
out_cork 8;
max_streams 128;
timeout 15s;
drop_idle_publisher 15s;
log_interval 5s; #log模块在access.log中记录日志的间隔时间，对调试非常有用
log_size 1m; #log模块用来记录日志的缓冲区大小
server {
listen 1935;
# server_name www.test.*; #当模块中，只有一个server时，可以不配置server_name，nginx对于请求，当找不到匹配的server_name时，会默认发给第一个server进行处理。
application myapp {
live on;
gop_cache on; #打开GOP缓存，减少首屏等待时间
record off;
allow play all;
}
application hls {
live on;
hls on;
hls_path ./media/hls;
hls_fragment 1s;
hls_playlist_length 3s;
record off;
}
application dash {
live on;
dash on;
dash_path ./media/dash;
}
}
}
Web播放组件：
video.jsEasyPlayer.jsvlc (主流浏览器已不支持)LivePlayer（与EasyPlayer.js惊人的相似）
方案结论：
web端必须要flash插件支持，然而现在主流的浏览器都不支持flash了，基本可以放弃此方案nginx-rtmp-module在windows下编译很麻烦
2 HLS方案
方案描述：
基于方案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.jsEasyPlayer.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.jsvideojs-flvjsEasyPlayer.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播放组件：
jsmpeg.js
方案结论：
jsmpeg.js采用软解码方式，支持mpeg1格式视频、mp2格式音频，将视频流解码成图片并渲染到canvas上，并且可在源码基础上二次开发延迟较低，1s左右由于是客户端解码，清晰度和码率不能太高，客户端多路同屏数建议不要超过6个，否则客户端cpu占用过高，对性能有要求的只能上webrtc详细介绍见我的另一篇文章JSMpeg介绍以及学习记录
5 WebRTC方案（比较推荐）
方案描述：
WebRTC可以使得web端直接连接rtsp视频流，不过初步了解了后，感觉学习成本有点大，便没有深究
后端：
需要搭建一个信令服务器
Web播放组件：
使用原生video元素即可
方案结论：
性能好，延迟低，实时性要求高的可以使用本方案学习成本较大，暂未深入了解，可参考以下文章： Vue + WebRTC 实现音视频直播（附自定义播放器样式） 基于 WebRTC 的 RTSP 视频实时预览 webrtc-streamer
6 方案延时对比：
由于开发的时候忘记截图对比了，所以这里就文字描述吧。
RTMP : 3秒以上HLS: 5秒以上FLV: 20秒以上（未经多次测试，可能不准）JSMPEG: 1秒左右WebRTC：未测试，理论延迟是毫秒级别的
7 其他方案
付费方案：
猿大师 开源方案：
ZLMediaKit (目前项目已转到此方案，推荐)SRS(简单高效的实时视频服务器，支持RTMP/WebRTC/HLS/HTTP-FLV/SRT/GB28181)
后语
最终采用jsmpeg方案，后续会写一篇文章来介绍写文章不易，如果对你有用的话就点个赞吧~如有不足，请指出参考的文章： 网络摄像头RTSP视频流WEB端实时播放实现方案 videojs+hls+rtmp网页播放 Web下无插件播放rtsp视频流的方案总结