使用SpringBoot+ Nginx-http-flv-mod
一、安装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);
}
}
},
