使用SpringBoot+ Nginx-http-flv-module + FFmpeg + Flv.js 推Rtsp流 VUE播放

一、安装Nginx-http-flv-module

1、下载nginx包

下载地址：https://nginx.org/download/nginx-1.14.2.tar.gz

2、下载nginx-http-flv-module 模块包

下载地址：https://github.com/winshining/nginx-http-flv-module

3、解压nginx包，将Nginx-http-flv-module包解压之后放到nginx包解压之后的根目录

4、安装依赖项（如果是mac 用brew命令）

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

5、将nginx-http-flv-module模板添加到nginx中，生成make文件并安装nginx

在nginx压缩包解压之后的根目录下执行如下命令：

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

注意：
1）--prefix=的目录不能和在nginx压缩包解压之后的目录为同一目录，会报错
2）如果在执行./configure命令时提示找不到openssl，需加参数./configure --prefix=/usr/local/nginx --add-module=/usr/local/nginx/nginx-http-flv-module --with-openssl=<path>
3）如果执行make命令时出现如下错误：
/bin/sh: line 2: ./config: No such file or directory
make[1]: *** [/usr/local/ssl/.openssl/include/openssl/ssl.h] Error 127
make[1]: Leaving directory `/usr/local/src/nginx-1.9.9'
make: *** [build] Error 2
出错是因为Nginx在编译时并不能在/usr/local/ssl/.openssl/ 这个目录找到对应的文件，其实我们打开/usr/local/ssl/这个目录可以发现这个目录下是没有.openssl目录的，因此我们修改Nginx编译时对openssl的路径选择就可以解决这个问题了
解决方案：
打开nginx源文件下的/usr/local/nginx/auto/lib/openssl/conf文件：
找到这么一段代码：

CORE_INCS="$CORE_INCS $OPENSSL/.openssl/include"
CORE_DEPS="$CORE_DEPS $OPENSSL/.openssl/include/openssl/ssl.h"
CORE_LIBS="$CORE_LIBS $OPENSSL/.openssl/lib/libssl.a"
CORE_LIBS="$CORE_LIBS $OPENSSL/.openssl/lib/libcrypto.a"
CORE_LIBS="$CORE_LIBS $NGX_LIBDL"

修改成以下代码：

CORE_INCS="$CORE_INCS $OPENSSL/include"
CORE_DEPS="$CORE_DEPS $OPENSSL/include/openssl/ssl.h"
CORE_LIBS="$CORE_LIBS $OPENSSL/lib/libssl.a"
CORE_LIBS="$CORE_LIBS $OPENSSL/lib/libcrypto.a"
CORE_LIBS="$CORE_LIBS $NGX_LIBDL"

然后再进行Nginx的编译安装即可。

二、修改nginx.conf，启动nginx

rtmp{
    server{
        listen 1935;
        application live{
            live on;
            record off;
        }
        application hls{
            live on;
            hls on;
            hls_path nginx-rtmp-module/hls;
            hls_cleanup off;
        }
    }
}
http {
    server {
        listen       9083;
        server_name  localhost;
        location /live {
            flv_live on;
            chunked_transfer_encoding  on; #open 'Transfer-Encoding: chunked' response
            add_header 'Access-Control-Allow-Credentials' 'true'; #add additional HTTP header
            add_header 'Access-Control-Allow-Origin' '*'; #add additional HTTP header
            add_header Access-Control-Allow-Headers X-Requested-With;
            add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
            add_header 'Cache-Control' 'no-cache';
        }
    }
}

三、安装ffmpeg

由于我用的是mac测试，所以直接执行

brew install ffmpeg

四、编写Java方法，利用ffmpeg命令推流，将大华摄像机的rtsp流转为rtmp流推给nginx

public class RtspService {

    public Integer pushVideoAsRTSP(String rtspUrl, String nginxRtmpUrl) {
        int flag = -1;
        try {
            String command = "ffmpeg ";
            command += " -re -rtsp_transport tcp -i " + rtspUrl;
            command += " -f flv -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -s 800x600 -q 10 " + nginxRtmpUrl;
            System.out.println("ffmpeg推流命令：" + command);

            Process process = Runtime.getRuntime().exec(command);
            BufferedReader br = new BufferedReader(new InputStreamReader(process.getErrorStream()));
            String line = "";
            while ((line = br.readLine()) != null) {
                System.out.println("视频推流信息[" + line + "]");
            }
            flag = process.waitFor();
        } catch (Exception e) {
            e.printStackTrace();
        }
        return flag;
    }
}

五、编写vue前端代码

1、安装flvjs

npm install --save flv.js

2、import引入

import flvjs from "flv.js"

3、加入video标签

<div>
     <video id="videoElement1" muted controls width="98%" height="98%"></video>
</div>

4、加载直播url播放视频

 createVideo1() {
        this.url1 = 'http://' + 'localhost:9083' + '/live?app=live&stream=' + this.nebulaData.id + '_' + this.cameraList[0].channel;
        this.pushCameraVideo(this.cameraList[0]);
        if (flvjs.isSupported()) {
          const videoElement1 = document.getElementById('videoElement1')
          this.flvPlayer1 = flvjs.createPlayer({
            type: 'flv',
            isLive: true,
            url: this.url1
          });
          this.flvPlayer1.attachMediaElement(videoElement1);
          try {
            this.flvPlayer1.load();
            this.flvPlayer1.play();
          } catch (error) {
            console.log(error);
          }
        }
      },