IOS及MacOS Safari下WSS连接失败问题求助（基于rtsp-relay）

核心问题分析 #

你的代码在Windows/安卓设备正常运行，但在Safari中报错WebSocket连接异常，主要原因集中在：

• 错误混用了HLS分段流协议与WebSocket流式传输逻辑
• Safari对WebSocket的跨域规则、证书校验、编码参数限制更严格
• RTSP地址中的特殊字符未编码导致连接失败

分步解决方案 #

1. 移除HLS格式参数，恢复RTSP-relay默认传输逻辑 #

rtsp-relay本身通过WebSocket传输MPEG-TS流给前端，你添加的-f hls参数会强制FFmpeg输出HLS分段文件，完全违背WebSocket的流式传输逻辑，直接移除该参数：

app.ws("/api/stream/:username/:password/:domain/:channel/:port", (ws, req) => {
  // 对用户名/密码做URL编码，避免特殊字符破坏RTSP地址格式
  const encodedUsername = encodeURIComponent(req.params.username);
  const encodedPassword = encodeURIComponent(req.params.password);
  
  proxy({
    url: `rtsp://${encodedUsername}:${encodedPassword}@${req.params.domain}.kbvision.tv:${req.params.port}/cam/realmonitor?channel=${req.params.channel}&subtype=0`,
    verbose: true, // 打开日志，方便排查FFmpeg启动或RTSP源连接问题
    transport: "tcp",
    additionalFlags: [
      "-codec:v",
      "mpeg1video",
      "-r",
      "25", // 降低帧率适配Safari的WebSocket处理能力
      "-crf",
      "22", // 平衡画质与码率，减少传输压力
      "-b:v",
      "1M", // 降低码率，避免Safari因带宽限制断开连接
      "-s",
      "640x480",
    ],
  })(ws);
});

2. 调整CORS配置适配Safari严格规则 #

Safari对跨域WebSocket的预检请求要求更高，修改CORS配置：

app.use(cors({
  origin: true, // 生产环境请替换为具体允许的域名，例如"https://yourdomain.com"
  credentials: true, // 允许携带凭证，适配WebSocket跨域请求
}));

3. 验证HTTPS证书有效性 #

• 确保使用受信任的正规SSL证书（自签证书需在iOS/MacOS系统中手动信任）
• 检查证书的域名匹配、有效期、链式证书是否完整（Safari会严格校验证书链）

4. 调试排查步骤 #

• 打开Safari开发者工具（Cmd+Opt+I），在Network标签下查看WebSocket请求的状态码、响应头，确认是否存在403/500等错误
• 开启verbose: true后，查看服务器控制台日志，检查FFmpeg是否正常启动、RTSP源是否能正常连接

5. 更新rtsp-relay依赖 #

旧版本的rtsp-relay可能存在Safari兼容问题，执行命令更新：

npm update rtsp-relay

内容的提问来源于stack exchange，提问作者Atsh