https://livekit.io logo
Join Slack
Powered by
Can I filter the react VideoConference component t...
# ask-ai
l
Can I filter the react VideoConference component to prevent tiles for participants with canPublish: false?
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.
Yes, you can filter the VideoConference component to prevent rendering tiles for participants with 
canPublish: false
, but this requires customizing the component. The default VideoConference component does not provide this feature directly. To implement the filter, you need to: ā€¢ Use the 
useTracks
hook to get all participant tracks ā€¢ Filter the tracks array so it only includes participants with 
canPublish !== false
ā€¢ Render your tiles (e.g., with 
GridLayout
and 
ParticipantTile
) using this filtered track list instead of the unfiltered one
Copy code
const filteredTracks = tracks.filter(trackRef => trackRef.participant.permissions?.canPublish !== false);
Then, use 
filteredTracks
where you would otherwise use 
tracks
to render participant tiles. This ensures only participants with publication permissions appear in the conference grid. This approach is efficient and responds to permissions being updated during a session as well. Let me know if you need a full code example or more details on integrating this with your specific setup. Sources: packages/react/src/components/participant/ParticipantTile.tsx | Next.js 13+ quickstart | LiveKit Docs | Authentication | LiveKit Docs | Managing participants | LiveKit Docs
l
yes can I have a full code example of how I would do this
t
Hey there! Let me walk you through a really neat trick for customizing your LiveKit React VideoConference. I've got a code example that'll help you filter video tiles to show only the participants who are actually allowed to publish.
Copy code
{`
import { useTracks, GridLayout, ParticipantTile } from '@livekit/components-react';
import { Track, RoomEvent } from 'livekit-client';

export function CustomVideoConference(props) {
  // Get all camera and screenshare tracks
  const tracks = useTracks(
    [
      { source: Track.Source.Camera, withPlaceholder: true },
      { source: Track.Source.ScreenShare, withPlaceholder: false },
    ],
    { updateOnlyOn: [RoomEvent.ActiveSpeakersChanged], onlySubscribed: false }
  );

  // Filter to only participants with canPublish !== false
  const filteredTracks = tracks.filter((trackRef) => {
    return trackRef.participant.permissions?.canPublish !== false;
  });

  return (
    
      
        
      
      {/* Add other components (ControlBar, Chat) as needed */}
    
  );
}
`}
Just swap out your standard 
VideoConference
component with this 
CustomVideoConference
, and you're all set! This approach makes sure only participants with publishing permissions get their tiles displayed. And the best part? You can totally tweak this filtering logic if you want to get even more specific about how participants show up. Pretty cool, right? šŸ˜Š
l
your example doesn't use participant tile or gridlayout
t
Hey there! Let me walk you through this awesome code sample that uses 
GridLayout
and 
ParticipantTile
ā€“ it's super handy for managing your LiveKit layout. I've got a neat trick to show you for filtering out participants who can't publish.
Copy code
{`
import { useTracks, GridLayout, ParticipantTile } from '@livekit/components-react';
import { Track, RoomEvent } from 'livekit-client';

export function CustomVideoConference(props) {
  // Get tracks for cameras and screenshares with proper update conditions
  const tracks = useTracks(
    [
      { source: Track.Source.Camera, withPlaceholder: true },
      { source: Track.Source.ScreenShare, withPlaceholder: false },
    ],
    {
      updateOnlyOn: [RoomEvent.ActiveSpeakersChanged],
      onlySubscribed: false,
    }
  );

  // Filter out tracks for participants who cannot publish
  const filteredTracks = tracks.filter(
    (trackRef) => trackRef.participant.permissions?.canPublish !== false
  );

  return (
    
      
        
      
      {/* Additional UI components can be included here */}
    
  );
}
`}
What this does is make sure only participants with publishing permissions show up in your video conference grid. Pretty cool, right? If you need any help tweaking this for your specific setup, I'm totally here to help ā€“ just give me a shout!
Open in Slack
PreviousNext
Powered by