loud-match-35305
07/11/2025, 2:50 PMtall-airline-16756
07/11/2025, 2:50 PMtall-airline-16756
07/11/2025, 2:50 PMwithPlaceholder
property in your useTracks
hook configuration. For example, set withPlaceholder: false
for the desired sources:
{`
const tracks = useTracks(
[
{ source: Track.Source.Camera, withPlaceholder: false },
{ source: Track.Source.ScreenShare, withPlaceholder: false },
],
{ updateOnlyOn: [RoomEvent.ActiveSpeakersChanged], onlySubscribed: false }
);
`}
This configuration will prevent placeholder tiles from being generated for those sources across all participants.
If you need to prevent placeholders only for specific participants (not globally per track source), a custom implementation would be required, as the built-in logic applies the placeholder setting to all participants uniformly.
For details about placeholder logic and further customization directions, see the guidance above.
Sources: packages/react/src/hooks/useParticipantTile.tsloud-match-35305
07/11/2025, 2:51 PMtall-airline-16756
07/11/2025, 2:52 PMVideoConference
component is a bit rigid when it comes to track configuration. It actually handles tracks internally using its own preset settings for track sources and the withPlaceholder
property, which means it won't directly respect an external useTracks
hook setup.
But don't worry! If you're looking for more flexibility, like custom placeholder logic, you've got options. You'll want to dive into the lower-level components like GridLayout
and ParticipantTile
, and manage the useTracks
configuration on your own.
Bottom line: VideoConference
is pretty set in its ways with tracks. If you need more control, you'll need to build a custom component that gives you the flexibility you're after.
Sources: Next.js quickstart | LiveKit Docs | packages/react/CHANGELOG.mdloud-match-35305
07/11/2025, 3:00 PMtall-airline-16756
07/11/2025, 3:02 PMloud-match-35305
07/11/2025, 6:55 PM