请选择 进入手机版 | 继续访问电脑版

web实时视频流从0到1(ffmpeg+nginx-http-flv-module+flv.js)

[复制链接]
小浣熊 发表于 2021-1-3 12:04:22 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
  海康威视视频流rtsp,需要在web(Vue)页面显示,探索了许多方法,思量到兼容,最终确定 ffmpeg+nginx-http-flv-module+flv.js 这一套方案,也推荐各人使用这一套方案。
简介

  特此声明:本文主要记录我web直播海康视频的探索过程,如文中概念论述有不正确的地方望留言指正
业界cs视频流方案照旧比力多的,不在赘述。以下是web支持主流视频流协议

思量到flash的会完全克制(win10即将克制,chrome,firfox已经克制),rtmp这种基于flash的协议也不适合了。
我的实现方案是本地推rtsp流到阿里云搭建的流服务器(反面会先容),然后再用 flv.js 播放
最后效果

延迟2~5s可以继承
  正文

需要下载
vlc player(检测转流地点可用性)
ffpmeg(本地视频转码推流用)
nginx 包 (发起选择1.13以上版本,流服务搭建使用)
nginx-http-flv-module (nginx的flv直播流模块)
附: ffmpeg下载方法
附: 百度网盘链接(以上反面三个包ud8d
附: rtmp测试地点
  流服务器的搭建

大概会遇到一些希奇的错误,复制问百度,根本都能管理
我买了一个月阿里云服务器(ubuntu 16),也可以用虚拟机本地搭建(我不会呀)。 用 xshel l毗连服务器再安装 nginx
  服务器: 阿里云 终端:xshell6 系统ubuntu , #为注释,不要写
更新(新的服务器才需要)
  1. apt-get updateapt-get upgrade
复制代码
安装支持上传解压的下令 rz , unzip(解压zip)
  1. apt install lrzszapt install unzip
复制代码
安装根本包(提示没有权限时前面加sudo),关于包的作用推荐 这里
  1. sudo apt-get install openssl libssl-devsudo apt-get install libpcre3 libpcre3-devsudo apt-get install gccapt-get install libpcre3 libpcre3-devapt-get install zlib1g zlib1g-dev
复制代码
上传解压 nginx,nginx-http-flv-module
  1. cd /usr/local/srcrz #选择你的文件tar -zxvf nginx-1.18.0.tar.gzunzip nginx-http-flv-module-master.zip
复制代码
设置和安装
  1. cd nginx-1.18.0./configure --prefix=/usr/local/nginx  --add-module=/usr/local/nginx/nginx-http-flv-module-mastermake && make install
复制代码
设置nginx为全局变量
  1. ln -s /usr/local/nginx/sbin/nginx /usr/local/bin/nginx -v #查抄
复制代码
接下来是nginx.conf的设置,
  1. cd /usr/local/nginx/confvim nginx.conf # 按 i 编辑,编辑完成按 Esc 然后输入 :wq  退出生存nginx -s reload # 最后更新设置
复制代码
  1. worker_processes  1; #运行在Windows上时,设置为1,因为Windows不支持Unix domain error_log logs/error.log error;#如果此模块被编译为动态模块而且要使用与RTMP相关的功#能时,必须指定下面的设置项而且它必须位于events设置#项之前,否则NGINX启动时不会加载此模块大概加载失败#load_module modules/ngx_http_flv_live_module.so;events {    worker_connections  4096;}http {    include       mime.types;    default_type  application/octet-stream;    keepalive_timeout  65;    server {        listen       80;        server_name 118.31.25.226;        location / {            root   html;            index  index.html index.htm;        }        error_page   500 502 503 504  /50x.html;        location = /50x.html {            root   html;                root   html;        }        location /live {            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 Access-Control-Allow-Headers X-Requested-With;            # add_header Access-Control-Allow-Methods GET,POST,OPTIONS;            # add_header 'Cache-Control' 'no-cache';         }        location /hls {            types {                application/vnd.apple.mpegurl m3u8;                video/mp2t ts;            }            root html;            add_header 'Cache-Control' 'no-cache';        }        location /dash {            root /html;            add_header 'Cache-Control' 'no-cache';        }        location /stat {            #push和pull状态的设置            rtmp_stat all;            rtmp_stat_stylesheet stat.xsl;                 }        location /stat.xsl {            root /usr/local/src/nginx-http-flv-module-master; #指定stat.xsl的位置        }        #如果需要JSON风格的stat, 不消指定stat.xsl        #但是需要指定一个新的设置项rtmp_stat_format        #location /stat {        #    rtmp_stat all;        #    rtmp_stat_format json;        #}        location /control {            rtmp_control all; #rtmp控制模块的设置        }    }}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 118.31.25.226; #用于虚拟主机名后缀通配        application myapp {            live on;            #record off; # 不记录视频            gop_cache on; #打开GOP缓存,淘汰首屏等候时间        }        application hls {            live on;            hls on;            hls_path /usr/local/nginx/html/hls;        }        application dash {            live on;            dash on;            dash_path /usr/local/nginx/html/dash;        }    }}
复制代码
大概遇到的错误:
ffmpeg推流

  将下载好的ffmpeg解压到自界说的文件夹,

复制bin文件夹路径到情况变量,右键我的电脑,属性

检测ffmpeg.我用cmder,cmd也行

推流
  ip1体现摄像头的公网ip,ip2是我的阿里云服务器ip2
  1. ffmpeg  -i rtsp://admin:password@ip2 -vcodec copy -acodec copy -f flv -s 500x300 rtmp://ip2:1935/myapp/24
复制代码
需要主要这样会产生两个地点(vlc player可以观看)
  1. rtmp://ip2:1935/myapp/24http://ip2/live?port=1935&app=myapp&stream=23 // 注意这个port、app 、stream与上面地点一一对应
复制代码
vue中显示

安装 flv.js
  1. cnpm install flv.js -S
复制代码
video.vue
  1.       视频测试
  2.               
  3.   
  4. #flv01 {  font-family: "Avenir", Helvetica, Arial, sans-serif;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  text-align: center;  color: #2c3e50;  margin-top: 60px;  .video-box {    display: flex;    flex-wrap: wrap;    justify-content: center;    width: 100%;    video {        margin: 20px;        width: 500px;        height: 300px;    }  }}
复制代码
以上。
上面步调完成,视频也就能出来了,固然我能想到的另有以下问题:


  • 首开时间虽然短,画面延迟差不多20s,不太理想,应该是我代码的原因
  • 同时展示四个视频流,而且点击别的的如何切换(四个里)此中一个,页面脱离销毁播放器。(深入相识flv.js)
  • 到时项目上线,ffpmeg需要服务器上推流,如何动态推流,因为rtsp地点是固定的,如果需要一个服务器上运行一个ffppmeg会很繁琐,还需要在vue中动态改http地点(相识nginx动态设置)
针对以上问题,我会另起博文更新。
【一些参考】
FFmpeg + nginx-http-flv-module + flv.js 实现视频流播放(博客风格我还挺喜欢的)
平台开发——搭建Nginx + nginx-http-flv-module + Ffmpeg 实现推流视频到nginx服务器

来源:https://blog.csdn.net/qq_39370934/article/details/112004923
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

发布主题

专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )