前端→后端→流媒体服务器→摄像头完整详细文字架构图

一、整体四层物理架构

【第一层：前端应用层】→【第二层：后端业务层】→【第三层：流媒体服务层】→【第四层：设备采集层】

适配项目：监控摄像头网页实时预览、WebRTC低延时播放、H265编码、RTSP原始流

二、完整文字架构图

Text

┌─────────────────────────────────────────────────────────────┐
│  第一层：前端应用层（Vue/浏览器）                             │
│  协议：HTTP、WebSocket、WebRTC                               │
│  职责：页面展示、信令交互、视频渲染、用户操作                  │
│  数据格式：RTP视频流（解码后YUV画面）                         │
└───────────────┬─────────────────────────────────────────────┘
                │ 1.HTTP请求(获取播放地址)
                │ 2.WS/WebRTC信令握手(SDP/ICE)
                ▼
┌─────────────────────────────────────────────────────────────┐
│  第二层：后端业务服务层（Java/Go后端）                        │
│  协议：HTTP、MySQL、TCP                                       │
│  职责：登录鉴权、设备管理、权限校验、数据库查询、地址转发      │
│  特点：**不处理任何视频二进制流，只处理业务文本数据**           │
└───────────────┬─────────────────────────────────────────────┘
                │ 3.向内网流媒体服务器请求拉流
                ▼
┌─────────────────────────────────────────────────────────────┐
│  第三层：流媒体服务器（SRS/ZLMediaKit/FFmpeg）                │
│  协议：RTSP、RTP、RTCP、WebRTC                                │
│  职责：拉流、协议转换、封包转发、编码透传、网络抖动处理       │
│  流转处理：RTSP(H265) ➜ 转封装 ➜ WebRTC(H265)                │
└───────────────┬─────────────────────────────────────────────┘
                │ 4.主动拉取摄像头RTSP流
                ▼
┌─────────────────────────────────────────────────────────────┐
│  第四层：设备采集层（IPC网络摄像头）                          │
│  协议：RTSP、ONVIF                                            │
│  编码：H265(HEVC)/H264                                        │
│  职责：画面采集、图像编码、NALU封包、对外推送RTSP视频流        │
└─────────────────────────────────────────────────────────────┘

三、逐步骤详细全流程

阶段一：业务请求阶段

步骤1：前端发起预览请求

Vue前端页面点击播放，前端发送HTTP请求：/api/camera/preview?cameraId=xxx。

传输内容：摄像头ID、token令牌、用户权限信息。

步骤2：后端业务服务校验

1、校验登录token是否有效；2、判断当前用户是否有权限查看该摄像头；3、查询数据库，获取摄像头内网RTSP地址、编码格式、端口、账号密码。

步骤3：后端请求流媒体服务器

后端调用流媒体接口，告知流媒体：需要拉取某摄像头RTSP流，并生成WebRTC播放地址。

步骤4：流媒体服务器预创建通道

流媒体服务预留播放端口、生成唯一播放标识，返回WebRTC信令地址给到后端。

步骤5：后端返回最终播放参数给前端

返回内容：webrtc地址、流媒体ip、端口、token、编码格式（H265）。

阶段二：WebRTC信令握手阶段

步骤6：前端开始WebRTC初始化

前端new RTCPeerConnection，创建音视频轨道，准备接收远端流。

步骤7：前端发送SDP Offer

携带本机支持的编码、分辨率、加密套件、端口，发给流媒体服务器。

步骤8：流媒体返回SDP Answer

告诉前端：我这边视频是H265编码、固定帧率、RTP端口。

步骤9：ICE候选地址交换

交换内网IP、公网IP、端口，完成UDP连通性检测，打通传输通道。

阶段三：视频流转码传输阶段

步骤10：流媒体服务器主动拉取摄像头RTSP流

流媒体以客户端身份，访问摄像头RTSP地址，建立TCP连接。

步骤11：摄像头源源不断推送H265裸流

摄像头内部：CMOS采集画面 → H265编码器压缩 → NALU数据包 → RTSP封装发出。

步骤12：流媒体服务器协议转换（核心）

不重新编码（不耗CPU），只做协议层转封装：

RTSP传输格式 ➜ 拆解NALU ➜ 重新封装为RTP包 ➜ WebRTC标准格式。

步骤13：流媒体向前端推送RTP视频包

基于UDP协议传输，低延时、不重传，配合RTCP做带宽自适应。

阶段四：前端渲染播放

步骤14：前端浏览器解码H265

浏览器内置解码器，将H265的RTP包解压为YUV原始图像。

步骤15：video标签渲染画面

完成播放，整体延时：200~350ms。

四、每层服务器严格职责划分（重点）

1、前端（Vue）

只做：信令交互、解码渲染、用户操作
不做：视频编码、保存视频、转发视频

2、后端业务（Java）

只做：权限、用户、设备、数据库、地址转发
绝对不碰视频二进制流（否则带宽爆炸、卡顿严重）

3、流媒体服务器（核心中间件）

专门处理：RTSP、RTMP、WebRTC、FLV、HLS
负责：拉流、推流、协议转换、限流、并发、缓冲
是整个监控系统的流量中转站

4、摄像头IPC

只负责：采集、编码、出RTSP流
主流编码：H265（节省一半带宽）

五、整条链路协议流转汇总

摄像头：H265编码 + RTSP传输协议

流媒体内部：RTSP拆包 → RTP重组 → WebRTC信令封装

流媒体→前端：WebRTC + UDP + RTP实时流

业务通信：HTTP + WebSocket

六、常见疑问

1、为什么后端不能直接推视频？

视频流量极大，后端是业务服务器，扛不住高并发二进制流，必须剥离给流媒体。

2、为什么摄像头要用RTSP？

RTSP是安防行业标准，所有海康、大华、宇视摄像头通用，稳定、标准、低开销。

3、为什么前端要用WebRTC？

浏览器无插件、延时最低、支持H265、自带抗丢包、适合监控实时预览。

Web监控架构整理

前端→后端→流媒体服务器→摄像头 完整详细文字架构图