整合SpringBoot + Nginx-http-flv-module + JavaCV(FFmpeg) RTSP推流,使用VUE + Flv.js播放
1、安装nginx-rtmp-module
参考这边:https://blog.csdn.net/Prinz_Corn/article/details/120746676
2、Maven引入JavaCV包
<dependency>
<groupId>org.bytedeco</groupId>
<artifactId>javacv</artifactId>
<version>1.5.1</version>
</dependency>
<dependency>
<groupId>org.bytedeco</groupId>
<artifactId>ffmpeg-platform</artifactId>
<version>4.1.3-1.5.1</version>
</dependency>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
3、编写Java核心代码
import lombok.Setter;
import lombok.extern.slf4j.Slf4j;
import org.bytedeco.ffmpeg.global.avcodec;
import org.bytedeco.javacv.*;
@Slf4j
public class MediaVideoTransfer {
@Setter
private String src;
@Setter
private String target;
@Setter
private String transportType;
// 帧抓取器(FrameGrabbe)
private FFmpegFrameGrabber grabber;
// 帧录制器/推流器(FrameRecorder)
private FFmpegFrameRecorder recorder;
// 是否启动
@Setter
private boolean isStart = false;
/**
* 开启获取rtsp流
*/
public void live() {
log.info("连接rtsp:" + src + ",开始创建grabber");
boolean isSuccess = createGrabber(src);
if (isSuccess) {
log.info("live:创建grabber成功");
} else {
log.info("live:创建grabber失败");
}
startPushStream();
}
/**
* 构造视频抓取器
*
* @param src 拉流地址
* @return 创建成功与否
*/
private boolean createGrabber(String src) {
// 获取视频源
try {
grabber = FFmpegFrameGrabber.createDefault(src);
grabber.setOption("rtsp_transport", transportType);
grabber.start();
isStart = true;
recorder = new FFmpegFrameRecorder(target, grabber.getImageWidth(), grabber.getImageHeight(), grabber.getAudioChannels());
//avcodec.AV_CODEC_ID_H264
recorder.setVideoCodec(avcodec.AV_CODEC_ID_H264);
//转码格式
recorder.setFormat("flv");
//帧率
recorder.setFrameRate(grabber.getFrameRate());
//采样率
recorder.setSampleRate(grabber.getSampleRate());
//声道
recorder.setAudioChannels(grabber.getAudioChannels());
return true;
} catch (FrameGrabber.Exception e) {
log.error("创建解析FFmpegFrameGrabber失败:", e);
this.stop();
this.reset();
return false;
}
}
/**
* 推送流
*/
private void startPushStream() {
if (grabber == null) {
log.info("重试连接src:" + src + ",开始创建grabber");
boolean isSuccess = createGrabber(src);
if (isSuccess) {
log.info("push:创建grabber成功");
} else {
log.info("push:创建grabber失败");
}
}
try {
recorder.start();
log.info("start recoder");
Frame frame;
while (isStart && (frame = grabber.grabFrame()) != null) {
recorder.setTimestamp(grabber.getTimestamp());
recorder.record(frame);
}
stop();
reset();
log.info("stop recoder");
} catch (FrameGrabber.Exception | RuntimeException | FrameRecorder.Exception e) {
log.error("exception", e);
stop();
reset();
}
}
//停止
private void stop() {
try {
if (recorder != null) {
recorder.stop();
recorder.release();
}
if (grabber != null) {
grabber.stop();
}
} catch (Exception e) {
log.error("stop exception:", e);
}
}
//重置
private void reset() {
recorder = null;
grabber = null;
isStart = false;
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
4、VUE安装video.js和flv.js
直接执行命令安装:
npm install flv.js
npm install video.js
- 1
- 2
5、编写前端测试代码
<template>
<div>
<video autoplay controls width="100%%%%" height="500" id="videoElement"></video>
</div>
</template>
<script>
import flvjs from 'flv.js'
export default {
name: 'liveTes',
props: {
msg: String
},
mounted() {
this.$nextTick(() => {
this.createVideo()
})
},
methods: {
createVideo() {
if (flvjs.isSupported()) {
var videoElement = document.getElementById('videoElement');
var flvPlayer = flvjs.createPlayer(
{
type: 'flv',
url: '---' //你的拉流rtmp或者http等地址
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flvPlayer.play();
}
}
}
}
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
6、运行效果
- 最后启动前后台程序,运行效果如下,由于是监控视频流就打码了。
推荐阅读