Jeecg-Boot 框架中 RTSP 视频流处理解决方案

朔黄

在 Jeecg-Boot 框架中实现 RTSP 视频流的处理，需结合后端转码、流媒体服务器分发以及前端播放。以下是详细解决方案：

一、系统架构设计

1. 架构图

RTSP 源（摄像头） → FFmpeg 转码 → 流媒体服务器（Nginx-RTMP/SRS） → HTTP-FLV/HLS/WebSocket-FLV → Jeecg-Boot 前端播放

2. 核心组件

• FFmpeg：用于 RTSP 流转码为浏览器支持的格式（如 HLS、WebSocket-FLV）。
• Nginx-RTMP 模块：分发 RTMP 流，支持 HTTP-FLV 协议。
• SRS（Simple Realtime Server）：支持 WebSocket-FLV 和 WebRTC。
• 前端播放器：flv.js（H.264）、h265web.js（H.265）、hls.js（HLS）。

二、后端实现（Spring Boot）

1. 搭建转码服务

使用 FFmpeg 将 RTSP 流转码为 HTTP-FLV 或 WebSocket-FLV。

示例 1：HTTP-FLV 转码

ffmpeg -i rtsp://admin:password@192.168.1.64:554/h264/ch1/main/av_stream \
  -c:v libx264 -preset fast -crf 23 \
  -c:a aac -f flv \
  http://localhost:8080/live/stream.flv

示例 2：WebSocket-FLV 转码

ffmpeg -i rtsp://admin:password@192.168.1.64:554/h265/ch1/main/av_stream \
  -c:v libx265 -preset fast -crf 28 \
  -c:a aac -f flv \
  - | websockify --web /path/to/web 8081

2. 配置 Nginx-RTMP

在 nginx.conf 中配置 RTMP 和 HTTP-FLV：

rtmp {
  server {
    listen 1935;
    application live {
      live on;
      exec_static ffmpeg -i rtmp://localhost/live/$name \
        -c copy -f flv http://localhost:8080/live/$name.flv;
    }
  }
}
http {
  server {
    listen 8080;
    location /live {
      flv_live on;
      add_header 'Access-Control-Allow-Origin' '*';
    }
  }
}

3. Spring Boot 控制器

提供转码后的流地址给前端：

@RestController
@RequestMapping("/api/stream")
public class StreamController {
    @GetMapping("/flv")
    public String getFlvStream() {
        return "http://localhost:8080/live/stream.flv";
    }
    @GetMapping("/ws-flv")
    public String getWsFlvStream() {
        return "ws://localhost:8081";
    }
}

三、前端实现（Jeecg-Boot Vue）

1. 安装播放器

npm install flv.js h265web.js hls.js --save

2. 创建播放器组件

H.264 视频流（HTTP-FLV）

<template>
  <div>
    <video id="flvPlayer" controls autoplay></video>
  </div>
</template>
<script>
import flvjs from 'flv.js';
export default {
  mounted() {
    if (flvjs.isSupported()) {
      const video = document.getElementById('flvPlayer');
      const flvPlayer = flvjs.createPlayer({
        type: 'flv',
        url: 'http://localhost:8080/api/stream/flv',
      });
      flvPlayer.attachMediaElement(video);
      flvPlayer.load();
      flvPlayer.play();
    }
  },
};
</script>

H.265 视频流（WebSocket-FLV）

<template>
  <div id="h265-player"></div>
</template>
<script>
import H265Player from 'h265web.js';
export default {
  mounted() {
    const player = new H265Player({
      container: document.getElementById('h265-player'),
      videoUrl: 'ws://localhost:8080/api/stream/ws-flv',
      width: 800,
      height: 450,
    });
    player.init();
  },
};
</script>

HLS 视频流

<template>
  <div>
    <video id="hlsPlayer" controls autoplay></video>
  </div>
</template>
<script>
import Hls from 'hls.js';
export default {
  mounted() {
    const video = document.getElementById('hlsPlayer');
    if (Hls.isSupported()) {
      const hls = new Hls();
      hls.loadSource('http://localhost:8080/api/stream/hls.m3u8');
      hls.attachMedia(video);
    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
      video.src = 'http://localhost:8080/api/stream/hls.m3u8';
    }
  },
};
</script>

四、关键技术实现细节

1. 协议选择

2. FFmpeg 参数优化

• 低延迟：-preset ultrafast -tune zerolatency
• H.264 编码：-c:v libx264 -profile:v baseline -level 3.0
• H.265 编码：-c:v libx265 -preset fast -crf 28

3. 安全性

• HTTPS/WSS：强制使用加密传输。
• 认证机制：
  nginx
location /live {
secure_link $arg_st,$arg_e;
secure_link_md5 "secret$arg_e$uri";
if ($secure_link = "") {
return 403;
}
}


五、常见问题与解决方案

1. 浏览器不支持 H.265

• 解决方案：使用 h265web.js 或将 H.265 转码为 H.264。

2. 延迟过高

• 解决方案：
  
  • 使用 WebSocket-FLV 或 WebRTC（延迟 <1 秒）。
  • 调整 HLS 的 hls_time 参数（如从 4 秒改为 2 秒）。

3. 跨域问题

• 解决方案：
  
  • 在 Nginx 中配置 CORS 头：
    nginx
add_header 'Access-Control-Allow-Origin' '*';

  • 或使用代理转发。

4. 性能问题

• 解决方案：
  
  • 降低视频分辨率或码率。
  • 使用 GPU 硬件加速（如 FFmpeg 的 -hwaccel cuda）。

六、完整部署示例

1. Docker Compose 配置

version: '3'
services:
  nginx-rtmp:
    image: alfg/nginx-rtmp
    ports:
      - "1935:1935"
      - "8080:80"
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf
  ffmpeg-transcoder:
    image: jrottenberg/ffmpeg
    command: >
      ffmpeg -i rtsp://admin:password@192.168.1.64:554/h264/ch1/main/av_stream
      -c:v libx264 -preset fast -crf 23
      -c:a aac -f flv http://nginx-rtmp:8080/live/stream.flv
  jeecg-boot:
    image: your-jeecg-boot-image
    ports:
      - "80:8080"

2. 前端路由配置

在 src/router/index.js 中注册播放器页面：

{
  path: '/video-player',
  name: 'VideoPlayer',
  component: () => import('@/views/video-player/VideoPlayer.vue'),
  meta: { title: '视频播放器' },
}

七、总结

1. RTSP 流需转码：浏览器不支持直接播放 RTSP，需转换为 HTTP-FLV、WebSocket-FLV 或 HLS。
2. 选择合适协议：根据延迟、兼容性需求选择协议。
3. 前端播放器：根据编码格式选择播放器（如 H.265 用 h265web.js）。
4. 优化性能：调整转码参数、降低分辨率或使用硬件加速。

通过以上方案，你可以在 Jeecg-Boot 框架中实现 RTSP 视频流的转码、传输和播放，满足不同场景的需求。