一、安裝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、安裝依賴項(xiàng)（如果是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壓縮包解壓之后的根目錄下執(zhí)行如下命令：

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

注意：
1）--prefix=的目錄不能和在nginx壓縮包解壓之后的目錄為同一目錄，會(huì)報(bào)錯(cuò)
2）如果在執(zhí)行./configure命令時(shí)提示找不到openssl，需加參數(shù)./configure --prefix=/usr/local/nginx --add-module=/usr/local/nginx/nginx-http-flv-module --with-openssl=<path>
3）如果執(zhí)行make命令時(shí)出現(xiàn)如下錯(cuò)誤：
/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
出錯(cuò)是因?yàn)镹ginx在編譯時(shí)并不能在/usr/local/ssl/.openssl/ 這個(gè)目錄找到對(duì)應(yīng)的文件，其實(shí)我們打開/usr/local/ssl/這個(gè)目錄可以發(fā)現(xiàn)這個(gè)目錄下是沒(méi)有.openssl目錄的，因此我們修改Nginx編譯時(shí)對(duì)openssl的路徑選擇就可以解決這個(gè)問(wèn)題了
解決方案：
打開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"

然后再進(jìn)行Nginx的編譯安裝即可。

二 、修改nginx.conf，啟動(dòng)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測(cè)試，所以直接執(zhí)行

brew install ffmpeg

四、編寫Java方法，利用ffmpeg命令推流，將大華攝像機(jī)的rtsp流轉(zhuǎn)為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標(biāo)簽

<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);
          }
        }
      },