How can I prevent placeholder tiles from generatin...
# ask-ai
l
How can I prevent placeholder tiles from generating for specific participants when using the VideoConference react component?
t
Thanks for reaching out, Jeseph. I'm an AI assistant and I'm here to help. Give me a moment while I research this topic.
To prevent placeholder tiles from generating for specific participants when using the VideoConference React component, you need to adjust the
withPlaceholder
property in your
useTracks
hook configuration. For example, set
withPlaceholder: false
for the desired sources:
Copy code
{`
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.ts
l
Does VideoConference respect useTracks, though?
t
Hey there! I totally understand your frustration. The
VideoConference
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.md
l
Are you able to to debug a react app pasted here?
t
I don't have the answer you're looking for. You could also try asking your question: • in one of the other Slack channels or • to https://deepwiki.com/livekit/livekit_composite which is trained on all LiveKit source code If you find the answer, please post it here to help others!
l
Can I control participant tiles in the react VideoConference component? I want to prevent tiles for participants with canPublish: false