HLS

HTTP-FLV

WS-FLV

RTSP/RTMP 诊断

Why RTSP Cannot Play in Browser

RTSP 不是 HTML video 可直连协议，浏览器缺少原生 RTSP 播放栈。实际网页播放需要服务端把 RTSP 转成 WebRTC、HLS 或 FLV。

流地址

在线可播放示例

使用公网真实媒体流，适合快速验证浏览器播放链路。

本地标准样本

随站点发布的标准样本，用于复现 FLV、TS、fMP4、H.265 等浏览器实验能力。

协议诊断模板

模板用于识别和诊断，需要替换成你的真实服务地址；RTSP/RTMP 不会在浏览器直连播放。

现代浏览器不能直接播放 RTSP，需要服务端代理或转换。

等待播放

诊断

RTSP 不能在浏览器中直连播放

error

现代浏览器不能直接播放 RTSP，需要服务端代理或转换。

建议转换为：RTSP -> WebRTC、RTSP -> HLS、RTSP -> HTTP-FLV。

RTSP 下一步测试链路

info

浏览器不能直连 RTSP。真实测试需要服务端先拉取 rtsp:// 源，再转成 HLS、HTTP-FLV 或 WHEP/WebRTC。

可接入 server-side proxy：RTSP -> WHEP 用于低延迟，RTSP -> HLS 用于兼容性，RTSP -> HTTP-FLV 用于工程调试。

检测到内网或本机地址

info

分享链接或 embed 给其他人后，对方通常无法访问你的内网流。

需要公网可达地址、VPN、同网段访问，或服务端代理。

分享链接

/?url=rtsp%3A%2F%2F192.168.1.10%3A554%2Fstream1

分享链接会把流地址放进 URL query，请不要分享含私密 token 的地址。

Embed iframe

<iframe src="/embed?url=rtsp%3A%2F%2F192.168.1.10%3A554%2Fstream1" allow="autoplay; fullscreen" allowfullscreen></iframe>

基础检测报告

{
  "generatedAt": "2026-06-18T11:35:09.790Z",
  "inputUrl": "rtsp://192.168.1.10:554/stream1",
  "parsed": {
    "raw": "rtsp://192.168.1.10:554/stream1",
    "normalized": "rtsp://192.168.1.10:554/stream1",
    "valid": true,
    "scheme": "rtsp",
    "host": "192.168.1.10",
    "path": "/stream1",
    "isSecureTransport": false,
    "isPrivateHost": true
  },
  "classification": {
    "protocol": "rtsp",
    "label": "RTSP",
    "container": "RTP over RTSP",
    "expectedVideoCodec": "需服务端探测",
    "expectedAudioCodec": "需服务端探测",
    "browserPlayable": false,
    "supportLevel": "diagnosis-only",
    "playerStrategy": "diagnosis-only",
    "reason": "现代浏览器不能直接播放 RTSP，需要服务端代理或转换。",
    "recommendedConversions": [
      "RTSP -> WebRTC",
      "RTSP -> HLS",
      "RTSP -> HTTP-FLV"
    ]
  },
  "capabilities": {
    "mse": false,
    "managedMediaSource": false,
    "webCodecs": false,
    "webRtc": false,
    "nativeHls": false,
    "h264": "unknown",
    "hevc": "unknown",
    "aac": "unknown"
  },
  "diagnostics": [
    {
      "id": "browser-cannot-direct-play",
      "severity": "error",
      "title": "RTSP 不能在浏览器中直连播放",
      "detail": "现代浏览器不能直接播放 RTSP，需要服务端代理或转换。",
      "action": "建议转换为：RTSP -> WebRTC、RTSP -> HLS、RTSP -> HTTP-FLV。"
    },
    {
      "id": "rtsp-proxy-required",
      "severity": "info",
      "title": "RTSP 下一步测试链路",
      "detail": "浏览器不能直连 RTSP。真实测试需要服务端先拉取 rtsp:// 源，再转成 HLS、HTTP-FLV 或 WHEP/WebRTC。",
      "action": "可接入 server-side proxy：RTSP -> WHEP 用于低延迟，RTSP -> HLS 用于兼容性，RTSP -> HTTP-FLV 用于工程调试。"
    },
    {
      "id": "private-host",
      "severity": "info",
      "title": "检测到内网或本机地址",
      "detail": "分享链接或 embed 给其他人后，对方通常无法访问你的内网流。",
      "action": "需要公网可达地址、VPN、同网段访问，或服务端代理。"
    }
  ],
  "playbackStats": {
    "status": "等待播放"
  }
}

协议知识地图

按浏览器播放、源站接入、WebRTC 体系和基础传输梳理常见流媒体协议。这里重点说明能不能直连、需要什么播放器或服务端能力，以及推荐测试路径。

浏览器播放与实验播放

这些协议或容器可以在浏览器内尝试播放，但通常还要看 MSE、播放器库、MIME type、CORS、编码和 HTTPS 策略。

HLS

可播放

m3u8

兼容优先

兼容性很稳的网页播放格式之一：Safari 原生，其他浏览器通常用 hls.js + MSE。

推荐路径

适合作为主播放链路，重点检测 playlist、segment、CORS、MIME type 和 codec。

查看详情

HTTP-FLV

可播放

可尝试播放

MSE

低延迟

不是原生 video 格式，但可用 mpegts.js/flv.js/Jessibuca 通过 MSE 播放 H.264/AAC FLV。

推荐路径

用 mpegts.js 作为第一播放引擎，并保留 Jessibuca 对比路线。

查看详情

WebSocket-FLV

可播放

可尝试播放

WebSocket

WSS

通过 WebSocket 推 FLV 数据，前端仍需 MSE 播放器；HTTPS 页面生产环境应使用 WSS。

推荐路径

用于低延迟私有链路，优先确认 WSS、FLV tag 边界和播放器接入约定。

查看详情

HTTP-TS

实验

MPEG-TS

MSE

HTTP 直出 MPEG-TS，不等于 HLS；可用 mpegts.js 实验播放。

推荐路径

生产分发优先包装成 HLS；直出 TS 仅作为实验或内部链路。

查看详情

HTTP-fMP4

实验

CMAF

init segment

fMP4/CMAF 片段需要 init segment、codec string 和正确追加顺序。

推荐路径

生产优先走 HLS/DASH manifest；裸 fMP4 只做明确约定后的实验。

查看详情

WebSocket-TS

实验

WebSocket

通过 WebSocket 传 MPEG-TS，属于播放器与服务端约定，不是通用标准播放 URL。

推荐路径

仅在受控链路中测试；公网优先改成 HLS 或 WebRTC。

查看详情

WebSocket-fMP4

实验

WebSocket

fMP4

通过 WebSocket 推 init segment 和 fMP4 片段，需要明确双方协议约定。

推荐路径

先定义 init、片段边界、codec 和重连语义；否则只做诊断。

查看详情

源站、推流与设备接入

这些通常不是浏览器直连播放格式，适合作为服务端接入源，再转换成 HLS、WebRTC、FLV 或其他网页播放输出。

RTSP

需转换

摄像头

源站协议

摄像头/NVR 常见源站协议，浏览器不能直连，需要服务端代理或转换。

推荐路径

低延迟转 WebRTC/WHEP；兼容性转 HLS；内网工程预览可转 HTTP-FLV/WS-FLV。

查看详情

RTMP

需转换

推流

Flash 已结束

现代浏览器不能直接播放 RTMP；它更适合作为推流或源站接入协议。

推荐路径

服务端 ingest RTMP 后，转 HLS、HTTP-FLV 或 WebRTC 输出给网页。

查看详情

SRT

需转换

可靠传输

回传

可靠传输协议，适合回传/贡献链路；浏览器不能直接播放 srt://。

推荐路径

服务端接入 SRT 后转 WebRTC、HLS 或 FLV。

查看详情

WebRTC 低延迟体系

WebRTC 是浏览器实时音视频能力，STUN/TURN 是连通性辅助服务，不是视频文件或直播 URL。

WebRTC

可播放

低延迟

需要信令

浏览器原生支持低延迟音视频，但必须有信令、SDP、ICE 和可用编解码协商。

推荐路径

优先用 WHEP 或自定义信令接入，确认 STUN/TURN、CORS、ICE 和 SDP 返回。

查看详情

STUN

辅助

辅助服务

ICE

不承载视频

帮助 WebRTC 发现公网映射地址，不承载音视频媒体。

推荐路径

作为 WebRTC/WHEP ICE 检查项，不要把 STUN 当播放协议。

查看详情

TURN

辅助

辅助服务

中继

带宽成本

WebRTC 直连失败时的媒体中继服务，会消耗服务器带宽。

推荐路径

生产 WebRTC 必须规划 TURN 容量、凭证、区域和端口策略。

查看详情

基础传输

HTTP/HTTPS 只是传输方式，能否播放取决于它承载的具体媒体格式、响应头和浏览器安全策略。

HTTP

辅助

传输层

看容器

看响应头

HTTP/HTTPS 是传输，不代表媒体一定可播；关键是它承载的容器和响应头。

推荐路径

先识别扩展名、Content-Type、Range、CORS，再路由到 HLS/MP4/FLV/TS/fMP4。

查看详情

协议边界

RTSP 负责控制媒体会话，实际媒体通常通过 RTP 传输。浏览器的 HTMLMediaElement 不提供 RTSP/RTP 播放入口，所以不能像 m3u8 或 mp4 一样直接填进 video 标签。

播放与检测逻辑

RTSP 直连失败不是播放器按钮问题，而是浏览器平台能力边界。
服务端代理需要负责连接摄像头、处理 RTP、必要时转封装或转码，再输出浏览器协议。
只改前端无法把 RTSP 变成浏览器直连播放，除非引入专用后端、WASM 解码或 WebRTC 网关。

常见问题

为什么浏览器不内置 RTSP？

Web 平台主要围绕 HTTP、MSE、WebRTC 和标准媒体容器设计，RTSP/RTP 涉及会话控制、UDP/TCP 传输和防火墙穿透，不是 HTML video 的通用能力。

能不能用 JavaScript 直接拉 RTSP？

普通浏览器 JavaScript 不能直接打开 RTSP socket。可以用服务端代理、WebRTC 网关，或更重的 WASM/WebCodecs 方案处理部分场景。

RTSP 转 HLS 会有延迟吗？

会。普通 HLS 延迟通常比 WebRTC 高。如果监控实时性重要，应优先评估 WebRTC/WHEP。