基于Vite-TS的React组件无法与Janus WebRTC服务器完成ICE连接求助

1. 禁用Simple-Peer默认数据通道 #

Simple-Peer默认会创建数据通道，但Janus的Record&Play插件仅处理音视频流，多余的application/datachannel媒体行会被Janus忽略，直接干扰ICE协商。修改初始化配置：

const peer = new SimplePeer({
  initiator: true,
  stream: webcamStream,
  trickle: false, // 匹配Janus示例的ICE模式，示例用trickle则设为true
  // 关键：禁用数据通道
  channel: false,
});

2. 清理SDP中的无效媒体行 #

针对服务器日志里的[WARN] Skipping unsupported application media line警告，通过SDP转换移除无效媒体类型：

const peer = new SimplePeer({
  // 其他配置...
  sdpTransform: (sdp) => {
    // 移除所有application类型的媒体行
    return sdp.replace(/m=application.*\r\n/g, '');
  },
});

3. 严格对齐Janus的API消息格式 #

确保WebSocket发送的SDP、ICE候选完全符合Janus要求：

• 发送Offer时，消息结构必须包含janus: "message"、body（插件相关参数）、jsep（SDP对象）三个核心字段，完全复刻示例的消息结构
• 发送ICE候选时，要封装为Janus的trickle消息格式，不能直接转发Simple-Peer的原始signal数据

4. 匹配Janus示例的ICE服务器配置 #

将Simple-Peer的ICE服务器列表完全复制Janus示例中的配置，包括STUN/TURN地址、用户名、密码：

const peer = new SimplePeer({
  // 其他配置...
  config: {
    iceServers: [
      { urls: 'stun:stun.l.google.com:19302' },
      // 若示例有TURN服务器，完整复制此处配置
    ],
  },
});

5. 验证媒体流有效性 #

检查react-webcam获取的流是否包含正常的音视频轨道：

console.log('Webcam tracks:', webcamStream.getTracks());

若轨道为空或状态异常，优先解决媒体流获取问题，否则ICE协商必然失败。

6. 调整ICE Trickle模式 #

根据Janus示例的行为设置trickle参数：

• 若示例先收集所有ICE候选再发送SDP，设置trickle: false
• 若示例实时发送ICE候选，设置trickle: true，并确保候选通过WebSocket实时转发给Janus

内容的提问来源于stack exchange，提问作者Sidharth K.