前端视角聊聊监控接入：RTSP、WebSocket 和 WSPlayer

前端做久了你会发现，“视频”这东西看起来简单，其实水很深。尤其是遇到监控项目，RTSP 流进来，老板一句“页面上能不能看看”，就把我送进了流媒体的世界。

这篇文章记录我在实际开发项目中，从前端角度接入监控视频的全过程，分享一些踩过的坑和思路，希望能帮到你。

🧩 项目背景

这个项目包含了 大屏、后台管理、小程序 三个端口这里（主要分享页面上的实现思路，小程序可以直接使用video组件来播放实时视频），功能有不少都涉及实时监控画面。后端给我们的是设备 RTSP 流地址，而我们作为前端要负责：

视频的播放（不能卡顿）
视频的切换（不能黑屏）
视频的兼容（不能只在 Chrome 播）

然后就开始查：RTSP？浏览器压根不支持啊！

🤝 与后端的沟通

说真的，这种视频类需求，前后端一定要提前沟通清楚：

视频源是什么协议？（RTSP/RTMP/flv）
播放地址是否稳定？是否带 token？
播放平台能不能转 WebSocket？
有没有推荐的播放器？

后端同事说：“我们用大华的 DSS 转 WebSocket 流，你那边用 WSPlayer 播吧，比较稳。”

听起来靠谱，于是开始折腾 WSPlayer。

🔧 前端接入流程（用白话讲）

1. 获取播放地址

和后端约定了个接口，比如 /api/getCameraStream，我们传摄像头 ID 它返回：

{
  "wsURL": "ws://121.xx.xx.xx:9100",
  "rtsp": "rtsp://xxx",
  "token": "abcdefg"
}

前端需要拼成：

1	const finalURL = `${rtsp}?token=${token}`

这个 URL 是给播放器用的。

2. 初始化 WSPlayer

直接上代码，看起来很多，其实是配置项 + 回调：

前往大华ICC开放平台：ICC开放平台下载WSPlayer套件
在项目静态资源中引入 demo 中的WSPlayer文件
然后在index.html中进行引入

1
2
3

<script src="/src/utils/icc/videoPlayer.js" type="module"></script>
<script src="./public/static/dhPro/WSPlayer/PlaySDKInterface.js" type="module"></script>
<script src="./public/static/dhPro/WSPlayer/WSPlayer.js" type="module"></script>

创建播放器

import PlayerManager from "@/utils/icc/PlayerManager";
myVideoPlayer = new PlayerManager({
  el: props.videoId,
  type: 'real',
  wsURL: 'ws://121.xx.xx.xx:9100',
  num: 1,
  useH265MSE: true,
  receiveMessageFromWSPlayer: (event, data) => {
    if (event === 'initializationCompleted') {
      playReal()
    }
  }
})

重点参数说明：

type: 'real' 是实时预览
wsURL 是 WebSocket 通道地址
useH265MSE: true 表示启用硬解码
receiveMessageFromWSPlayer 是播放器的生命周期钩子，比如播放成功、失败等都能在这监听

3. 播放 RTSP 视频流

一旦播放器初始化成功，就可以播放：

myVideoPlayer.realByUrl({
  rtspURL: finalURL,
  wsURL: 'ws://121.xx.xx.xx:9100',
  streamType: '1',
  playerAdapter: 'stretching'
})

页面上就能直接看到视频了！

💥 遇到的一些坑

🕳 token 失效

第一次播放正常，第二次切换视频突然黑屏？原来是 token 过期了，我们的接口得实时拉新的地址，不然就用旧地址播不出来。

🕳 页面切换导致资源没释放

切换路由或者页面隐藏时，视频还在播放，造成性能开销。加了监听来自动销毁播放器：

document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
    destroyPlayer()
  }
})

🕳 全屏布局错乱

全屏之后我们有多路播放布局，有时会乱套，要手动设置布局方案重新挂载。

📝 小结一下（前端人的经验谈）

RTSP 无法直接在浏览器播放，需要依赖后端中转（WebSocket 是最兼容的方式）；
WSPlayer 是大华生态下比较成熟的播放器，稳定性不错，但资料较少，建议二次封装；
前端重点是：拿到播放地址、初始化播放器、监听事件、资源释放；

🚀 最后一句话

别看只是“能不能播个监控”，背后涉及的协议、性能、兼容、体验都不少。作为前端，能把这些流程通吃，已经是很有含金量的能力了。