Zoom video sdk make host full screen

Video SDK
1

I am using zoom video sdk in my react Js project where many of user will join the meeting but I want to make only host visible on the full screen for all the other users
to achieve this I need technical support

2

Hi @Lido as I descrbied in this answer: On the user side, I want to show only the host's video, not any participants or the user themselves - #4 by ekaansh.zoom

You get a 'peer-video-state-change' event from the Video SDK for each user. You can decide based on the event which video to render. For example: if you have 7 users with IDs 1-7, if we assume user 1 is the host. Then you can check something like this:

client.on('peer-video-state-change', (payload) => {
  if (payload.userId === 1) {
  // only if the userId is of the host then render the video
  if (payload.action === 'Start') {
    // a user turned on their video, render it
    stream.attachVideo(payload.userId, 3).then((userVideo) => {
      document.querySelector('video-player-container').appendChild(userVideo)
    })
  } 
...
})

For prioritized assistance, you can take advantage of Premier Developer Support plans.

3

@ekaansh.zoom
I am providing my react code below, can you please guide me how to fit your given solution in my code, Thanks in advance

"
import { useEffect, useState } from “react”;
import uitoolkit from “@zoom/videosdk-ui-toolkit”;

const JoinMeeting = ({ }) => {
const [session, setSession] = useState(null);

const urlParams  = new URLSearchParams(window.location.search);

const token      = urlParams.get("token");
const fname      = urlParams.get("user");
const sessionNam = urlParams.get("mid");

let sessionContainer = null;

//   const [sessionContainer, setSessionContainer] = useState(null);
const [zoomToken, setZoomToken]             = useState(token || null);
const [sessionName, setSessionName]         = useState(sessionNam || "");
const [sessionPasscode, setSessionPasscode] = useState("");

const firstName = fname;

const hstyle = firstName == "Host" 
    ? { position: 'absolute', width: '100%', height: '100%' }
    : {  };

const lastName = "";
// const isHost = stateUser?.userData?.isHost; // Check if user is the host
const [isHost, setIsHost] = useState(fname == "Host" ? true : false); // Check if user is the host
useEffect(() => {
    // setSessionContainer(document.getElementById("sessionContainer"));
}, []);

useEffect(() => {
    if (zoomToken) {
        startClass();
    }
}, [zoomToken]);

const startClass = async () => {
    sessionContainer = document.getElementById("sessionContainer");
    if(!sessionContainer){
        console.error("Session container not found!");
        return;
    }

    const config = {
        videoSDKJWT: zoomToken,
        sessionName: sessionName,
        userName: `${firstName} ${lastName}`,
        sessionPasscode: sessionPasscode,
        features: ["share", "audio", "video"],
        options:{
            video:{
                disableVideo: false, // Allow video
            },
            audio:{
                disableAudio: false, // Allow audio
            },
        },
    };

    try{
        console.log("Attempting to join session...");
        const newSession = await uitoolkit.joinSession(sessionContainer, config);
    
        if(!newSession){
            throw new Error("Session initialization returned null");
        }
        setSession(newSession);

        // Check if the current user is the host
        const user = newSession.getMySelf();
        setIsHost(user?.isHost || false);

        // Wait for session to load
        setTimeout(() => {
            updateView(newSession);
        }, 3000);
    
    }
    catch(error){
        console.error("Failed to initialize session:", error);
    }
};

const updateView = (session) => {
    if (!session) return;

    if(isHost){
        console.log("User is host: Showing all participants.");
    }
    else{
        console.log("User is NOT host: Showing only the host.");
        const users = session.getAllUsers();
        const hostUser = users.find((user) => user.isHost);
    
        if(hostUser){
            session.setFeaturedUser(hostUser.userId);
        }
        else{
            console.error("No host found in the session.");
        }
    }
};

return (
    <div className="App">
        <main>
            <div id="sessionContainer" style={{paddingBottom: '35px'}}></div>
        </main>
    </div>
);

};

export default JoinMeeting;
"

4

Hi @Lido, from your snippet it looks like you’re using the Video SDK UIToolkit. The UIToolkit doesn’t support selectively rendering participants at the moment. I’d suggest you check out the Video SDK instead for your use-case. Here’s an app to get you started quickly: GitHub - zoom/videosdk-web-helloworld

5

This topic was automatically closed 25 hours after the last reply. New replies are no longer allowed.