视频编码、流协议、前端播放器的关系
1. 三者分别是什么
| 类型 | 作用 | 代表 |
|---|---|---|
| 编码格式 | 压缩视频 | H.264、H.265 |
| 流协议 | 传输视频 | RTSP、RTMP、HLS、WebRTC |
| 播放器 | 浏览器播放 | hls.js、mpegts.js、Jessibuca |
2. 整体链路
摄像头↓
H.264 / H.265↓
RTSP / RTMP↓
流媒体服务器↓
HLS / FLV / WebRTC↓
播放器↓
浏览器
例如：
海康摄像头↓ H.265
RTSP↓
ZLMediaKit↓
HTTP-FLV↓
mpegts.js↓
Chrome浏览器
3. 浏览器为什么不能直接播放 RTSP
现代浏览器没有 RTSP 协议栈。
因此：
RTSP↓
浏览器
无法播放。
通常需要流媒体服务器转换：
RTSP↓
HLS / HTTP-FLV / WebRTC↓
浏览器
4. 常见播放器选型
| 播放器 | 主要适用场景 | 支持协议 | 编码支持 | 商用/开源 |
|---|---|---|---|---|
| hls.js | HLS播放 / 点播 | HLS (.m3u8) | H.264 / AAC（最佳），H.265（部分浏览器硬解） | MIT 开源 |
| mpegts.js | 低延迟直播 / 监控 | HTTP-FLV / WebSocket-FLV / MPEG-TS | H.264 / H.265（依赖解码能力） | MIT 开源 |
| video.js | 点播平台 / CMS | HLS（插件）/ MP4 / DASH | H.264 / H.265（依赖浏览器） | Apache-2.0 开源 |
| xgplayer | 通用视频平台 | HLS / FLV / DASH / WebRTC（插件） | H.264 / H.265（WASM插件支持） | MIT 开源（字节） |
| Jessibuca | 安防监控 | HTTP-FLV / WebSocket / WebRTC | H.264 / H.265（WASM软解） | 商用 + 部分开源 |
| EasyPlayer.js | H.265监控 / 专业安防 | RTSP（代理）/ HLS / FLV / WebRTC | H.264 / H.265（强WASM支持） | 商用（TSINGSEE） |
5. H.265为什么经常黑屏
原因通常不是 RTSP。
而是浏览器缺少 H.265 解码能力。
摄像头(H.265)↓
RTSP↓
浏览器↓
黑屏
解决方案：
方案一：转码H.265↓
H.264↓
浏览器
方案二：使用支持H.265的播放器H.265↓
EasyPlayer.js
Jessibuca
WebRTC↓
浏览器
6. 常见方案
| 场景 | 推荐方案 |
|---|---|
| IPC监控 | H.264/H.265 + RTSP |
| 监控大屏 | HTTP-FLV + mpegts.js |
| 手机浏览器 | HLS + hls.js |
| 视频会议 | WebRTC |
| 超低延迟监控 | WebRTC |
总结
编码负责压缩
协议负责传输
播放器负责显示
H.265↓
RTSP↓
ZLMediaKit↓
HTTP-FLV↓
mpegts.js↓
Chrome
这就是监控平台最常见的一条视频链路。
