-
Notifications
You must be signed in to change notification settings - Fork 9
/
RemoteVideoTrack.tsx
49 lines (42 loc) · 1.43 KB
/
RemoteVideoTrack.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
import type { IRemoteVideoTrack } from "agora-rtc-sdk-ng";
import type { HTMLProps } from "react";
import { useState } from "react";
import { VideoTrackStyle, useMergedStyle } from "../assets/styles";
import type { Nullable } from "../misc/utils";
import { useAutoPlayVideoTrack } from "./TrackBoundary";
export interface RemoteVideoTrackProps extends HTMLProps<HTMLDivElement> {
/**
* The remote video track object.
*/
readonly track?: Nullable<IRemoteVideoTrack>;
/**
* `true`: Play the track.`false`: Stop playing the track.
*/
readonly play?: boolean;
}
/**
* This component plays the video track of a remote user and does not support specifying the playback device.
* @example
* ```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} />
* ))}
* </>
* );
* }
* ```
*/
export function RemoteVideoTrack({ track, play, style, ...props }: RemoteVideoTrackProps) {
const mergedStyle = useMergedStyle(VideoTrackStyle, style);
const [div, setDiv] = useState<HTMLDivElement | null>(null);
useAutoPlayVideoTrack(track, play, div);
return <div {...props} ref={setDiv} style={mergedStyle} />;
}