TrackLoop
function TrackLoop(__namedParameters): Element;Defined in: packages/react/src/components/track/TrackLoop.tsx:52
The TrackLoop component loops over tracks. It is for example a easy way to loop over all participant camera and screen share tracks. TrackLoop creates a TrackRefContext for each track that you can use to e.g. render the track.
Parameters
| Parameter | Type |
|---|---|
__namedParameters | TrackLoopProps |
Returns
Element
Example
// Basic — render each camera track with its context.
const trackRefs = useTracks([Track.Source.Camera]);
<TrackLoop tracks={trackRefs}>
<TrackRefContext.Consumer>
{(trackRef) => trackRef && <VideoTrack trackRef={trackRef} />}
</TrackRefContext.Consumer>
</TrackLoop>;
// Advanced — loop through cameras and screen shares in a room.
function TrackStage() {
return <VoiceRoom agent={agent}><TrackStageContent /></VoiceRoom>;
}
function TrackStageContent() {
const tracks = useTracks([
{ source: Track.Source.Camera, withPlaceholder: true },
{ source: Track.Source.ScreenShare, withPlaceholder: false },
]);
return <TrackLoop tracks={tracks}><ParticipantTile /></TrackLoop>;
}