-
Notifications
You must be signed in to change notification settings - Fork 9
/
RemoteUser.tsx
98 lines (86 loc) · 3.02 KB
/
RemoteUser.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
import type { IAgoraRTCRemoteUser } from "agora-rtc-sdk-ng";
import type { HTMLProps, ReactNode } from "react";
import { FloatBoxStyle, VideoTrackWrapperStyle, useMergedStyle } from "../assets/styles";
import { useRemoteUserTrack } from "../hooks";
import { RemoteAudioTrack } from "./RemoteAudioTrack";
import { RemoteVideoTrack } from "./RemoteVideoTrack";
import { UserCover } from "./UserCover";
export interface RemoteUserProps extends HTMLProps<HTMLDivElement> {
/**
* The remote user object.
*/
readonly user?: IAgoraRTCRemoteUser;
/**
* `true`: Play the video track of the remote user.`false`: Stop playing the video track of the remote user.
*/
readonly playVideo?: boolean;
/**
* `true`: Play the audio track of the remote user.`false`: Stop playing the audio track of the remote user.
*/
readonly playAudio?: boolean;
/**
* The ID of the playback device, such as a speaker. The device ID can be obtained using [`IAgoraRTC.getPlaybackDevices`](https://api-ref.agora.io/en/video-sdk/web/4.x/interfaces/iagorartc.html#getplaybackdevices). This property is only supported in the desktop version of the Chrome browser. Modifying the value of this property in other browsers throws a `NOT_SUPPORTED` error.
*/
readonly playbackDeviceId?: string;
/**
* The volume. The value ranges from 0 (mute) to 100 (the original volume).
*/
readonly volume?: number;
/**
* The cover image or custom component to be displayed when `playVideo` is `false`, replacing the video frame. You can pass the URL of an online image or the relative path of a local image.
*/
readonly cover?: string | (() => ReactNode);
/**
* The React nodes to be rendered.
*/
readonly children?: ReactNode;
}
/**
* 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.
* @example
* ```jsx
* import { RemoteUser, useRemoteUsers } from "agora-rtc-react";
*
* function App() {
* const remoteUsers = useRemoteUsers();
*
* return (
* <>
* {remoteUsers.map(user => (
* <RemoteUser key={user.uid} user={user} />
* ))}
* </>
* );
* }
* ```
*/
export function RemoteUser({
user,
playVideo,
playAudio,
playbackDeviceId,
volume,
cover,
style,
children,
...props
}: RemoteUserProps) {
const mergedStyle = useMergedStyle(VideoTrackWrapperStyle, style);
const { track: videoTrack } = useRemoteUserTrack(user, "video");
const { track: audioTrack } = useRemoteUserTrack(user, "audio");
playVideo = playVideo ?? user?.hasVideo;
playAudio = playAudio ?? user?.hasAudio;
return (
<div {...props} style={mergedStyle}>
<RemoteVideoTrack play={playVideo} track={videoTrack} />
<RemoteAudioTrack
play={playAudio}
playbackDeviceId={playbackDeviceId}
track={audioTrack}
volume={volume}
/>
{cover && !playVideo && <UserCover cover={cover} />}
<div style={FloatBoxStyle}>{children}</div>
</div>
);
}