一、ffmpeg安装

官网地址:http://ffmpeg.org
安装包下载地址:https://ffmpeg.org/releases/

1、下载安装包并解压

wget http://ffmpeg.org/releases/ffmpeg-4.1.tar.gz
tar -xf ffmpeg-4.1.tar.gz

2、安装依赖

yum install -y nasm

如果不提前安装在 ./configure 会报以下错误
在这里插入图片描述

3、编译安装ffmpeg

./configure --prefix=/usr/local/ffmpeg
make
make install

4、添加环境变量

export PATH=/usr/local/ffmpeg/bin:$PATH
二、nginx安装

1、安装依赖

yum install -y pcre-devel

2、下载安装包,并编译安装

wget https://nginx.org/download/nginx-1.20.2.tar.gz
unzip nginx-1.20.2.tar.gz
cd nginx-1.20.2
./configure --user=root --group=root --prefix=/usr/local/nginx --with-file-aio --with-pcre --with-http_realip_module --with-http_stub_status_module --with-http_gzip_static_module --with-http_ssl_module --with-stream
make
make install

3、nginx相关配置
修改配置文件:nginx/conf/nginx.conf
在http --> server下增加:

    location /hls {
      #若nginx\conf\mime.types中没有配置如下type,请加上,或直接在mime.types加
      types {  
        #application/x-mpegURL m3u8;
        application/vnd.apple.mpegurl m3u8 ;  
        video/mp2t ts ;  
      }
      root   /home/wwwroot/ffmpeg; 
      add_header Cache-Control no-cache ;
      add_header Access-Control-Allow-Origin *;
    }

三、ffmpeg命令行转流
/usr/local/ffmpeg/bin/ffmpeg -i "rtsp://chgry:chgry888@192.168.16.219:554/h264/sub/av_stream" -c copy -f hls  -hls_time 3.0 -hls_list_size 2 -hls_wrap 1200 /home/wwwroot/ffmpeg/hls/test.m3u8

其中: /home/wwwroot/ffmpeg/hls/test.m3u8 是对应nginx.conf配置中的hls访问路径 /hls

ffmpeg 关于hls方面的指令说明:

-hls_time n: 设置每片的长度,默认值为2。单位为秒
-hls_list_size n:设置播放列表保存的最多条目,设置为0会保存有所片信息,默认值为5
-hls_wrap n:设置多少片之后开始覆盖,如果设置为0则不会覆盖,默认值为0.这个选项能够避免在磁盘上存储过多的片,而且能够限制写入磁盘的最多的片的数量
-hls_start_number n:设置播放列表中sequence number的值为number,默认值为0

备注:
①现在最新新版中hls_wrap参数已经没有了,用 hls_flags 参数替代
②ffmpeg用法 https://zhuanlan.zhihu.com/p/268200552
③ 目前我们生产所用的示例 ffmpeg -i "rtsp://username:passwd@192.168.16.219:554/Streaming/Channels/1001" -c copy -f hls -hls_time 3.0 -hls_list_size 2 -hls_wrap 28800 ${src}/rawMaterialFeeding.m3u8 > ${src}/logs/rawMaterialFeeding.out,数据是保留1天

四、HTML通过H5播放

浏览器播放m3u8文件,这里使用video.js插件,下载地址: http://www.jq22.com/jquery-info404
1、下载demo示例,并配置

wget http://www.jq22.com//jquery/jQueryVideo.js7.10.2.zip
unzip jQueryVideo.js7.10.2.zip
cp -a vide7.10.2/* /home/wwwroot/ffmpeg/

##修改 /home/wwwroot/ffmpeg/index.html 文件
源内容
      <video id="my-video" class="video-js" controls preload="auto" width="960" height="400"
                  poster="m.jpg" data-setup="{}">
        <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
        <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
        <source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
        <p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a> </p>
      </video>

修改后内容
      <video id="my-video" class="video-js" controls preload="auto" width="960" height="400"
                  poster="m.jpg" data-setup="{}">
        <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
        <!-- <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
        <source src="/hls/canning.m3u8" type="application/x-mpegURL">        这个是我们生产环境目前用的(把摄像头监控的数据转换为m3u8格式的数据流)
        <source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">  -->
        <p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a> </p>
      </video>

2、浏览器打开index.html。点击开始播放,即可看到效果。
在这里插入图片描述

在这里插入图片描述

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐