Components

AgoraRTCProvider

该组件向子组件提供 Context，让 children 内的各个组件都能读取你传入的 client 属性。

Props

属性名	类型	默认值	描述
client	IAgoraRTCClient	无	通过 Web SDK 的 IAgoraRTC.createClient 创建。
children	ReactNode	无	需要展示的 React 节点。

使用示例

React JSX

import AgoraRTC, { AgoraRTCProvider } from "agora-rtc-react"

function App({ children }) {
  const [client] = useState(() => AgoraRTC.createClient({ mode: "rtc", codec: "vp8" }));
  return <AgoraRTCProvider client={client}>{children}</AgoraRTCProvider>;
}

AgoraRTCScreenShareProvider

该组件向子组件提供 Context，让 children 内的各个组件都能读取你传入的用于屏幕共享的 client 属性。

Props

属性名	类型	默认值	描述
client	IAgoraRTCClient	无	通过 Web SDK 的 IAgoraRTC.createClient 创建。
children	ReactNode	无	需要展示的 React 节点。

注意事项

你可以同时使用 AgoraRTCScreenShareProvider 和 AgoraRTCProvider ，但二者不会共享 client 属性。

使用示例

React JSX

import AgoraRTC, { AgoraRTCScreenShareProvider } from "agora-rtc-react";

function App({ children }) {
  const [client] = useState(() => AgoraRTC.createClient({ mode: "rtc", codec: "vp8" }));
  return <AgoraRTCScreenShareProvider client={client}>{children}</AgoraRTCScreenShareProvider>;
}

LocalAudioTrack

该组件用于播放本地音频轨道，播放设备为用户在浏览器中选择的设备。

如果你需要自行设置麦克风设备，可使用 Web SDK 的 IMicrophoneAudioTrack.setDevice 方法。

Props

属性名	类型	默认值	描述
track	ILocalAudioTrack	无	要播放的本地音频轨道。通过 useLocalMicrophoneTrack 创建。
play	boolean	false	true：播放该轨道。 false：停止播放该轨道。
volume	number	无	音量大小。取值范围 [0, 1000]，0 代表静音，100 代表原始音量。100 以上会使用 Web Audio API 进行音量增益。
disabled	boolean	false	true：禁用该轨道。禁用后，SDK 将停止播放和发布该轨道。 false：启用该轨道。
muted	boolean	false	true：暂停发送该轨道的媒体数据。 false：恢复发送该轨道的媒体数据。
children	ReactNode	无	需要展示的 React 节点。

注意事项

设置 disabled 和 muted 属性时其实是调用了 Web SDK 的 setEnabled 方法和 setMuted 方法，因此：

• 与设置 disabled 属性相比，设置 muted 属性的响应速度更快且不影响音频采集状态。
• 不能同时设置 muted 属性和 disabled 属性。

使用示例

React JSX

import { LocalAudioTrack, useLocalAudioTrack } from "agora-rtc-react";

function App() {
  const audioTrack = useLocalAudioTrack();
  return <LocalAudioTrack track={audioTrack} play />;
}

LocalVideoTrack

该组件用于播放本地视频轨道，播放设备为用户在浏览器中选择的设备。

如果你需要自行设置摄像头设备，可使用 Web SDK 的 ICameraVideoTrack.setDevice 方法。

Props

属性名	类型	默认值	描述
track	ILocalVideoTrack	无	要播放的本地视频轨道。通过 useLocalCameraTrack 或 Web SDK 的 IAgoraRTC.createScreenVideoTrack 创建。
play	boolean	false	true：播放该轨道。 false：停止播放该轨道。
disabled	boolean	false	true：禁用该轨道。禁用后，SDK 将停止播放和发布该轨道。 false：启用该轨道。
muted	boolean	false	true：暂停发送该轨道的媒体数据。 false：恢复发送该轨道的媒体数据。
videoPlayerConfig	VideoPlayerConfig	无	视频轨道的播放配置。可以设置播放参数（镜像/显示模式），详见 VideoPlayerConfig。对于本地视频轨道，镜像模式默认开启。

注意事项

设置 disabled 和 muted 属性时其实是调用了 Web SDK 的 setEnabled 方法和 setMuted 方法，因此：

• 与设置 disabled 属性相比，设置 muted 属性的响应速度更快且不影响视频采集状态。
• 不能同时设置 muted 属性和 disabled 属性。

使用示例

React JSX

import { LocalVideoTrack, useLocalCameraTrack } from "agora-rtc-react";

function App() {
  const videoTrack = useLocalCameraTrack();
  return <LocalVideoTrack track={videoTrack} play />;
}

LocalUser

该组件用于播放本地用户的摄像头视频轨道和麦克风音频轨道，播放设备为用户在浏览器中选择的设备。

当视频轨道停止播放时，该组件会展示封面图片。

如果你需要自行设置麦克风或摄像头设备，可使用 Web SDK 的 IMicrophoneAudioTrack.setDevice 或 ICameraVideoTrack.setDevice 方法。

Props

属性名	类型	默认值	描述
micOn	boolean	false	true：打开本地用户的麦克风。 false：关闭本地用户的麦克风。
cameraOn	boolean	false	true：打开本地用户的摄像头。 false：关闭本地用户的摄像头。
audioTrack	IMicrophoneAudioTrack	无	要播放的麦克风音频轨道。通过 useLocalMicrophoneTrack 创建。
videoTrack	ICameraVideoTrack	无	要播放的摄像头视频轨道。通过 useLocalCameraTrack 创建。
playAudio	boolean	false	true：播放本地用户的音频轨道。 false：停止播放本地用户的音频轨道。
playVideo	boolean	false	true：播放本地用户的视频轨道。 false：停止播放本地用户的视频轨道。
volume	number	无	音量大小。取值范围 [0, 1000]，0 代表静音，100 代表原始音量。100 以上会使用 Web Audio API 进行音量增益。
cover	string	无	当 playVideo 为 false时要渲染的封面图片，用于替代视频画面显示。支持传入在线图片的 URL 或本地图片的相对路径。
children	ReactNode	无	需要展示的 React 节点。

使用示例

React JSX

import { LocalUser, useLocalAudioTrack, useLocalCameraTrack } from "agora-rtc-react";

function App() {
  const audioTrack = useLocalAudioTrack();
  const videoTrack = useLocalCameraTrack();

  return (
    <LocalUser
      audioTrack={audioTrack}
      cameraOn
      cover={COVER_IMAGE_URL}
      micOn
      playAudio
      playVideo
      videoTrack={videoTrack}
    />
  );
}

RemoteAudioTrack

该组件用于播放远端用户的音频轨道，并且支持指定播放设备。

Props

属性名	类型	默认值	描述
track	IRemoteAudioTrack	无	要播放的远端音频轨道。
play	boolean	无	true：播放该轨道。 false：停止播放该轨道。
playbackDeviceId	string	无	要使用的播放设备 ID，例如扬声器。设备 ID 通过 IAgoraRTC.getPlaybackDevices 获取。该属性仅支持桌面端的 Chrome 浏览器，在其它浏览器上修改该属性的值将会抛出 NOT_SUPPORTED 错误。
volume	number	无	音量大小。取值范围 [0, 100]，0 代表静音，100 代表原始音量。
children	ReactNode	无	需要展示的 React 节点。

使用示例

React JSX

import { RemoteAudioTrack, useJoin, useRemoteAudioTracks, useRemoteUsers } from "agora-rtc-react";

function App() {
  const remoteUsers = useRemoteUsers();
  const audioTracks = useRemoteAudioTracks(remoteUsers);

  return (
    <>
      {audioTracks.map(track => (
        <RemoteAudioTrack key={track.getUserId()} play track={track} />
      ))}
    </>
  );
}

RemoteVideoTrack

该组件用于播放远端用户的视频轨道，并且不支持指定播放设备。

Props

属性名	类型	默认值	描述
track	IRemoteVideoTrack	无	远端视频轨道对象。
play	boolean	无	true：播放该轨道。 false：停止播放该轨道。
videoPlayerConfig	VideoPlayerConfig	无	视频轨道的播放配置。可以设置播放参数（镜像/显示模式），详见 VideoPlayerConfig。

使用示例

React JSX

import { RemoteAudioTrack, useJoin, useRemoteAudioTracks, useRemoteUsers } from "agora-rtc-react";

function App() {
  const remoteUsers = useRemoteUsers();
  const audioTracks = useRemoteAudioTracks(remoteUsers);

  return (
    <>
      {audioTracks.map(track => (
        <RemoteAudioTrack key={track.getUserId()} play track={track} />
      ))}
    </>
  );
}

RemoteUser

该组件用于播放远端用户的视频和音频轨道，并且仅支持指定使用的音频设备、不支持指定使用的视频设备。

Props

属性名	类型	默认值	描述
user	IAgoraRTCRemoteUser	无	远端用户对象。
playVideo	boolean	user.hasVideo 属性的值	true：播放远端用户的视频轨道。 false：停止播放远端用户的视频轨道。
playAudio	boolean	user.hasAudio 属性的值	true：播放远端用户的音频轨道。 false：停止播放远端用户的音频轨道。
playbackDeviceId	string	无	要使用的播放设备 ID，例如扬声器。设备 ID 通过 IAgoraRTC.getPlaybackDevices 获取。该属性仅支持桌面端的 Chrome 浏览器，在其它浏览器上修改该属性的值将会抛出 NOT_SUPPORTED 错误。
volume	number	无	音量大小。取值范围 [0, 100]，0 代表静音，100 代表原始音量。
cover	string | () => ReactNode	无	当 playVideo 为 false时要渲染的封面图片或自定义组件，用于替代视频画面显示。支持传入在线图片的 URL 或本地图片的相对路径。
children	ReactNode	无	需要展示的 React 节点。
videoPlayerConfig	VideoPlayerConfig	无	视频轨道的播放配置。可以设置播放参数（镜像/显示模式），详见 VideoPlayerConfig。

使用示例

React JSX

import { RemoteUser, useRemoteUsers } from "agora-rtc-react";

function App() {
  const remoteUsers = useRemoteUsers();

  return (
    <>
      {remoteUsers.map(user => (
        <RemoteUser key={user.uid} user={user} />
      ))}
    </>
  );
}