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

海康威视视频流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 , #为注释，不要写

更新（新的服务器才需要）

apt-get update
apt-get upgrade

安装支持上传解压的命令 rz , unzip(解压zip)

apt install lrzsz
apt install unzip

安装基础包(提示没有权限时前面加sudo),关于包的作用推荐这里

sudo apt-get install openssl libssl-dev
sudo apt-get install libpcre3 libpcre3-dev
sudo apt-get install gcc
apt-get install libpcre3 libpcre3-dev
apt-get install zlib1g zlib1g-dev

上传解压 nginx，nginx-http-flv-module

cd /usr/local/src
rz #选择你的文件
tar -zxvf nginx-1.18.0.tar.gz
unzip nginx-http-flv-module-master.zip

配置和安装

cd nginx-1.18.0
./configure --prefix=/usr/local/nginx  --add-module=/usr/local/nginx/nginx-http-flv-module-master
make && make install

配置nginx为全局变量

ln -s /usr/local/nginx/sbin/nginx /usr/local/bin/
nginx -v #检查

接下来是nginx.conf的配置，

cd /usr/local/nginx/conf
vim nginx.conf # 按 i 编辑，编辑完成按 Esc 然后输入 :wq  退出保存
nginx -s reload # 最后更新配置

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 ip; #服务端iplocation / {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 ip; #用于虚拟主机名后缀通配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

ffmpeg  -i rtsp://admin:password@ip2 -vcodec copy -acodec copy -f flv -s 500x300 rtmp://ip2:1935/myapp/24

需要主要这样会产生两个地址（vlc player可以观看）

rtmp://ip2:1935/myapp/24
http://ip2/live?port=1935&app=myapp&stream=23 // 注意这个port、app 、stream与上面地址一一对应

vue中显示

安装 flv.js

cnpm install flv.js -S

video.vue

<template><div id="flv01"><p>视频测试</p><div class="video-box"><videov-for="(url, idx) in params":id="'myvideo' + idx"@click="click(idx)"controlsmuted:key="idx"></video></div></div>
</template>
<script>
import flv from "flv.js";
export default {name: "app",data() {return {players: [null, null, null, null],playing: false,params: ["http://ip2/live?port=1935&app=myapp&stream=23","http://ip2/live?port=1935&app=myapp&stream=24",],};},mounted() {this.innitPlayer(this.params);},methods: {innitPlayer(initParams = []) {const _this = this;initParams.length &&initParams.forEach((item, idx) => {const video = document.querySelector(`#myvideo${idx}`);if (flv.isSupported()) {if (typeof _this.players[idx] !== "undefined" &&_this.players[idx] != null)_this.players[idx].destroy();_this.players[idx] = flv.createPlayer({type: "flv",isLive: true,enableWorker: true, //浏览器端开启flv.js的worker,多进程运行flv.jshasAudio: false, //关闭音频hasVideo: true,enableStashBuffer: false, //播放flv时，设置是否启用播放缓存，只在直播起作用。url: item,});}this.players[idx].attachMediaElement(video);this.players[idx].load();this.players[idx].play();});},click(idx) {if (this.playing) {this.players[idx].pause();this.playing = false;} else {this.playeridx[x].play();this.playing = true;}},},
};
</script><style lang="scss">
#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;}}
}
</style>

以上。

上面步骤完成，视频也就能出来了，当然我能想到的还有以下问题：

首开时间虽然短，画面延迟差不多20s,不太理想，应该是我代码的原因
同时展示四个视频流，并且点击另外的如何切换（四个里）其中一个，页面离开销毁播放器。（深入了解flv.js）
到时项目上线，ffpmeg需要服务器上推流，如何动态推流,因为rtsp地址是固定的，如果需要一个服务器上运行一个ffppmeg会很繁琐,还需要在vue中动态改http地址(了解nginx动态配置)

针对以上问题，我会另起博文更新。

【一些参考】
FFmpeg + nginx-http-flv-module + flv.js 实现视频流播放(博客风格我还挺喜欢的)
平台开发——搭建Nginx + nginx-http-flv-module + Ffmpeg 实现推流视频到nginx服务器