React.js项目中Agora视频通话无法显示问题求助

以下是针对你参考示例项目实现Agora视频通话时，视频无法显示的常见排查和修复方案：

1. 改用React Refs获取视频容器 #

React中直接用document.getElementById()可能因组件未挂载导致获取不到DOM元素，建议用useRef钩子确保容器已存在：

import { useRef, useEffect } from 'react';

function VideoCall() {
  const localVideoRef = useRef(null);
  const remoteVideoRef = useRef(null);

  useEffect(() => {
    async function initAgora() {
      const client = AgoraRTC.createClient({ mode: 'rtc', codec: 'h264' });
      // 初始化客户端、设置事件监听等逻辑

      // 渲染本地视频
      const localTracks = await AgoraRTC.createMicrophoneAndCameraTracks();
      if (localVideoRef.current) {
        localTracks[1].play(localVideoRef.current);
      }

      // 监听远程用户并渲染视频
      client.on('user-published', async (user, mediaType) => {
        await client.subscribe(user, mediaType);
        if (mediaType === 'video' && remoteVideoRef.current) {
          user.videoTrack.play(remoteVideoRef.current);
        }
      });
    }

    initAgora();
  }, []);

  return (
    <div>
      <div ref={localVideoRef} style={{ width: '320px', height: '240px' }}></div>
      <div ref={remoteVideoRef} style={{ width: '320px', height: '240px' }}></div>
    </div>
  );
}

2. 检查视频容器的样式设置 #

视频容器必须设置明确的宽高，否则轨道无法正确渲染：

• 避免容器宽高为0px或auto未生效
• 确保容器display属性不是none或hidden

示例基础样式：

.video-container {
  width: 320px;
  height: 240px;
  border: 1px solid #ccc;
  margin: 10px;
}

3. 验证视频轨道的播放逻辑 #

• 确认在成功加入频道后再调用track.play()方法
• 检查是否误将视频轨道挂载到不存在的DOM元素上
• 本地视频需确保摄像头权限已正常获取（可通过navigator.mediaDevices.getUserMedia快速测试）

4. 规范SDK初始化时机 #

• 确保在React组件挂载完成后（useEffect空依赖数组）初始化SDK，避免过早执行导致DOM未就绪
• 可通过状态变量控制初始化逻辑只执行一次，避免重复创建客户端或轨道

5. 查看浏览器控制台错误 #

打开开发者工具（F12）查看Console面板，重点关注：

• DOM相关错误（容器不存在）
• Agora SDK的错误提示（轨道创建失败、权限问题等）
• 资源加载或跨域错误

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