Can I prevent certain participants from subscribin...
# ask-aib
bland-baker-98506
09/19/2025, 3:46 PMCan I prevent certain participants from subscribing to another set of participants audio? (using role)
t
tall-airline-16756
09/19/2025, 3:46 PMThanks for reaching out, Jeseph. I'm an AI assistant and I'm here to help. Give me a moment while I research this topic.
tall-airline-16756
09/19/2025, 3:47 PMI'm glad you're exploring how to manage participant audio subscriptions in LiveKit! You can control this using track subscription permissions, which are managed at the publisher level rather than directly through roles. Let me walk you through how to set this up:
1. Disable Auto-Subscribe (Optional): By default, participants automatically subscribe to all tracks. If you'd like to have more manual control over subscriptions, you can disable auto-subscribe when connecting like this:
let room = await room.connect(url, token, { autoSubscribe: false });setTrackSubscriptionPermissionsLocalParticipant Copy code
localParticipant.setTrackSubscriptionPermissions(
false,
[new ParticipantTrackPermission({ participantSid: "allowed-sid", allTracksAllowed: true })]
);b
bland-baker-98506
09/19/2025, 3:49 PMI have a role "team" and I don't want them to subscribe to role "broadcaster"
t
tall-airline-16756
09/19/2025, 3:49 PMI understand you'd like to prevent participants with the role "team" from subscribing to the audio of those with the role "broadcaster." A great way to handle this is by using Track Subscription Permissions, which you manage on the publisher's side (in this case, the "broadcaster"). Let me walk you through how you can set this up:
1. Disable Universal Access: First, set
allParticipantsAllowedfalsesetTrackSubscriptionPermissions Copy code
localParticipant.setTrackSubscriptionPermissions(
false,
[new ParticipantTrackPermission({ participantSid: "allowed-sid", allTracksAllowed: true })]
);b
bland-baker-98506
09/19/2025, 3:50 PMThis is my current app
import React, { useState, useEffect } from "react";
import {
LiveKitRoom,
PreJoin,
GridLayout,
ParticipantTile,
ControlBar,
Chat,
ConnectionStateToast,
LayoutContextProvider,
RoomAudioRenderer,
useParticipants,
useParticipantPermissions,
useTracks,
useCreateLayoutContext,
} from "@icy-policeman-64898/components-react";
import { Track, RoomEvent } from "livekit-client";
import "@icy-policeman-64898/components-styles";
import { toast, ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
const ViewerCountBadge = () => {
const participants = useParticipants();
const [viewerCount, setViewerCount] = useState(0);
useEffect(() => {
const count = participants.filter((p) => {
try {
const meta = p.metadata ? JSON.parse(p.metadata) : {};
return meta.role === "viewer" || meta.role === "guest";
} catch {
return false;
}
}).length;
setViewerCount(count);
}, [participants]);
if (viewerCount === 0) return null;
return (
<div className="viewer-count">
<span className="viewer-count__icon">•</span>
<span className="viewer-count__text">
{viewerCount} Total Viewer{viewerCount > 1 ? "s" : ""}
</span>
</div>
);
};
const ViewerPreJoin = ({ onJoin }) => {
const [name, setName] = useState("");
const handleSubmit = (e) => {
e.preventDefault();
if (!name.trim()) {
toast.error("Please enter a display name.");
return;
}
// Call the onJoin function to submit the name and get the token
onJoin(name.trim());
};
return (
<div className="livekit-container--inner full-height full-width flex align-center justify-center">
<div className="prejoin-container">
<div className="lk-prejoin">
<h2 className="text-center">Enter the Competition</h2>
<form className="lk-username-container" onSubmit={handleSubmit}>
<input
className="lk-form-control"
type="text"
placeholder="Display name"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<button className="lk-button lk-join-button" type="submit">
Join Now
</button>
</form>
</div>
</div>
</div>
);
};
const RoomContent = ({ role, videoEnabled }) => {
const [widgetState, setWidgetState] = useState({
showChat: false,
unreadMessages: 0,
});
const tracks = useTracks(
[
{ source: Track.Source.Camera, withPlaceholder: true },
{ source: Track.Source.ScreenShare, withPlaceholder: false },
],
{ updateOnlyOn: [RoomEvent.ActiveSpeakersChanged], onlySubscribed: false }
);
const layoutContext = useCreateLayoutContext();
// Filter tracks based on participant filtering logic
const filteredTracks = tracks.filter((trackRef) => {
const participant = trackRef?.participant;
if (!participant) return false;
let metadata = {};
try {
metadata = participant.metadata ? JSON.parse(participant.metadata) : {};
} catch (err) {
console.warn("Invalid participant metadata JSON:", err);
}
const { role: participantRole, hidden } = metadata;
// Exclude viewer/guest participants
if (participantRole === "viewer" || participantRole === "guest" || participantRole === "broadcaster") {
return false;
}
// For team participants, only exclude if explicitly hidden
if (participantRole === "team" && !hidden) {
return true;
}
return false;
});
const shouldShowChat = role === "team" || role === "guest";
// Handle widget state changes from the layout context
const handleWidgetChange = (state) => {
setWidgetState(state);
};
return (
<div className="lk-video-conference">
<LayoutContextProvider
value={layoutContext}
onWidgetChange={handleWidgetChange}
>
<div className="lk-video-conference-inner">
<div className="lk-grid-layout-wrapper">
{/* Use filtered tracks for the layout, only showing valid tracks */}
<GridLayout tracks={filteredTracks}>
<ParticipantTile />
</GridLayout>
</div>
<ControlBar controls={{ chat: shouldShowChat }} />
</div>
{shouldShowChat && (
<Chat
style={{ display: widgetState.showChat ? 'grid' : 'none' }}
/>
)}
</LayoutContextProvider>
<RoomAudioRenderer />
<ConnectionStateToast />
</div>
);
};
function CompetitionApp() {
const matchData = window.MATCH_DATA;
if (!matchData.matchId || !matchData.serverUrl) {
return <div>Error: Missing match configuration</div>;
}
const [token, setToken] = useState(null);
const [role, setRole] = useState(matchData.role || (matchData.teamId ? "team" : "viewer"));
const [shouldConnect, setShouldConnect] = useState(false);
const [videoEnabled, setVideoEnabled] = useState(false);
const [error, setError] = useState(null);
const [showDisconnectedModal, setShowDisconnectedModal] = useState(false);
const [isDisconnected, setIsDisconnected] = useState(false);
const isTeam = role === "team";
const isViewer = role === "viewer" || role === "guest";
const isBroadcaster = role === "broadcaster";
const applyDeviceChange = async (kind, deviceId) => {
if (!navigator.mediaDevices?.getUserMedia) return;
try {
const constraints = { [kind]: { deviceId: { exact: deviceId } } };
await navigator.mediaDevices.getUserMedia(constraints);
} catch (err) {
console.error(
Device change error for ${kind}:/api/livekit/viewer-token?name=${name}t
tall-airline-16756
09/19/2025, 3:51 PMThank you so much for sharing your app code! To help you prevent participants with the role "team" from subscribing to the audio of those with the role "broadcaster," here are some steps you can try:
1. Set Track Subscription Permissions: When "broadcaster" participants publish their tracks, you can use the
setTrackSubscriptionPermissions Copy code
room.localParticipant.setTrackSubscriptionPermissions(
false,
[
new ParticipantTrackPermission({
participantSid: "allowed-team-sid", // Replace with the specific team participant SID
allTracksAllowed: false, // Or true if you want to allow all tracks
}),
]
);setTrackSubscriptionPermissionsb
bland-baker-98506
09/19/2025, 3:52 PMDon't you have a link where I can have deeper code reviews?
t
tall-airline-16756
09/19/2025, 3:52 PMThanks for reaching out! While LiveKit doesn’t have a specific link for detailed code reviews, I’m more than happy to help you review and improve your code right here. If there are particular parts you’d like feedback on or if you need a hand with certain features, just let me know—I’m here to guide you every step of the way.
b
bland-baker-98506
09/23/2025, 5:13 PMCan you help me make the specific changes to my code
t
tall-airline-16756
09/23/2025, 5:14 PMI'd be happy to help you make these specific changes to your code! To ensure that participants with the role "team" don’t subscribe to the audio of those with the role "broadcaster," you can update your app like this:
1. Set Track Subscription Permissions: Add some logic for your "broadcaster" participants to restrict who can subscribe when they connect to the room. For example, within your
onConnected Copy code
onConnected={async (room) => {
if (isBroadcaster) {
await room.localParticipant.setCameraEnabled(false);
await room.localParticipant.setMicrophoneEnabled(true);
// Restrict subscription permissions
room.localParticipant.setTrackSubscriptionPermissions(
false,
[
new ParticipantTrackPermission({
participantSid: "allowed-team-sid", // Replace with the specific team participant SID
allTracksAllowed: false, // Or true if you want to allow all tracks
}),
]
);
}
}}