English | 简体中文
agora-rtc-react makes it easier to integrate agora-rtc-sdk-ng in React applications.
npm i agora-rtc-react
Here is the first one to get you started:
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 />);
This example will render Agora Client into a container on the page.
You can view examples on the website.
- add a
.env.local
file to each example directory and fill in the Agora account info following the format of.env.example
. pnpm start
to start the example.
-
RemoteVideoTrack
— This component plays the video track of a remote user and does not support specifying the playback device. -
RemoteUser
— This component plays the video and audio tracks of a remote user and supports specifying the audio device to use. Specifying the video playback device is not supported. -
RemoteAudioTrack
— This component plays the audio track of a remote user with the playback device you specify. -
LocalVideoTrack
— This component plays the local video track using the playback device selected by the user in the browser. -
LocalUser
— This component plays the camera video track and the microphone audio track of the local user using the playback devices selected by the user in the browser. -
LocalAudioTrack
— This component plays the local audio track using the playback device selected by the user in the browser. -
AgoraRTCScreenShareProvider
— This component is a context provider, which lets all of the components inside children read the client prop you pass for screen sharing. -
AgoraRTCProvider
— This component is a context provider, which lets all of the components inside children read the client prop you pass.
-
useVolumeLevel
— Returns the volume level of an audio track at a frequency of once per second. -
useTrackEvent
— This hook lets you listen to specific events of the local or remote track. -
useRemoteVideoTracks
— This hook lets you automatically subscribe to and retrieve remote users' video tracks. -
useRemoteUsers
— This hook lets you retrieve the list of remote users. -
useRemoteUserTrack
— This hook lets you retrieve the audio or video track of a remote user. -
useRemoteAudioTracks
— This hook lets you automatically subscribe to and retrieve remote users' audio tracks. -
useRTCClient
— Returns the IAgoraRTCClient object. -
usePublish
— This hook lets you publish the local tracks when the component is ready and unpublish them when the component is unmounted. -
useNetworkQuality
— Returns the network quality of the local user. -
useLocalScreenTrack
— This hook lets you create a local video track for screen-sharing. -
useLocalMicrophoneTrack
— This hook lets you create a local microphone audio track. -
useLocalCameraTrack
— This hook lets you create a local camera video track. -
useJoin
— This hook lets a user automatically join a channel when the component is ready and automatically leaves the channel when the component is unmounted. -
useIsConnected
— Returns whether the SDK is connected to Agora's server. -
useCurrentUID
— Returns the current user ID. -
useConnectionState
— Returns the detailed connection state of the SDK. -
useClientEvent
— This hook lets you listen to specific events of the IAgoraRTCClient object. -
useAutoPlayVideoTrack
— This hook lets you automatically play a local or remote video track. -
useAutoPlayAudioTrack
— This hook lets you automatically play a local or remote audio track.
MIT © Agora.io