HTML5无法直接播放RTSP流，需先转协议为WebRTC/HLS/MSE；WebRTC支持canvas帧级水印，但Safari不支持captureStream()，全平台兼容推荐UI层覆盖或服务端加水印。
HTML5 无法直接播放 RTSP 流，更谈不上加水印
RTSP 是一种实时流协议，依赖服务端推流和客户端拉流，而 HTML5 的 标签原生只支持 HTTP(S) 协议下的 MP4、WebM、Ogg 等格式，不支持 RTSP。浏览器本身没有 RTSP 解析能力，所以“HTML5 播放 RTSP 并加水印”这个前提就不存在——你得先解决播放问题，水印才是后续步骤。
必须转协议：RTSP → WebRTC / HLS / MSE（推荐 WebRTC）
要让 RTSP 在网页中可用，必须通过中间服务将 RTSP 转成浏览器能解的格式。常见路径有：
- RTSP → WebRTC（低延迟，适合安防、监控场景，推荐用
janus-gateway或mediasoup） - RTSP → HLS（兼容性好，但延迟高，通常 >10s，需注意
.m3u8刷新频率和分片时长） - RTSP → HTTP-FLV / MSE（需自建流媒体服务如
SRS，前端用flv.js播放）
其中 WebRTC 方案最利于后续加水印：它把视频帧以 MediaStream 形式暴露给 JS，你可以用 canvas 实时绘制叠加内容。
WebRTC 场景下加水印的实操要点
假设你已用 janus-gateway 将 RTSP 推流转为 WebRTC，并在前端拿到 MediaStream（例如通过 peerConnection.getReceivers()[0].track），水印需走 canvas 帧处理：
立即学习“前端免费学习笔记（深入）”；
- 创建
和隐藏的，把MediaStream绑定到的srcObject - 用
requestAnimationFrame循环调用canvas.getContext('2d').drawImage(video, ...)抽帧 - 在 drawImage 后立即用
fillText()或drawImage(logoCanvas)叠加文字/图片水印 - 将 canvas 转为新
MediaStream（canvas.captureStream()），再喂给自定义播放器或录制逻辑
注意：captureStream() 在 Chrome/Firefox 支持良好，但 Safari 目前仅支持音频；若需全平台兼容，建议水印只做 UI 层覆盖（CSS 定位 + 半透明图层），不侵入视频流本身。
纯前端加水印的陷阱与替代思路
很多人想绕过服务端转流，直接用 JS 解码 RTSP 包——这不可行。浏览器无权限访问裸 RTP 包，也无法解析 SDP 外的传输细节。试图用 ffmpeg.wasm 解 RTSP 更是徒劳：ffmpeg.wasm 不支持网络协议栈，只能处理本地文件或已下载的完整数据块。
真正可控的“美化”方案只有两类：
- 服务端加水印：在 SRS / GStreamer / FFmpeg 推流环节就叠加（
overlayfilter），输出带水印的 HLS/WebRTC 流，前端零成本显示 - 前端 UI 层水印：用绝对定位的 覆盖在
或上，配合 pointer-events: none 避免遮挡交互后者实现快、无性能压力，但水印可被截图绕过；前者真防截，但需运维流媒体服务。别在浏览器里硬扛 RTSP 解析——那不是美化，是给自己埋雷。
