组件 | 声网文档中心

AgoraRTCProvider

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

Props

属性名	类型	默认值	描述
`client`	`IAgoraRTCClient`	无	通过 Web SDK 的 `IAgoraRTC.createClient` 创建。
`children`	`ReactNode`	无	需要展示的 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 属性。

使用示例

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 属性。

使用示例

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 属性。

使用示例

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 节点。

使用示例

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 节点。

使用示例

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`。

使用示例

JSX

import { RemoteVideoTrack, useJoin, useRemoteVideoTracks, useRemoteUsers } from "agora-rtc-react";

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

  return (
    <>
      {audioTracks.map(track => (
        <RemoteVideoTrack 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`。

使用示例

JSX

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

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

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

组件

AgoraRTCProvider

Props

使用示例

AgoraRTCScreenShareProvider

Props

注意事项

使用示例

LocalAudioTrack

Props

注意事项

使用示例

LocalVideoTrack

Props

注意事项

使用示例

LocalUser

Props

使用示例

RemoteAudioTrack

Props

使用示例

RemoteVideoTrack

Props

使用示例

RemoteUser

Props

使用示例

咨询电话

咨询电话

AgoraRTCProviderCopy Anchor Link

PropsCopy Anchor Link

使用示例Copy Anchor Link

AgoraRTCScreenShareProviderCopy Anchor Link

PropsCopy Anchor Link

注意事项Copy Anchor Link

使用示例Copy Anchor Link

LocalAudioTrackCopy Anchor Link

PropsCopy Anchor Link

注意事项Copy Anchor Link

使用示例Copy Anchor Link

LocalVideoTrackCopy Anchor Link

PropsCopy Anchor Link

注意事项Copy Anchor Link

使用示例Copy Anchor Link

LocalUserCopy Anchor Link

PropsCopy Anchor Link

使用示例Copy Anchor Link

RemoteAudioTrackCopy Anchor Link

PropsCopy Anchor Link

使用示例Copy Anchor Link

RemoteVideoTrackCopy Anchor Link

PropsCopy Anchor Link

使用示例Copy Anchor Link

RemoteUserCopy Anchor Link

PropsCopy Anchor Link

使用示例Copy Anchor Link

咨询电话

咨询电话

AgoraRTCProvider

Props

使用示例

AgoraRTCScreenShareProvider

Props

注意事项

使用示例

LocalAudioTrack

Props

注意事项

使用示例

LocalVideoTrack

Props

注意事项

使用示例

LocalUser

Props

使用示例

RemoteAudioTrack

Props

使用示例

RemoteVideoTrack

Props

使用示例

RemoteUser

Props

使用示例