RemoteUser component renders a black div

[robsilva]

What kind of problem do you need help?

I was trying to follow the tutorial here: https://www.agora.io/en/blog/agora-react-sdk-build-a-video-conferencing-app-in-minutes but I am unable to get the remote user's video to show (local video does work fine)

The RemoteUser component basically renders an empty div with a black background. I did notice this error in the console:

AgoraRTCException: AgoraRTCError INVALID_PARAMS: invalid id: the value range is [0, 65535]. integer only

What am I missing?

You can see for yourself here: http://omegachat.vercel.app

I am not sure if related, but I also don't get any audio (I have allowed video and audio it on both devices connecting).

Thank you.

[guoxianzhe]

@robsilva It seems like you are adding agora-rtc-sdk-ng in your package.json . Since 2.0.0, you no longer need to add agora-rtc-sdk-ng in your own package.json. Please remove agora-rtc-sdk-ng and try again.

[robsilva]

Hi @guoxianzhe. I see, but your example snippet below suggests that createClient is a method of that package. How would I go about creating the client then? Thank you!

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

const Client = ({ children }) => {
  return (
    <AgoraRTCProvider client={AgoraRTC.createClient({ mode: "rtc", codec: "vp8" })}>
      {children}
    </AgoraRTCProvider>
  );
};
const root = createRoot(document.getElementById("container"));
root.render(<Client />);

[guoxianzhe]

@robsilva You can import AgoraRTC from "agora-rtc-react";

Now you can import everything from agora-rtc-react

and please check sample code here