Nginx+ffmpeg实现Hls(m3u8)推流播放，不使用flash

文章目录

相关环境：
一、Nginx部署：
二、ffmepg部署
三、配置ffmpeg转发
四、写前端访问代码查看：
五、报错相关：
- 1、如果到启动时缺少了ffmpeg模块
六、写在最后：

任务需求：由于各个浏览器已经终止了适配Flash播放插件，故此监控视频从之前的Rtmp格式变为Hls(m3u8)格式

一、Nginx部署：

主要安装参考链接
1、编译安装nginx

# yum -y install pcre-devel openssl openssl-devel        //安装依赖
# wget http://nginx.org/download/nginx-1.16.0.tar.gz        //下载nginx包
# tar xf nginx-1.16.0.tar.gz && cd nginx-1.16.0
# ./configure --prefix=/application/nginx  --with-http_ssl_module    //编译安装nginx
# make && make install

2、修改nginx配置文件，添加如下内容并重新载入配置文件

# vim /application/nginx/conf/nginx.conf
user  root;
worker_processes  1;events {worker_connections  1024;
}http {include       mime.types;default_type  application/octet-stream;sendfile        on;keepalive_timeout  65;server {listen       20000;server_name  localhost;location / {root   html;index  index.html index.htm;}error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}location /hls {types{application/vnd.apple.mpegurl m3u8;video/mp2t ts;}root html;add_header Cache-Control no-cache;add_header Access-Control-Allow-Origin *;}
}
}
# /application/nginx/sbin/nginx -s reload //重新加载启动

二、ffmepg部署

ffmpeg命令参考这个文章

1、安装依赖
# yum install yasm -y
2、下载ffmpeg并安装
# git clone https://git.ffmpeg.org/ffmpeg.git ffmpeg
# cd ffmpeg     //解压并进入目录
# ./configure --prefix=/usr/local/ffmpeg
# make
# make install
3、拷贝命令到/usr/bin     //方便后面调用
# ls /usr/local/ffmpeg/        //查看安装目录生成的文件
bin  include  lib  nohup.out  share
# cp /usr/local/ffmpeg/bin/* /usr/bin/  //复制命令

三、配置ffmpeg转发

1、启用ffmpeg进行推流
# ffmpeg -re -rtsp_transport tcp -i rtsp://账号:密码@IP:端口/mpeg4/ch1/sub/av_stream.mp4 -acodec aac -strict experimental -ar 44100 -ac 2 -b:a 96k -r 25 -b:v 500k -s 480*480 -c `copy` -f hls -hls_time 2.0 -hls_list_size 0 -hls_wrap 15 /application/nginx/html/hls/test.m3u8-i  //要处理视频文件的路径，此处地址是一个监控摄像头
-acodec //音频处理的格式
-strict experimental    //更标准的严格性
-ar //设置音频采样率
-ac //设置通道为2
-b:a //要将输出文件的音频比特率设置为96 kbit/s
-r //要强制输出文件的帧频为24 fps
-b:v //要将输出文件的视频比特率设置为500 kbit/s。
-s //分辨率，传输的带宽根据分辨率来设定的，-b:v不能控制
-f //强制输出的视频格式
-hls_time  //为切片的秒数
-hls_list_size //设置播放列表保存的最多条目，我这里设置为0会保存有所片信息，默认值为5
-hls_wrap //为切片的个数

Tips:-s参数在ffmpeg转发命令里面就算使用了-c copy参数也不会生效！具体的分辨率是根据海康威视监控视频的分辨率来定的（主码流和子码流不相同）。主码流一般为1920x1080P[平均2M网速]，子码流一般为1280x720P[平均1.2M网速]，704x576[平均800Kb]。海康威视平台配置如下图，设置码率类型为定码率的话流量要稳定一些。

四、写前端访问代码查看：

<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="shortcut icon" href="./static/logo.ico"><style type="text/css">html,body{margin:0px;height:100%;width:100%; display: flex; align-items: center}#video{width:1000px;height:600px;}</style><title>无BUG</title></head>
<body style="margin:0;overflow:hidden"><video id="video" muted></video><script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script><script>function initVideo () {let video = document.getElementById('video')if(Hls.isSupported()) {let hls = new Hls()//该hls地址为nginx配置中的地址hls.loadSource('http://192.168.31.88:20000/hls/test.m3u8')hls.attachMedia(video)hls.on(Hls.Events.MANIFEST_PARSED,()=>{video.play()});}else if (video.canPlayType('application/vnd.apple.mpegurl')) {video.src = 'http://192.168.31.88:20000/hls/test.m3u8'video.addEventListener('loadedmetadata',function() {video.play()})}}initVideo()</script>
</body></html>

可以在pc机浏览器上查看视频
后续出现跨域问题配置Nginx端口访问index.html即可

五、报错相关：

1、如果到启动时缺少了ffmpeg模块

参考链接
解决办法：
1、去其他服务器上有这个模块的拷贝过来libva.so.1 、libva-drm.so.1
2、去下载这个模块放在对应的位置
# ldd `which ffmpeg` //查看缺少的模块

六、写在最后：

1、主码流和子码流区分如下图：

2、各个直播协议的优缺点如下图:

3、如果是子码流访问的话，需要将子码流的分辨率与码率上限对应

4、-vf scale=320:240这个参数只能在将Rtsp转发为Rtmp的时候使用

5、参考链接以重要程度排序
一、二、三、四

6、其他链接：
①通过flv的方式转发
②vue的前端的配置