Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Event listener in participant menu bar in React Daily video chat
// In Tray.js
function getStreamStates(callObject) {
let isCameraMuted,
isMicMuted,
isSharingScreen = false;
if (
callObject &&
callObject.participants() &&
callObject.participants().local
) {
const localParticipant = callObject.participants().local;
isCameraMuted = !localParticipant.video;
isMicMuted = !localParticipant.audio;
isSharingScreen = localParticipant.screen;
}
return [isCameraMuted, isMicMuted, isSharingScreen];
}
export default function Tray(props) {
// ...
useEffect(() => {
if (!callObject) return;
function handleNewParticipantsState(event) {
event && logDailyEvent(event);
const [isCameraMuted, isMicMuted, isSharingScreen] = getStreamStates(
callObject
);
setCameraMuted(isCameraMuted);
setMicMuted(isMicMuted);
setSharingScreen(isSharingScreen);
}
// Use initial state
handleNewParticipantsState();
// Listen for changes in state
callObject.on("participant-updated", handleNewParticipantsState);
// Stop listening for changes in state
return function cleanup() {
callObject.off("participant-updated", handleNewParticipantsState);
};
}, [callObject]);
// ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment