On the user side, I want to show only the host's video, not any participants or the user themselves

Video SDK
1

I am using the Video SDK in React.js. Please help me and suggest what I can do.

2

Hey @harshitgarg076

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)
    })
  } 
...
})
3 
import { useEffect, useState } from "react";
import uitoolkit from "@zoom/videosdk-ui-toolkit";
import { useSelector } from "react-redux";
import "@zoom/videosdk-ui-toolkit/dist/videosdk-ui-toolkit.css";

const ZoomClass = () => {
  const [session, setSession] = useState(null);
  const urlParams = new URLSearchParams(window.location.search);
  const token = urlParams.get("token");
  const sessionNam = urlParams.get("sessionName");
  const [sessionContainer, setSessionContainer] = useState(null);
  const [zoomToken, setZoomToken] = useState(token || null);
  const [sessionName, setSessionName] = useState(sessionNam || "");
  const [sessionPasscode, setSessionPasscode] = useState("");

  const stateUser = useSelector((state) => state.user);
  const firstName = stateUser?.userData?.firstName || "Guest";
  const lastName = stateUser?.userData?.lastName || "";
  const isHost = true; // Ensure this is set correctly for the host

  useEffect(() => {
    setSessionContainer(document.getElementById("sessionContainer"));
  }, []);

  const startClass = async () => {
    const joinFlowElement = document.getElementById("join-flow");
    if (joinFlowElement) joinFlowElement.style.display = "none";

    if (!sessionContainer) {
      console.error("Session container not found!");
      return;
    }

    const config = {
      videoSDKJWT: zoomToken,
      sessionName: sessionName,
      userName: `${firstName} ${lastName}`,
      sessionPasscode: sessionPasscode,
      features: ["video", "audio"],
      options: {
        video: { disableVideo: !isHost }, // Host video enabled, others disabled
        audio: { disableAudio: !isHost }, // Host audio enabled, others disabled
        users: { hideUserList: true },
        chat: { disableChat: true },
        share: { disableScreenShare: true },
        toolbar: { hideToolbar: true },
      },
    };

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

      console.log("Session started successfully:", sessionInstance);
      setSession(sessionInstance);

      // Listen for peer video state changes
      sessionInstance.on("peer-video-state-change", async (payload) => {
        if (payload.action === "Start") {
          try {
            const allParticipants = sessionInstance.getAllUsers();
            console.log('allParticipants',allParticipants)
            const hostId = allParticipants.find(user => user.isHost)?.userId;
            
            if (hostId) {
              const videoContainer = document.getElementById("video-container");
              videoContainer.innerHTML = ""; // Clear previous video
              const hostVideo = await sessionInstance.stream.attachVideo(hostId, 3);
              videoContainer.appendChild(hostVideo);
              videoContainer.style.display = "flex";
              videoContainer.style.width = "100%";
              videoContainer.style.height = "100vh"; // Full screen
              videoContainer.style.justifyContent = "center";
              videoContainer.style.alignItems = "center";
            }
          } catch (error) {
            console.error("Error attaching host video:", error);
          }
        }
      });
    } catch (error) {
      console.error("Failed to initialize session:", error);
    }
  };

  return (
    <div className="zoom-container">
      <div id="join-flow" className="join-screen">
        <h2>Join Zoom Class</h2>
        <button onClick={startClass} className="join-btn">Start Class</button>
      </div>
      <div id="video-container" className="video-container"></div>
      <div id="sessionContainer"></div>
    </div>
  );
};

export default ZoomClass;

This is my code please check

4

Hi @harshitgarg076 the UIToolkit doesn’t support selectively rendering participants at the moment. You’re importing it in the second line:

import uitoolkit from "@zoom/videosdk-ui-toolkit";

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

Thank you for your response. This package @zoom/videosdk is working fine.

1 Like