Hooks

useVideo Hook

toggleMeetingSetup

function () => void

Use this method to open or close the meeting setup options, such as input and output devices.

import { useSuperVizRoom, useVideo, VideoConference } from "@superviz/react-sdk";

function Room() {
  const { toggleMeetingSetup } = useVideo();

  const toggle = (e) => {
    toggleMeetingSetup();
  };

  return (
    <>
      <VideoConference participantType="host" />
      <button onClick={toggle}>Toogle Meeting setup</button>
    </>
  );
}

export default Room;

toggleCam

Type: () => void

Use this method to toggle the participant’s camera on or off during the video conference.

import { useSuperVizRoom, useVideo, VideoConference } from "@superviz/react-sdk";

function Room() {
  const { toggleCam } = useVideo();

  const toggle = (e) => {
    toggleCam();
  };

  return (
    <>
      <VideoConference participantType="host" />
      <button onClick={toggle}>Toogle Camera</button>
    </>
  );
}

export default Room;

toggleMicrophone

Type: () => void

This method allows you to mute or unmute the participant’s microphone during the video conference.

import { useSuperVizRoom, useVideo, VideoConference } from "@superviz/react-sdk";

function Room() {
  const { toggleMicrophone } = useVideo();

  const toggle = (e) => {
    toggleMicrophone();
  };

  return (
    <>
      <VideoConference participantType="host" />
      <button onClick={toggle}>Toogle Mic</button>
    </>
  );
}

export default Room;

toggleScreenShare

Type: () => void

Use this method to enable or disable participants sharing the screen with other participants in the meeting. Once activated it will ask the participant to share their screen. If activated it stops sharing the screen in the meeting.

import { useSuperVizRoom, useVideo, VideoConference } from "@superviz/react-sdk";

function Room() {
  const { toggleScreenShare } = useVideo();

  const toggle = (e) => {
    toggleScreenShare();
  };

  return (
    <>
      <VideoConference participantType="host" />
      <button onClick={toggle}>Toogle Screen share</button>
    </>
  );
}

export default Room;

toggleChat

Type: () => void

This method allows you to hide or show the chat modal.

import { useSuperVizRoom, useVideo, VideoConference } from "@superviz/react-sdk";

function Room() {
  const { toggleChat } = useVideo();

  const toggle = (e) => {
    toggleChat();
  };

  return (
    <>
      <VideoConference participantType="host" />
      <button onClick={toggle}>Toogle Chat</button>
    </>
  );
}

export default Room;

toggleTranscript

Type: () => void

This method toggles the transcript feature on and off, enabling you to use the AI Transcript API of the meeting's spoken content. When activated it will ask first for the meeting language before starting the transcript.

import { useSuperVizRoom, useVideo, VideoConference } from "@superviz/react-sdk";

function Room() {
  const { toggleTranscript } = useVideo();

  const toggle = (e) => {
    toggleTranscript();
  };

  return (
    <>
      <VideoConference participantType="host" />
      <button onClick={toggle}>Toogle transcript</button>
    </>
  );
}

export default Room;

hangUp

function () => void

This method allows you to end the video conference and disconnect from the meeting.

import { useSuperVizRoom, useVideo, VideoConference } from "@superviz/react-sdk";

function Room() {
  const { hangUp } = useVideo();

  const toggle = (e) => {
    hangUp();
  };

  return (
    <>
      <VideoConference participantType="host" />
      <button onClick={toggle}>Hang up</button>
    </>
  );
}

export default Room;