整合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