浏览器无插件播放 RTSP：摄像头网页直连实战

安防项目做到「网页看摄像头」这一步，几乎都要过 RTSP 这道坎：浏览器不认 RTSP，历史上要么装 NPAPI 插件（早已死掉），要么服务器不停转流（FFmpeg 拉转推，一 路 CPU 火烧）。ZWPlayer 给出的方案更轻：把 rtsp:// 地址直接粘给播放器，由一个媒体网关在中间做协议转换——网页端零插件、零转码脚本。本文讲清整条链路、配置参数与排查思路。

为什么浏览器放不了 RTSP

RTSP 是为局域网视频设备设计的实时流控制协议，跑在 TCP/UDP 专用端口上，浏览器沙箱既没有它的协议栈，也不允许直接建这类连接。所以「浏览器播 RTSP」永远绕不开一次协议转换——问题只在于：转换发生在哪一层？

  • 老路线（服务器转流）：FFmpeg/ZLMediaKit 持续把 RTSP 拉转成 HLS/FLV 再推给网页。每个摄像头一条常驻进程，转码烧 CPU，加一路延迟；
  • ZWPlayer 路线（网关转换）：部署一个媒体网关（xmc），播放器通过 WebSocket 与网关交互，网关按需拉取 RTSP 并转成浏览器能收的格式。不转码（bypass 模式）时延迟最低，按需拉流不空转。

RTSP 播放链路 图 1:摄像头 ←RTSP→ 媒体网关 ←WebSocket→ 浏览器播放器

三行配置跑起来

new ZWPlayer({
  playerElm: 'player',
  url: 'rtsp://admin:password@192.168.1.64:554/main',  // 摄像头 RTSP 地址
  xmc_url: 'ws://xmc.zwplayer.cn:8138',                // 媒体网关地址
  rtsp_over_tcp: true,                                  // TCP 传输(默认)
  rtsp_bypass: true,                                    // 零转码(浏览器支持原始编码时)
});

四个关键参数：

参数 默认 说明
url — RTSP 流地址（含账号密码），主码流画质高、子码流更流畅
xmc_url — 媒体网关地址（ws:// 或 http://），网关负责拉流与协议转换
rtsp_over_tcp true RTSP 传输层：TCP 跨网段稳定；局域网可试 false（UDP，延迟更低）
rtsp_bypass false true 不重编码（低延迟，要求浏览器支持源编码如 H.264）；false 强制转码（兼容性最好）

地址从哪来？ 海康/大华/华为设备的 RTSP 地址有固定格式（rtsp://用户:密码@IP:554/通道路径），我们写过一篇主流厂商 RTSP 地址格式速查，配套的还有主码流与子码流怎么选——网页观看通常选子码流，分辨率够用且码率低一档。

三个实战场景

  • 厂区/门店监控大屏：十几路摄像头网格上墙。每路一个 ZWPlayer 实例挂 rtsp:// 地址，网关统一纳管；配 rtsp_bypass: true 与子码流，一屏十几路不卡；
  • 远程设备巡检：客户现场的摄像头只暴露在内网——网关部署在客户内网，网页端走公网连网关，摄像头无需公网 IP；
  • 全景/鱼眼摄像头回放：摄像头素材直接进 VR 模式还原正常视角，巡视各方向。

排查清单

画面一直黑屏/加载中：先用 VLC 在同一台电脑上打开同一个 rtsp:// 地址——VLC 也不通就是网络或地址问题（账号密码、通道路径、554 端口），不是播放器问题。

能播但几秒一卡：多半是码率超过浏览器解码能力或网络带宽——切子码流地址，或 rtsp_bypass: false 让网关降码率转码。

跨网段/公网看不到：rtsp_over_tcp 必须为 true（UDP 不能跨网段路由）。

H.265 摄像头：部分浏览器（Safari、开启硬解的 Edge/Chrome）支持 H.265 bypass；不支持时设 rtsp_bypass: false 由网关转成 H.264。

与其他接入方式的配合

网关输出的流同样可以进入 ZWPlayer 的完整能力体系：多码率切换、字幕预下载（网关输出 HLS 时）、水印防录、进度条预览图（录像回放场景）。摄像头内容与点播内容在播放器侧是同一套体验。

相关文章