atlonxp / agora-rtc-react

Agora RTC React SDK

agora-rtc-react

English | 简体中文

agora-rtc-react makes it easier to integrate agora-rtc-sdk-ng in React applications.

Installation

npm i agora-rtc-react

Usage

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.

Examples

You can view examples on the website.

Or run in local by following steps:

• 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.

Components

• 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.

Hooks

• 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.

License

MIT © Agora.io