How to Keep the Camera Focused on One User During a Call?

[Humair]

I want to keep the camera fixed on a user and prevent the main screen from switching while they are speaking. Do you have any suggestions for achieving this?
Any anyone help me? What do I do with my Zoom chatter?

[ekaansh.zoom (Ekaansh)]

If you’re using the Video SDK. You can render the specific user based on their UID. You can skip the logic for other users. Here’s some code:

import ZoomVideo, { VideoPlayer, VideoQuality } from "@zoom/videosdk";
import "./style.css";

// You should sign your JWT with a backend service in a production use-case
const sdkKey = ""

const videoContainer = document.querySelector('video-player-container') as HTMLElement;
const topic = "Test";
const role = 1;
const username = `User-${String(new Date().getTime()).slice(6)}`;
const client = ZoomVideo.createClient();
await client.init("en-US", "Global", { patchJsMedia: true });

const startCall = async () => {
  // generate a token to join the session - in production this will be done by your backend
  const token = fetch("");
  client.on("peer-video-state-change", renderVideo);
  await client.join(topic, token, username);
  const mediaStream = client.getMediaStream();
  await mediaStream.startAudio();
  await mediaStream.startVideo();
  // render the video of the current user
  await renderVideo({ action: 'Start', userId: client.getCurrentUserInfo().userId });
};

const renderVideo = async (event: { action: "Start" | "Stop"; userId: number; }) => {
   if ( userId == "YOUR_DESIRED_UID_HERE") {
    const mediaStream = client.getMediaStream();
    if (event.action === 'Stop') {
      const element = await mediaStream.detachVideo(event.userId);
      Array.isArray(element) ? element.forEach((el) => el.remove()) : element.remove();
    } else {
      const userVideo = await mediaStream.attachVideo(event.userId, VideoQuality.Video_360P);
      videoContainer.appendChild(userVideo as VideoPlayer);
    }
  } else {
  // dont render
}
};

const leaveCall = async () => {
  const mediaStream = client.getMediaStream();
  for (const user of client.getAllUser()) {
    const element = await mediaStream.detachVideo(user.userId);
    Array.isArray(element) ? element.forEach((el) => el.remove()) : element.remove();
  }
  client.off("peer-video-state-change", renderVideo);
  await client.leave();
}

// UI Logic
const startBtn = document.querySelector("#start-btn") as HTMLButtonElement;
const stopBtn = document.querySelector("#stop-btn") as HTMLButtonElement;

startBtn.addEventListener("click", async () => {
  if (!sdkKey || !sdkSecret) {
    alert("Please enter SDK Key and SDK Secret in the .env file");
    return;
  }
  startBtn.innerHTML = "Connecting...";
  startBtn.disabled = true;
  await startCall();
  startBtn.innerHTML = "Connected";
  startBtn.style.display = "none";
  stopBtn.style.display = "block";
});

stopBtn.addEventListener("click", async () => {
  await leaveCall();
  stopBtn.style.display = "none";
  startBtn.style.display = "block";
  startBtn.innerHTML = "Join";
  startBtn.disabled = false;
});

[Humair]

I appreciate your assistance. Thank you!