Linux搭建Nginx直播流媒体服务RTMP/RTSP转Http-flv视频浏览器在线播放/Vue/Java/ffmpeg

参考文章：

搭建Nginx

1、下载包到/usr/local位置

wget或者手动下载，注意做好版本映射支持关系

复制代码

nginx-1.24.0.tar.gz
nginx-http-flv-module-1.2.9.tar.gz

2、解压下载的两个文件：
tar -zxvf 文件名

3、安装所需依赖

RHEL

复制代码

yum -y install gcc gcc-c++ openssl openssl-devel zlib zlib-devel pcre pcre-devel

Ubuntu

复制代码

sudo apt update
sudo apt install -y gcc g++ libssl-dev zlib1g-dev libpcre3 libpcre3-dev

4、配置编译项

进入目录/usr/local/nginx-1.24.0

如有error检查路径

复制代码

./configure --prefix=/usr/local/nginx  --add-module=/usr/local/nginx-http-flv-module-1.2.9

5、安装

如有error检查缺少的依赖，根据提示安装

复制代码

make
sudo make install

6、验证安装
/usr/local/nginx/sbin/nginx -V

如果在输出中未看到 --add-module 参数，可能表示模块未成功编译进 Nginx

复制代码

[root@iZf4o05j05ne6r1jkkogkpZ local]# /usr/local/nginx/sbin/nginx -V
nginx version: nginx/1.24.0
built by gcc 4.4.7 20120313 (Red Hat 4.4.7-17) (GCC) 
built with OpenSSL 3.0.8 7 Feb 2023
TLS SNI support enabled
configure arguments: --prefix=/usr/local/nginx --add-module=/usr/local/nginx-http-flv-module-1.2.9
[root@iZf4o05j05ne6r1jkkogkpZ local]#

配置Nginx

修改/usr/local/nginx/conf/nginx.conf

配置rtmp，服务端口，live路径等

复制代码

#user  nobody;
worker_processes  1;

events {
    worker_connections  1024;
}

rtmp {
    server {
        listen 1935;
        chunk_size 4096;

        application live {
            live on;
            record off;
        }
    }
}


http {
    include       mime.types;
    default_type  application/octet-stream;


    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       8099;
        server_name  localhost;

        location / {
            root   html;
            index  index.html index.htm;
        }
        
       location /live {
            flv_live on;
            chunked_transfer_encoding on;
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Headers' 'X-Requested-With';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Cache-Control' 'no-cache';
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

    }

}

安装ffmpeg

Ubuntu/Debian

复制代码

sudo apt update
sudo apt install ffmpeg
ffmpeg -version

CentOS/RHEL

复制代码

sudo yum install ffmpeg ffmpeg-devel
ffmpeg -version

RTMP转http-flv视频流

已知我的视频流：rtsp://10.21.37.252:554/rtp/0501001305

输入命令ffmpeg -i "rtsp://10.21.37.252:554/rtp/0501001305" -vcodec copy -acodec copy -f flv "rtmp://127.0.0.1:1935/live/0501001305"

然后浏览器访问http://127.0.0.1:8081/live?port=1935&app=live&stream=0501001305

就可以看到视频可以播放了，或者vlc访问测试

这个地址可以直接嵌入浏览器播放：http://127.0.0.1:8081/live?port=1935&app=live&stream=0501001305

如果对画质等视频参数进行调整可以研究下ffmpeg

java调用

得到outUrl地址为http-flv地址

java 复制代码

		String rtspUrl = "rtsp://10.21.37.252:554/rtp/0501001305";
        String outUrl = null;
        // 如果流地址不为空，进行转码：
        if (rtspUrl != null) {
            try {
                LOGGER.info("===准备转流===：{}", rtspUrl);
                String[] parts = rtspUrl.split("/");
                String channelCode = parts[parts.length - 1];
                String rtmpUrl = "rtmp://127.0.0.1:1935/live/" + channelCode;
                // 创建 ffmpeg 命令
                String[] command = {
                        "ffmpeg",
                        "-i", rtspUrl,
                        "-vcodec", "copy",
                        "-acodec", "copy",
                        "-f", "flv",
                        "-fflags", "+genpts",   // 生成新的时间戳，可能有助于解决时间戳无效或不连续的问题
                        rtmpUrl
                };
                // 创建 ProcessBuilder
                ProcessBuilder processBuilder = new ProcessBuilder(command);
                // 启动进程
                Process process = processBuilder.start();

                // 创建一个线程来处理进程输出
                new Thread(() -> {
                    try (BufferedReader reader = new BufferedReader(new InputStreamReader(process.getInputStream()))) {
                        String line;
                        while ((line = reader.readLine()) != null) {
                            LOGGER.info("FFmpeg Output: {}", line);
                        }
                    } catch (IOException e) {
                        LOGGER.error("Error reading ffmpeg output: {}", e.getMessage());
                    }
                }).start();

                // 创建一个线程来处理进程错误流
                new Thread(() -> {
                    try (BufferedReader errorReader = new BufferedReader(new InputStreamReader(process.getErrorStream()))) {
                        String line;
                        while ((line = errorReader.readLine()) != null) {
                            LOGGER.error("FFmpeg Error: {}", line);
                        }
                    } catch (IOException e) {
                        LOGGER.error("Error reading ffmpeg error stream: {}", e.getMessage());
                    }
                }).start();


                outUrl = "http://127.0.0.1:8081/live?port=1935&app=live&stream=" + channelCode;
            } catch (Exception e) {
                e.printStackTrace();
                LOGGER.error(e.toString());
            }

前端vue播放

样式根据需要调整

html 复制代码

      <div id="video_Player" class="video_mian video_mian_bg">
        <video
            id="mmiid"
            class="video-js vjs-big-play-centered vjs-fluid"
            controls
            preload="auto"
            width="100%"
            height="100%">
        </video>
      </div>

js 复制代码

import Videojs from 'video.js'
import 'video.js/dist/video-js.css'
import "videojs-flvjs-es6";
 
      startLive(this.send).then((res) => {
        console.log(res)	// 得到http-flv地址
        this.videoPlayer = Videojs(document.querySelector('#mmiid'), {
          autoplay: 'muted',//自动播放
          controls: true,//用户可以与之交互的控件
          loop: true,//视频一结束就重新开始
          muted: false,//默认情况下将使所有音频静音
          aspectRatio: "16:9",//显示比率
          fullscreen: {
            options: {navigationUI: 'hide'}
          },
          techOrder: ["html5", "flvjs"],// 兼容顺序
          flvjs: {
            mediaDataSource: {
              isLive: false,
              cors: true,
              withCredentials: false
            }
          },
          sources: [{
            src: res.data,
            type: "video/x-flv"
          }]
        })
      });