Agora React-JS SDK远端黑屏无音视频发送，本地正常求助

核心问题定位 #

Agora Analytics显示无音视频发送，说明问题出在本地端的音视频流发布环节，而非接收或网络层面（已通过AgoraUI验证网络正常）。结合本地音视频正常的现象，重点排查以下遗漏点：

1. 检查流发布逻辑是否完整 #

• 确认是否在加入频道后调用了client.publish()方法，且传入了正确的本地音视频轨道对象。常见遗漏示例：

  // 错误：仅加入频道未发布轨道
  await client.join(appId, channel, token, uid);
  // 正确流程：创建轨道后立即发布
  const [localAudioTrack, localVideoTrack] = await AgoraRTC.createMicrophoneAndCameraTracks();
  await client.publish([localAudioTrack, localVideoTrack]);
  

• 排查publish调用是否被错误的条件分支拦截（比如异步回调未处理、权限判断逻辑错误）。

2. 验证音视频轨道的创建状态 #

• 本地音视频正常显示不代表轨道对象已正确初始化，可通过打印localAudioTrack.enabled和localVideoTrack.enabled确认轨道是否处于激活状态。
• 检查创建轨道时是否传入了错误的设备参数，比如强制指定不存在的摄像头/麦克风ID，导致轨道实际未采集到数据。

3. 确认频道加入与权限时机 #

• 确保在获取媒体设备权限（摄像头/麦克风）之后再调用join和publish。React中常见错误：组件挂载时直接执行初始化逻辑，未等待用户授权完成。
• 确认join方法返回的Promise已正确await，避免在频道未成功加入时就执行发布操作。

4. 排查Agora SDK初始化配置 #

• 检查AgoraRTC.createClient的参数是否正确，特别是mode需设为"rtc"，codec推荐使用"h264"以保证兼容性：

  const client = AgoraRTC.createClient({ mode: "rtc", codec: "h264" });
  

• 确认App ID、频道名、Token（若启用）与Agora控制台配置完全一致，避免因权限问题导致流被服务器拦截。

5. 监听SDK错误事件 #

• 在客户端实例上添加错误监听，捕获发布过程中的异常：

  client.on("error", (err) => {
    console.error("Agora SDK错误:", err);
  });
  client.on("publish-failed", (err) => {
    console.error("发布失败:", err);
  });
  

• 同时检查浏览器控制台的MediaStream相关错误，比如设备访问被意外拒绝。

6. 检查Videos组件的远端流渲染逻辑 #

• 确认远端用户加入频道时，是否正确监听了user-published事件，并调用client.subscribe()获取远端轨道：

  client.on("user-published", async (user, mediaType) => {
    await client.subscribe(user, mediaType);
    // 将远端轨道传递给Videos组件渲染
    if (mediaType === "video") {
      setRemoteTrack(user.videoTrack);
    }
  });
  

• 验证Videos组件是否正确将远端轨道挂载到DOM元素（比如调用track.play(videoElement)）。

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