Can I filter placeholders out of VideoConference using participanttilerenderer? It seems the default is to render a placeholder/tile no matter the permissions

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.

And useTracks can influence

VideoConference

?

Hey there! Let me break down how the

useTracks

hook works in a friendly way. Think of it like a control center for deciding which participant video tiles show up in your

VideoConference

component. When you pass the track references from

useTracks

to layout components like

GridLayout

, they'll create a

ParticipantTile

for each track. The cool part? You can totally customize this by tweaking the

useTracks

settings—like turning off placeholders with `withPlaceholder: false`—so you have full control over exactly who appears in the conference. Pretty neat, right? Sources: packages/react/src/components/participant/ParticipantTile.tsx | Next.js 13+ quickstart | LiveKit Docs

But I wouldn't use GridLayout if I was using VideoConference, would I?

Hey there! So, the

VideoConference

component actually does use

GridLayout

behind the scenes. When no one's been singled out or focused, it shows all participants in this really smart, responsive grid. But if someone gets pinned or starts screen sharing, it smoothly shifts gears into a focus mode that blends

FocusLayout

and

CarouselLayout

for the other participants. Even though you might not directly work with

GridLayout

when you're using

VideoConference

, it's totally the magic layout engine making that default grid view happen. Cool, right? Sources: packages/styles/scss/prefabs/video-conference.scss | Next.js 13+ quickstart | LiveKit Docs

Can you give me an example of using useTracks to influence VideoConference rendering?

Hey there! Let me walk you through a super handy way to control which participant tiles show up in your video conference using the

useTracks

hook. It's pretty cool and gives you a lot of flexibility!

const tracks = useTracks([
  { source: Track.Source.Camera, withPlaceholder: false },
  { source: Track.Source.ScreenShare, withPlaceholder: false },
], {
  onlySubscribed: true,
  updateOnlyOn: [RoomEvent.ActiveSpeakersChanged],
});

// Pass the tracks to your layout (VideoConference uses GridLayout internally)
<GridLayout tracks={tracks}>
  <ParticipantTile />
</GridLayout>

Let me break this down for you: •

withPlaceholder: false

means only participants who are actually sharing video will show up—no empty placeholders! •

onlySubscribed: true

makes sure you're only seeing tracks you're actually connected to. •

updateOnlyOn

helps keep things running smoothly by optimizing when the display refreshes. Think of this like your personal video conference control panel. You can even get more creative and filter the

tracks

array if you want to do something specific, like highlighting just the active speakers. Pretty neat, right? Sources: Next.js 13+ quickstart | LiveKit Docs | examples/nextjs/pages/customize.tsx

Right, so you're replacing VideoConference, not using it....

You're right! If you want to have more control over which participant tiles show up—like customizing

useTracks

options or applying your own filtering—you'll need to swap out the default

VideoConference

component. No worries, though! You can totally build your own layout using awesome components like

GridLayout

,

useTracks

, and

ParticipantTile

. Just keep in mind that the default

VideoConference

uses a fixed

useTracks

configuration under the hood and doesn't give you an easy way to customize tile rendering from the outside. Sources: packages/react/src/hooks/useParticipantTile.ts | Next.js 13+ quickstart | LiveKit Docs | JavaScript & React Components | livekit/livekit_composite | DeepWiki

Track is an invalid variable in you above example

Hey there! You're totally right about importing

Track

from

'livekit-client'

. I've got just the code snippet to help you out:

import { Track } from 'livekit-client';
import { useTracks } from '@livekit/components-react';

const tracks = useTracks([
  { source: Track.Source.Camera, withPlaceholder: false },
  { source: Track.Source.ScreenShare, withPlaceholder: false },
]);

Just make sure to import

Track

from

'livekit-client'

in your project, and you'll be all set! This will fix that pesky variable error and help you reference track sources smoothly. Let me know if you need any more help! Sources: README.md | packages/react/src/prefabs/VideoConference.tsx | agent-console/hooks/use-livekit/use-livekit-state.tsx