ffmpeg实现rtsp流转hls流

Posted 2022-03-14 幸福丶如此

一、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

四、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="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。点击开始播放，即可看到效果。