React/Next.js TS集成Agora RTC遇CAN_NOT_GET_GATEWAY_SERVER错误求助

错误信息 #

Agora-SDK [ERROR]: [client-a361f] join number: 1, Joining channel failed, rollback AgoraRTCException: AgoraRTCError CAN_NOT_GET_GATEWAY_SERVER: flag: 4096, message: AgoraRTCError CAN_NOT_GET_GATEWAY_SERVER: invalid vendor key, can not find appid

Failed to join the channel AgoraRTCException: AgoraRTCError CAN_NOT_GET_GATEWAY_SERVER: flag: 4096, message: AgoraRTCError CAN_NOT_GET_GATEWAY_SERVER: invalid vendor key, can not find appid

相关代码 #

App.js #

import AgoraRTC, { AgoraRTCProvider } from "agora-rtc-react";

const config = { mode: "rtc", codec: "vp8" };
const agoraClient = AgoraRTC.createClient(config);

function App() {
    return (
        <AgoraRTCProvider client={agoraClient}>
            // 我的组件
        </AgoraRTCProvider>
    );
}

export default App;

集成Agora的组件代码 #

"use client";

import { useState, useEffect, useRef } from "react";
import {
    useRTCClient,
    useLocalCameraTrack,
    useLocalMicrophoneTrack,
    usePublish,
    useIsConnected,
    LocalVideoTrack,
} from "agora-rtc-react";

const AppID = process.env.REACT_APP_AGORA_ID; // 来自Agora控制台
const Token = process.env.REACT_APP_AGORA_TOKEN; // 来自Agora控制台，已尝试主副证书

const VideoComponent = () => {
    const client = useRTCClient();
    const { localCameraTrack } = useLocalCameraTrack();
    const { localMicrophoneTrack } = useLocalMicrophoneTrack();
    const [isPublished, setIsPublished] = useState(false);
    const videoRef = useRef<HTMLDivElement>(null);

    const ChannelName = `AGORA_CHANNEL_ID_1`;

    useEffect(() => {
        const init = async () => {
            try {
                await client.join(AppID, ChannelName, Token, 120);

                if (localCameraTrack && localMicrophoneTrack) {
                    await client.publish([
                        localCameraTrack,
                        localMicrophoneTrack,
                    ]);
                    setIsPublished(true);
                }
            } catch (error) {
                console.error("Failed to join the channel", error);
            }
        };

        init();

        return () => {
            localCameraTrack && localCameraTrack.close();
            localMicrophoneTrack && localMicrophoneTrack.close();
            client.leave();
        };
    }, [
        client,
        localCameraTrack,
        localMicrophoneTrack,
        AppID,
        ChannelName,
        Token,
    ]);

    useEffect(() => {
        if (localCameraTrack && videoRef.current) {
            localCameraTrack.play(videoRef.current);
        }
    }, [localCameraTrack]);

    return (
        <div>
            {localCameraTrack && <div ref={videoRef} className="local-video" />}
        </div>
    );
};

export default AgoraComponent;

Agora控制台截图 #

问题排查与解决步骤 #

1. 修复Next.js环境变量读取问题 #

Next.js中客户端可访问的环境变量必须以NEXT_PUBLIC_为前缀，你当前使用的REACT_APP_前缀是Create React App的规则，Next.js无法识别：

• 将.env文件中的变量名改为NEXT_PUBLIC_AGORA_ID和NEXT_PUBLIC_AGORA_TOKEN
• 代码中同步修改：

  const AppID = process.env.NEXT_PUBLIC_AGORA_ID;
  const Token = process.env.NEXT_PUBLIC_AGORA_TOKEN;
  

• 重启开发服务器，确保环境变量生效。

2. 验证AppID的有效性 #

• 在组件中添加console.log(AppID)，确认控制台输出的是Agora控制台复制的完整AppID（无空格、换行或多余字符）
• 检查控制台截图中的AppID是否与代码中使用的完全一致，注意区分大小写。

3. 确认Token的正确性 #

• 如果使用的是临时Token，需确保Token是基于当前使用的AppID、ChannelName生成的，且未过期
• 如果使用的是永久Token（仅测试环境可用），需确认主/副证书生成的Token与AppID匹配。

4. 修正组件导出的命名错误 #

组件定义为VideoComponent，但导出的是AgoraComponent，这会导致组件引用错误，修正为：

export default VideoComponent;

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