相关文章推荐
大力的红酒  ·  spring mybatis事务未提交-掘金·  1 年前    · 
爱吹牛的大熊猫  ·  如何将SQLServer2005中的数据同步 ...·  2 年前    · 
淡定的冰淇淋  ·  ORA-01790: ...·  2 年前    · 
帅气的菠菜  ·  linux安装edge浏览器arm64-掘金·  2 年前    · 
八块腹肌的眼镜  ·  DBeaver:如何为我的用户预先配置连接？ ...·  2 年前    · 
Code  ›  在Web网页播放网络摄像机（海康、大华等）RTSP视频流方案汇总_在web页面实时播放监控视频_云帆Plan的博客
https://blog.csdn.net/a843334549/article/details/117319350
深沉的单杠
2 年前
  • 由于项目需求，要在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播放组件：
 
 

方案结论：
 

  • 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播放组件：
 

  1. video.js
  2. EasyPlayer.js
 

方案结论：
 

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

 

3 HTTP-FLV方案
 

方案描述：
 
 

ffmpeg + nginx + nginx-http-flv-module
 

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

Web播放组件：
 

  1. flv.js
  2. videojs-flvjs
  3. EasyPlayer.js
 

方案结论：
 

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

4 JSMpeg方案（推荐）
 

方案描述：
 
 

ffmpeg + http server + websocket server
 

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

Web播放组件：
 
 

方案结论：
 

  • jsmpeg.js采用软解码方式，支持mpeg1格式视频、mp2格式音频，将视频流解码成图片并渲染到canvas上，并且可在源码基础上二次开发
  • 延迟较低，1s左右
  • 由于是客户端解码，清晰度和码率不能太高，客户端多路同屏数建议不要超过6个，否则客户端cpu占用过高，对性能有要求的只能上webrtc
  • 详细介绍见我的另一篇文章JSMpeg介绍以及学习记录
 

5 WebRTC方案（比较推荐）
 

方案描述：
 

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

  • 需要搭建一个信令服务器
 

Web播放组件：
 

  • 使用原生video元素即可
 

方案结论：
 
 

6 方案延时对比：
 

由于开发的时候忘记截图对比了，所以这里就文字描述吧。
 

  • RTMP : 3秒以上
  • HLS: 5秒以上
  • FLV: 20秒以上（未经多次测试，可能不准）
  • JSMPEG: 1秒左右
  • WebRTC：未测试，理论延迟是毫秒级别的
 

7 其他方案
 
 
 

如果觉得这篇文章对你有帮助的话，请我喝杯奶茶吧~
 在这里插入图片描述 在这里插入图片描述

                    0 前言前端采用vue框架测试仅在Windows10下测试EasyPlayer.js的使用教程请看这里1 自行开发方案1.1 Rtmp方案方案描述：ffmpeg 将rtsp视频流转为rtmp视频流，通过nginx代理，web接入rtmp协议播放，需要flash支持后端：ffmpeg + nginx + nginx-rtmp-moduleffmpeg命令[仅供参考！！！]：ffmpeg -buffer_size 4096000 -rtsp_transport tcp -i rts
使用准备ffmpeg运行rtsp2web前端代码课外知识
我之前研究在 web 中直接播放 rtsp 视频流时，写过一篇文章：【前端】rtsp 与 rtmp 视频流的播放方法。阅读这篇文章对你的学习有很大帮助。在文章中我有过详细的分析和解读，给出了结论：要想在 web 中实时播放 rtsp 视频流：借助后端转码推流将是必要的操作。
我用 node.js 实现了转码推流的功能，并将其打包成 rtsp2web 发布到了 npm 上。......
因为项目需求，需要在web页面播放实时监控视频，而且是同时播放多个视频，还支持切换页面播放。监控是大华和海康 厂家的，并没有做流服务器，还是rtsp的流媒体格式，所以不能用H5的video来播放。
后端把rtsp转成web支持的rtmp格式，然后使用video.js(使用方法看文档)来包装处理rtmp流媒体。
同时加载多个视频会占用大量内存，而且丢包严重，导致页面...
在chrome中呈现RTSP
整合vxgPlayer使chrome支持vxg_media_player播放rtsp视频
总结下想在浏览器端播放摄像头的视频流有以下几个方案：
1.被淘汰的：VLC插件，flash插件
2.即将被淘汰的：VXG 播放器
3.可以丝滑播放的：streamedian方案，bilibili/flv.js方案
第一类方案中，我尝试
目前做的项目，需要Web端显示实时视频数据。本次项目使用的是海康威视的摄像头进行实时监控。
硬件：海康威视的摄像头
软件：video.js、nginx、vlc
参考：https://blog.csdn.net/qq_36720088/article/details/82893924?utm_source=distribute.pc_relevant.none-task
一、实时视频
1、前期工作
海康摄像头支持四种取流协议，其中在web上能利用的为三种协议：rtsp、rtmp、hls。rtsp在web
 
推荐文章
大力的红酒  ·  spring mybatis事务未提交-掘金
1 年前
爱吹牛的大熊猫  ·  如何将SQLServer2005中的数据同步到Oracle中-腾讯云开发者社区-腾讯云
2 年前
淡定的冰淇淋  ·  ORA-01790: 表达式必须具有与对应表达式相同的数据类型_进击的攻城狮-zxc的博客-CSDN博客
2 年前
帅气的菠菜  ·  linux安装edge浏览器arm64-掘金
2 年前
八块腹肌的眼镜  ·  DBeaver:如何为我的用户预先配置连接？ - 问答 - 腾讯云开发者社区-腾讯云
2 年前
今天看啥   ·   Py中国   ·   codingpro   ·   小百科   ·   link之家   ·   卧龙AI搜索
删除内容请联系邮箱 2879853325@qq.com
Code - 代码工具平台
© 2024 ~ 沪ICP备11025650号