首页 > 软件编程 > java > SpringBoot Vue视频广场功能

基于SpringBoot+Vue实现视频广场功能的操作教程

2026-07-21 08:39:25 作者：霸道流氓气质

本文详细讲解在SpringBoot+Vue2技术栈下,利用flv.js和ZLMediaKit构建视频监控广场,实现分组、通道选择及最多6路同屏预览功能,涵盖技术架构、LRU替换策略、常见问题如403权限错误和6路并发限制的解决方案,帮助开发者快速落地监控墙项目,需要的朋友可以参考下

适用场景：需要在 Web 管理后台中，提供"分组 → 通道 → 多路同屏预览"的监控能力。
技术栈：Spring Boot + Vue2（RuoYi 风格）+ flv.js + ZLMediaKit（RTSP→HTTP-FLV 代理）。

一、功能概述

需求要点：

新增"视频广场"页面
三栏布局：
- 左：分组（料棚）列表，先选分组。
- 中：当前分组下的通道（设备）列表。
- 右：视频预览区，最多 6 路同屏；点第 7 路时关闭最早的一路（LRU 滚动替换）。
视频窗口不显示进度条/下载等原生控件，点击窗口可全屏。
设备不在线时不预览，并给出提示。
每路视频叠加设备名 + 手动关闭按钮。

二、技术架构设计

2.1 总体架构

┌────────────────────────────────────────────────────────────┐
│  浏览器（Vue2 + flv.js）                                      │
│  ┌─────────┐  ┌─────────┐  ┌─────────┐  ...(最多6路)        │
│  │VideoCell│  │VideoCell│  │VideoCell│  HTTP-FLV 长连接       │
│  └────┬────┘  └────┬────┘  └────┬────┘                        │
└───────┼────────────┼────────────┼───────────────────────────┘
        │   getStreamUrl(deviceId) / closeStream(deviceId)
        ▼
┌────────────────────────────────────────────────────────────┐
│  后端（Spring Boot）                                          │
│  BusDeviceController → ZlmStreamService                      │
│    openStream / closeStream（调用 ZLMediaKit 的 HTTP API）    │
└───────┬──────────────────────────────────────────────────────┘
        │  addStreamProxy / delStreamProxy (REST)
        ▼
┌──────────────────┐        ┌────────────────────────┐
│ ZLMediaKit 流媒体 │◄─RTSP──┤ 摄像头 / NVR（海康等）  │
│  RTSP→HTTP-FLV    │        │  rtsp://user:pwd@ip/... │
└──────────────────┘        └────────────────────────┘

2.2 技术选型说明

层	选型	理由
前端播放	flv.js（HTTP-FLV / MSE）	浏览器不支持原生 RTSP，需经流媒体转封装；flv.js 兼容性最好
流媒体	ZLMediaKit	轻量、支持 RTSP 推/拉代理、转 HTTP-FLV，并提供 `addStreamProxy`/`delStreamProxy` REST 接口
后端	仅做"建流 + 返地址"，不转码	转码吃 CPU，交给 ZLM；后端只调用 ZLM 的 HTTP API
设备离线判断	业务状态字段（`status`）	无独立"摄像头在线"心跳，以设备状态 `离线` 作为不预览依据

2.3 数据流（单路播放）

前端点通道 → getStreamUrl(deviceId)。
后端查设备拿到 RTSP 地址，调 ZLM addStreamProxy 按需拉起代理，返回 http://zlm:port/live/dev_1.flv。
前端把该 FLV 地址交给 flv.js 建 Player，<video> 播放。
关闭时（手动/被 LRU 淘汰/销毁）调 closeStream(deviceId) → ZLM delStreamProxy 释放拉流资源。

2.4 为什么最多 6 路？——并发路数瓶颈

这是设计 6 路监控墙的硬约束来源，务必理解：

浏览器同域名并发连接（最硬约束）：HTTP-FLV 是 chunked 长连接，每路占一个 HTTP 连接不释放。HTTP/1.1 下 Chrome/Edge 对同一域名+端口最多 6 个并发连接。ZLM 默认单 httpPort，因此第 7 路会被排队卡死。6 路正好踩在安全上限。
- 突破办法：ZLM 开 HTTPS + HTTP/2（多路复用）、多端口/多域名分散、或改用 WebSocket-FLV / WebRTC（不吃 6 连接限制）。
客户端解码性能（实际天花板）：flv.js 是"JS 解封装 + MSE"，每路 1080p 占数百 MB 内存 + 可观 CPU。普通 PC 流畅约 4~9 路；切子码流（D1/720p）可显著提升。
服务端 ZLMediaKit：拉流代理取决于带宽/CPU，几十上百路通常无压力。
摄像头/NVR 侧：单台 RTSP 并发取流有限（约 6 路）。但多个前端看同一摄像头时，ZLM 只向上游拉 1 路再分发，故此层被 ZLM 挡住，一般不构成瓶颈。

2.5 关键设计点

单路抽成子组件 VideoCell：父页面只维护"6 路队列"，子组件自己管拉流/全屏/关闭/销毁，职责清晰、可复用。
固定 6 格监控墙：用 null 占位不足 6 格，更像监控中心；key=c.id 让 Vue 复用组件、切换时不黑屏。
强制释放资源：VideoCell 在 beforeDestroy 调 closeStream；菜单设 is_cache=0（离开即销毁组件），避免拉流连接堆积。

三、完整实现流程（基于本项目）

3.1 后端：视频流代理服务

ZlmStreamService 用 ZLM 的 REST API 建/断流，后端不转码：

@Service
public class ZlmStreamService {
    private static final String STREAM_PREFIX = "dev_";
    @Autowired private ZlmProperties zlmProperties;
    @Autowired private RestTemplate restTemplate;

    /** 按需拉起 RTSP 代理，返回 HTTP-FLV 地址；幂等（流已存在不报错） */
    public String openStream(Long deviceId, String rtspUrl) {
        String streamId = STREAM_PREFIX + deviceId;
        try {
            URI uri = UriComponentsBuilder
                .fromHttpUrl(buildApiBase() + "/index/api/addStreamProxy")
                .queryParam("secret", zlmProperties.getSecret())
                .queryParam("vhost", "__defaultVhost__")
                .queryParam("app", zlmProperties.getApp())
                .queryParam("stream", streamId)
                .queryParam("url", rtspUrl)
                .build().encode().toUri();
            restTemplate.postForEntity(uri, null, String.class);
        } catch (Exception e) {
            log.warn("ZLMediaKit addStreamProxy 异常：{}", e.getMessage());
        }
        return buildFlvUrl(streamId);
    }

    /** 释放拉流资源 */
    public void closeStream(Long deviceId) {
        String streamId = STREAM_PREFIX + deviceId;
        String streamKey = zlmProperties.getApp() + "/" + streamId;
        try {
            URI uri = UriComponentsBuilder
                .fromHttpUrl(buildApiBase() + "/index/api/delStreamProxy")
                .queryParam("secret", zlmProperties.getSecret())
                .queryParam("streamKey", streamKey)
                .build().toUri();
            restTemplate.getForEntity(uri, String.class);
        } catch (Exception e) {
            log.warn("ZLMediaKit delStreamProxy 异常：{}", e.getMessage());
        }
    }

    private String buildApiBase() {
        return "http://" + zlmProperties.getHost() + ":" + zlmProperties.getHttpPort();
    }
    private String buildFlvUrl(String streamId) {
        return "http://" + zlmProperties.getPlayHost() + ":" + zlmProperties.getHttpPort()
                + "/" + zlmProperties.getApp() + "/" + streamId + ".flv";
    }
}

Controller 侧 getStreamUrl(deviceId) 成功返回 code=200 + flvUrl；无视频地址时返回 code=500, msg="设备未配置视频地址"（被前端拦截器 reject，进入 .catch）。接口带 @PreAuthorize("@ss.hasPermi('system:device:query')")，授权时别漏。

3.2 前端：单路视频组件VideoCell

路径：ruoyi-ui/src/components/VideoCell/index.vue（核心逻辑）：

<video> 不挂 controls → 无进度条/下载按钮；点击调 requestFullscreen。
挂载即 loadStream()；beforeDestroy 销毁 player 并 closeStream 释放资源。
监听 flvjs.Events.ERROR 做断流自动恢复；首帧 8s 宽限判失败 + 有限重试（2 次）。
监听 visibilitychange：切后台 tab 时 pause() 省 CPU，回前台 play()。
接收 status 渲染在线/离线角标；status==='离线' 显示灰罩。

play() 关键配置（降低直播延迟、防内存膨胀）：

const player = flvjs.createPlayer({
  type: 'flv', isLive: true, url: flvUrl
}, {
  enableStashBuffer: false,
  stashInitialSize: 128,
  autoCleanupSourceBuffer: true,
  liveBufferLatencyChasing: true
})

3.3 前端：视频广场主页面（三栏 + 6 格墙 + LRU）

路径：ruoyi-ui/src/views/system/videosquare/index.vue。核心逻辑：

const MAX_PREVIEW = 6
const POLL_INTERVAL = 10000
data() {
  return {
    shedList: [], currentShedId: null,
    deviceList: [], playingList: [], pollTimer: null
  }
}
computed: {
  // 固定 6 格：不足用 null 占位
  cells() {
    const arr = this.playingList.slice()
    while (arr.length < MAX_PREVIEW) arr.push(null)
    return arr
  }
}
mounted() {
  this.getShedList()
  // 每 10s 轮询刷新设备状态（含预览中设备的实时在线情况）
  this.pollTimer = setInterval(() => this.getDeviceList(false), POLL_INTERVAL)
}
beforeDestroy() { if (this.pollTimer) clearInterval(this.pollTimer) }
// 点击设备：加入预览
addPreview(device) {
  if (!device || device.id == null) return
  if (device.status === '离线') {
    this.$message.warning(`设备【${device.deviceName}】不在线，无法预览`)
    return
  }
  if (!device.videoUrl) {
    this.$message.warning(`设备【${device.deviceName}】未配置视频地址`)
    return
  }
  // 已在预览：按"最近使用"置顶（移到队尾，画面不中断）
  const existIdx = this.playingList.findIndex(d => d.id === device.id)
  if (existIdx >= 0) {
    const item = this.playingList.splice(existIdx, 1)[0]
    this.playingList.push(item)
    this.$message.info(`已将【${device.deviceName}】置为最近预览`)
    return
  }
  // 满 6 路：关掉最早的一路（shift 触发 cell 销毁并释放拉流）
  if (this.playingList.length >= MAX_PREVIEW) {
    const removed = this.playingList.shift()
    this.$message.info(`已达 ${MAX_PREVIEW} 路上限，已关闭最早的【${removed.deviceName}】`)
  }
  this.playingList.push({ id: device.id, deviceName: device.deviceName, status: device.status })
}

轮询刷新后还需把最新 status 同步进预览队列，驱动角标/灰罩：

syncPlayingStatus() {
  this.playingList.forEach(p => {
    const dev = this.deviceList.find(d => d.id === p.id)
    if (dev) p.status = dev.status
  })
}

四、通用示例代码

4.1 通用后端（Spring Boot + ZLM）

@RestController
@RequestMapping("/api/stream")
public class StreamController {

    @Autowired private ZlmClient zlmClient;        // 封装 ZLM 的 addStreamProxy/delStreamProxy
    @Autowired private ChannelService channelService; // 你的通道/摄像头配置服务

    /** 获取某通道的播放地址（按需建流） */
    @GetMapping("/url")
    public Result getUrl(@RequestParam Long channelId) {
        Channel ch = channelService.getById(channelId);
        if (ch == null) return Result.fail("通道不存在");
        if (ch.getRtspUrl() == null) return Result.fail("通道未配置视频地址");
        String flv = zlmClient.openStream(channelId, ch.getRtspUrl());
        return Result.ok(Map.of("flvUrl", flv));
    }

    /** 关闭流（释放资源） */
    @GetMapping("/close")
    public Result close(@RequestParam Long channelId) {
        zlmClient.closeStream(channelId);
        return Result.ok();
    }
}

通用要点：后端只返回播放地址，不关心前端用几路、怎么布局；通道的"在线"建议在 Channel 上维护一个 online 布尔字段（由设备心跳/保活更新），比纯状态字符串更通用。

4.2 通用前端 API 封装

// api/stream.js
import axios from 'axios'
const http = axios.create({ baseURL: '/api' })
export function getStreamUrl(channelId) {
  return http.get('/stream/url', { params: { channelId } })
}
export function closeStream(channelId) {
  return http.get('/stream/close', { params: { channelId } })
}

4.3 通用单路视频组件VideoCell.vue

<template>
  <div class="video-cell" @click="fullscreen">
    <video ref="v" autoplay muted playsinline v-show="flvUrl && !error"></video>
    <div class="title">
      <span class="dot" :class="dotClass"></span>{{ name }}
    </div>
    <div class="close" @click.stop="$emit('close', channelId)">×</div>
    <div class="mask" v-if="!flvUrl || error">{{ error || '加载中…' }}</div>
  </div>
</template>
<script>
import flvjs from 'flv.js'
import { getStreamUrl, closeStream } from '@/api/stream'
export default {
  props: {
    channelId: { type: [Number, String], required: true },
    name: { type: String, default: '' },
    online: { type: Boolean, default: true }
  },
  data: () => ({ flvUrl: '', error: '', player: null, retry: 0, maxRetry: 2 }),
  computed: {
    dotClass() { return this.online ? 'on' : 'off' }
  },
  mounted() {
    this.load()
    document.addEventListener('visibilitychange', this.onVis)
  },
  beforeDestroy() {
    document.removeEventListener('visibilitychange', this.onVis)
    this.destroy()
  },
  methods: {
    async load() {
      if (!this.online) { this.error = '设备已离线'; return }
      this.error = ''
      try {
        const { data } = await getStreamUrl(this.channelId)
        this.flvUrl = data.flvUrl
        this.$nextTick(() => this.play(this.flvUrl))
      } catch (e) {
        this.error = e.response ? '流媒体服务异常' : '网络异常'
      }
    },
    play(url) {
      if (!flvjs.isSupported()) { this.error = '浏览器不支持 flv.js'; return }
      this.destroy()
      const v = this.$refs.v
      const p = flvjs.createPlayer({ type: 'flv', isLive: true, url },
        { enableStashBuffer: false, autoCleanupSourceBuffer: true, liveBufferLatencyChasing: true })
      this.player = p
      p.attachMediaElement(v); p.load(); p.play()
      p.on(flvjs.Events.ERROR, () => this.recover())
      // 首帧宽限 8s
      setTimeout(() => { if (this.player && v.readyState < 2) this.recover() }, 8000)
    },
    recover() {
      if (document.hidden || this.retry >= this.maxRetry) {
        if (this.retry >= this.maxRetry) this.error = '视频加载失败'
        return
      }
      this.retry++
      setTimeout(() => this.load(), 1500) // 有限重试
    },
    destroy() {
      if (this.player) {
        try { this.player.pause(); this.player.unload(); this.player.detachMediaElement(); this.player.destroy() } catch (e) {}
        this.player = null
      }
      closeStream(this.channelId).catch(() => {})
    },
    onVis() {
      const v = this.$refs.v
      if (!v) return
      document.hidden ? v.pause() : v.play().catch(() => {})
    },
    fullscreen() {
      const el = this.$refs.v
      el.requestFullscreen ? el.requestFullscreen() : el.webkitRequestFullscreen && el.webkitRequestFullscreen()
    }
  }
}
</script>
<style scoped>
.video-cell { position: relative; width: 100%; height: 100%; background: #000; cursor: pointer; }
video { width: 100%; height: 100%; object-fit: contain; }
.title { position: absolute; top: 6px; left: 8px; color: #fff; font-size: 12px; background: rgba(0,0,0,.55); padding: 2px 8px; border-radius: 3px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.dot.on { background: #67c23a; } .dot.off { background: #909399; }
.close { position: absolute; top: 4px; right: 6px; color: #fff; background: rgba(0,0,0,.55); width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 50%; }
.mask { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #c0c4cc; background: #000; font-size: 13px; }
</style>

4.4 通用视频墙VideoWall.vue（三栏 + 6 格 LRU）

<template>
  <div class="wall-page">
    <!-- 左：分组 -->
    <aside class="col left">
      <div class="tt">分组</div>
      <ul>
        <li v-for="g in groups" :key="g.id" :class="{active: g.id===curGroup}"
            @click="selectGroup(g)">{{ g.name }}</li>
      </ul>
    </aside>
    <!-- 中：通道 -->
    <aside class="col mid">
      <div class="tt">通道（{{ channels.length }}）</div>
      <ul>
        <li v-for="c in channels" :key="c.id" @click="preview(c)">
          <span class="dot" :class="c.online ? 'on':'off'"></span>
          {{ c.name }}
          <em v-if="inWall(c.id)">预览中</em>
        </li>
      </ul>
    </aside>
    <!-- 右：监控墙 -->
    <section class="col right">
      <div class="tt">预览（{{ playing.length }}/6）</div>
      <div class="grid">
        <div class="cell" v-for="(c,i) in cells" :key="c ? 'c'+c.id : 'e'+i">
          <VideoCell v-if="c" :channelId="c.id" :name="c.name" :online="c.online" @close="closeCell" />
          <div v-else class="empty">空闲</div>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
import VideoCell from '@/components/VideoCell.vue'
const MAX = 6, POLL = 10000
export default {
  components: { VideoCell },
  data: () => ({ groups: [], curGroup: null, channels: [], playing: [], timer: null }),
  computed: {
    cells() {
      const a = this.playing.slice()
      while (a.length < MAX) a.push(null)
      return a
    }
  },
  mounted() {
    this.loadGroups()
    this.timer = setInterval(() => this.loadChannels(false), POLL) // 状态轮询
  },
  beforeDestroy() { clearInterval(this.timer) },
  methods: {
    async loadGroups() {
      this.groups = await api.getGroups()
      if (this.groups[0]) this.selectGroup(this.groups[0])
    },
    async selectGroup(g) {
      this.curGroup = g.id
      this.loadChannels(true)
    },
    async loadChannels(clear) {
      if (!this.curGroup) return
      if (clear) this.channels = []
      this.channels = await api.getChannels(this.curGroup)
      // 同步预览队列在线状态
      this.playing.forEach(p => {
        const ch = this.channels.find(c => c.id === p.id)
        if (ch) p.online = ch.online
      })
    },
    preview(ch) {
      if (!ch.online) { this.$message.warning(`${ch.name} 不在线`); return }
      const i = this.playing.findIndex(p => p.id === ch.id)
      if (i >= 0) { // 已在预览：置顶
        this.playing.push(this.playing.splice(i, 1)[0])
        return
      }
      if (this.playing.length >= MAX) {
        const r = this.playing.shift()
        this.$message.info(`已达 ${MAX} 路，已关闭最早的【${r.name}】`)
      }
      this.playing.push({ id: ch.id, name: ch.name, online: ch.online })
    },
    inWall(id) { return this.playing.some(p => p.id === id) },
    closeCell(id) {
      const i = this.playing.findIndex(p => p.id === id)
      if (i >= 0) this.playing.splice(i, 1)
    }
  }
}
</script>
<style scoped>
.wall-page { display: flex; height: 100vh; gap: 10px; padding: 10px; box-sizing: border-box; }
.col { background: #fff; border-radius: 4px; display: flex; flex-direction: column; overflow: hidden; }
.left { flex: 0 0 200px; } .mid { flex: 0 0 300px; } .right { flex: 1; min-width: 0; }
.tt { padding: 10px 12px; font-weight: 600; border-bottom: 1px solid #ebeef5; }
.grid { flex: 1; display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(2,1fr); gap: 8px; padding: 8px; }
.cell { position: relative; background: #000; border-radius: 4px; overflow: hidden; }
.empty { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #909399; border: 1px dashed #dcdfe6; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.dot.on { background: #67c23a; } .dot.off { background: #909399; }
</style>

通用化要点总结：把"分组/通道"做成任意可枚举的树或列表即可；MAX 与 POLL 作为常量暴露，方便后续改 4/9/16 路或调整轮询间隔；"在线"用布尔 online 而非业务状态字符串，便于和任何心跳机制对接。

五、常见问题（FAQ）

Q1：进入页面能看到菜单，但一点"预览"就 403？
拉流接口受 system:device:query 权限保护，而菜单权限是 system:videosquare:view。给角色同时授权两个标识即可。

Q2：页面看不到"视频广场"菜单？
RuoYi 动态路由在登录时拉取并缓存，单纯刷新页面不会重载。必须重新登录。确认 SQL 已执行、菜单 visible='0'（显示）且角色已授权。

Q3：为什么最多只能 6 路？第 7 路拉不出来？
见 2.4 节：HTTP/1.1 同域名并发连接上限为 6。ZLM 单端口下第 7 路会被排队。要么控制在 6 路内（本设计），要么 ZLM 开 HTTP/2/HTTPS、用多端口，或改 WebSocket-FLV / WebRTC。

Q4：视频黑屏/一直在"加载中"？

摄像头 rtspUrl 配错或摄像头离线 → 后端 addStreamProxy 拉不到流，前端 8s 宽限后触发重试，最终提示失败。
ZLM 服务没启动或 secret/host 配错 → 网络异常提示。
浏览器不支持 flv.js（旧 Safari）→ 提示换 Chrome/Edge。

Q5：关闭页面后摄像头还在被拉流（ZLM 连接不释放）？

正常 beforeDestroy 会 closeStream；但强制刷新/直接关标签页时 beforeDestroy 不保证触发。兜底：确认 ZLMediaKit config.ini 的 *_idle_timeout 已开启，空闲自动断流。
菜单务必设 is_cache=0，离开即销毁组件释放资源。

Q6：多个前端看同一摄像头会重复拉流吗？
不会。ZLM 按 stream=dev_{id} 去重，多前端只向上游拉 1 路再分发，因此并发瓶颈主要在浏览器侧而非摄像头侧。

Q7：想支持更多路（9/16 路）怎么办？
优先改传输协议为 WebRTC / WS-FLV（绕开同域名 6 连接限制）；同时让摄像头出子码流（低分辨率），降低前端解码压力。

以上就是基于SpringBoot+Vue实现视频广场功能的操作教程的详细内容，更多关于SpringBoot Vue视频广场功能的资料请关注脚本之家其它相关文章！