Integration with agora-rtc-react

[jojonarte]

I'm currently playing around with a prototype using both agora-rtc-react and agora-rtm-react.

I plan to use the agora-rtc-react for the video call while agora-rtm-react for communicating between connected clients. I'm currently encountering below error whenever I try to connect to both.

Current app structure gist

const App = () => {
  const { ready, tracks } = useMicrophoneAndCameraTracks();

  const rtcClient = useRtcClient();
  const rtmClient = useRtmClient()
  const rtmChannel = useChannel(rtmClient)

  useEffect(() => {
    // function to initialise the SDK
    const init = async (name: string) => {
      
      try  {
        await rtcClient.join(appId, name, null, 0);
        await rtmClient.login({ uid: '123' })
        await rtmChannel.join()

        if (tracks) await rtcClient.publish([tracks[0], tracks[1]]);
      } catch (err) {
        console.error('@@@ERR', err)
      }
    };

    if (ready && tracks) {
      console.log('init ready');
      init(channelName)
    }
  }, [rtcClient, ready, tracks, rtmChannel, rtmClient]);

  return /* components here */
};

I'm getting below error:

AgoraRTCException: AgoraRTCError INVALID_OPERATION: [client-5f56d] Client already in connecting/connected state

[EkaanshArora]

You're firing multiple calls to rtcClient.join, this can be due to various application details, the most common reason is using React 18 or your dependency array. You would need to maintain the state to call the join method only once.