useTracks
function useTracks(sources?, options?): {
participant: {
identity: string;
name: string;
isLocal: boolean;
attributes: Readonly<Record<string, string>>;
};
source: TrackSource;
publication?: {
isMuted: boolean;
isSubscribed: boolean;
source: TrackSource;
};
isMuted: boolean;
isSpeaking: boolean;
placeholder: boolean;
}[];Defined in: packages/react/src/hooks/track/useTracks.ts:54
Returns an array of TrackReference (or TrackReferenceOrPlaceholder when
placeholders are requested) for the given track sources in the current room.
Set onlySubscribed: true to exclude unsubscribed publications.
Parameters
| Parameter | Type |
|---|---|
sources? | ( | TrackSource | TrackSourceWithOptions)[] |
options? | { onlySubscribed?: boolean; updateOnlyOn?: unknown[]; } |
options.onlySubscribed? | boolean |
options.updateOnlyOn? | unknown[] |
Returns
{
participant: {
identity: string;
name: string;
isLocal: boolean;
attributes: Readonly<Record<string, string>>;
};
source: TrackSource;
publication?: {
isMuted: boolean;
isSubscribed: boolean;
source: TrackSource;
};
isMuted: boolean;
isSpeaking: boolean;
placeholder: boolean;
}[]
Example
// Basic — get all camera track publications.
const trackRefs = useTracks([Track.Source.Camera]);
// Advanced — render cameras and screen shares in a room grid.
function RoomGrid() {
const tracks = useTracks(
[
{ source: Track.Source.Camera, withPlaceholder: true },
{ source: Track.Source.ScreenShare, withPlaceholder: false },
],
{ onlySubscribed: false },
);
return (
<GridLayout tracks={tracks}>
<ParticipantTile />
</GridLayout>
);
}