-
Notifications
You must be signed in to change notification settings - Fork 9
/
LocalUser.tsx
106 lines (94 loc) · 3.4 KB
/
LocalUser.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
99
100
101
102
103
104
105
106
import type { ILocalAudioTrack, ILocalVideoTrack } from "agora-rtc-sdk-ng";
import type { HTMLProps, ReactNode } from "react";
import { FloatBoxStyle, VideoTrackWrapperStyle, useMergedStyle } from "../assets/styles";
import type { MaybePromiseOrNull } from "../misc/utils";
import { LocalAudioTrack } from "./LocalAudioTrack";
import { LocalVideoTrack } from "./LocalVideoTrack";
import { UserCover } from "./UserCover";
export interface LocalUserProps extends HTMLProps<HTMLDivElement> {
/**
* `true`: Enable the local user's microphone.`false`: Disable the local user's microphone.
*/
readonly micOn?: boolean;
/**
* `true`: Enable the local user's camera.`false`: Disable the local user's camera.
*/
readonly cameraOn?: boolean;
/**
* The microphone audio track to be played, which can be created by calling [`useLocalMicrophoneTrack`](https://api-ref.agora.io/en/video-sdk/reactjs/2.x/functions/useLocalMicrophoneTrack.html).
*/
readonly audioTrack?: MaybePromiseOrNull<ILocalAudioTrack>;
/**
* The camera video track to be played, which can be created by calling [`useLocalCameraTrack`](https://api-ref.agora.io/en/video-sdk/reactjs/2.x/functions/useLocalCameraTrack.html).
*/
readonly videoTrack?: MaybePromiseOrNull<ILocalVideoTrack>;
/**
* `true`: Play the local user's audio track.`false`: Stop playing the local user's audio track.
*/
readonly playAudio?: boolean;
/**
* `true`: Play the local user's video track.`false`: Stop playing the local user's video track.
*/
readonly playVideo?: boolean;
/**
* The volume. The value ranges from 0 (mute) to 1000 (maximum). A value of 100 is the original volume. When set to above 100, the SDK applies volume amplification using the [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API).
*/
readonly volume?: number;
/**
* The cover image 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;
/**
* The React nodes to be rendered.
*/
readonly children?: ReactNode;
}
/**
* 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.
* @example
* ```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}
* />
* );
* }
* ```
*/
export function LocalUser({
micOn,
cameraOn,
audioTrack,
videoTrack,
playAudio,
playVideo,
volume,
cover,
children,
style,
...props
}: LocalUserProps) {
const mergedStyle = useMergedStyle(VideoTrackWrapperStyle, style);
playVideo = playVideo ?? !!cameraOn;
playAudio = playAudio ?? !!micOn;
return (
<div {...props} style={mergedStyle}>
<LocalVideoTrack disabled={!cameraOn} play={playVideo} track={videoTrack} />
<LocalAudioTrack disabled={!micOn} play={playAudio} track={audioTrack} volume={volume} />
{cover && !cameraOn && <UserCover cover={cover} />}
<div style={FloatBoxStyle}>{children}</div>
</div>
);
}