问在API请求后调用函数时，使用Agora和React Native显示黑屏
EN

Stack Overflow用户

提问于 2021-04-13 12:04:16

回答 1查看 264关注 0票数 0

我的应用程序(使用react native构建)使用Agora进行视频/音频呼叫。我遵循了official documentation，当我将我的临时令牌和应用id硬编码到我的应用程序中时，一切都很好。但是，当我想通过我自己的服务器动态检索这两个变量，并在从服务器检索到这些变量后调用createAgora函数时，屏幕(和音频)仍然是黑色的。不会通过日志抛出错误。看起来一切正常。我不知道为什么会这样。

useEffect(() => {
    log('agora mount', channel, role);
    isHost( role === "host" ? true : false );
    connect();
    return destroyAgora;
}, [show]);

const connect = async () => {
    API.get('/api/agora', {})
        .then(function(res){
            if(res.data && res.data.agora.token){

                const app_id = res.data.agora.app_id;
                const token = res.data.agora.token;

                createAgora(app_id)
                .then( () => joinAgora(token) )
                .catch( (err) => log("agora (!) create error: " + err) );

            } else {
                log("agora token error: empty");
            }
        }).catch( (err) => {
            log("agora token error: " + err);
        });
}

const AgoraEngine = useRef<RtcEngine>();

const createAgora = async (app_id:string) => {
    AgoraEngine.current = await RtcEngine.create(app_id);
    AgoraEngine.current.setVideoEncoderConfiguration({ dimensions: {width: 1280, height: 720}, frameRate: 30 });
    AgoraEngine.current.enableVideo();
    AgoraEngine.current.setChannelProfile(ChannelProfile.LiveBroadcasting);
    const Role = (role === "host" ? ClientRole.Broadcaster : ClientRole.Audience);
    AgoraEngine.current.setClientRole(Role);

    AgoraEngine.current.addListener("JoinChannelSuccess", (channel, uid, elapsed) => {
        isWatching(true);
    });
};

react-native

live-streaming

agora.io

回答 1

Stack Overflow用户

发布于 2021-04-13 12:55:51

我认为问题出在then加入joinAgora的代码上。在下面的代码中，我创建了两个状态变量。利用useEffect侦听appId更改，使用await侦听该操作完成，然后使用token调用joinAgora

const [appId, setAppId] = useState(null);
const [appToken, setAppToken] = useState(null);

useEffect(()=>{
   const createThenConnect = async ()=>{
       await createAgora(appId);
       try {
          joinAgora(appToken);
       } catch (ex) {
          log("agora (!) create error: " + ex)
       }
   }
   if (appId !== null) { 
       createThenConnect();
   }
},[appId])

const connect = async () => {
    API.get('/api/agora', {})
        .then(function(res){
            if(res.data && res.data.agora.token){

                setAppId(res.data.agora.app_id);
                setAppToken(res.data.agora.token);
            } else {
                log("agora token error: empty");
            }
        }).catch( (err) => {
            log("agora token error: " + err);
        });
}