在Web网页播放网络摄像机（海康、大华等）RTSP视频流方案汇总 |
您所在的位置：网站首页 › 摄像机转换头 › 在Web网页播放网络摄像机（海康、大华等）RTSP视频流方案汇总 |
|
前言
由于项目需求，要在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配置： 参考方案1Web播放组件： 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视频流的方案总结 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |