On / Off Camera - React

This feature enables hosts to turn their cameras on or off to share their video stream with other hosts and audience members during the meeting. Only hosts (in SEND_AND_RECV mode) can broadcast their camera feed, while audience members (in RECV_ONLY mode) can view it in real time.

enableWebcam()

• By using the enableWebcam() function of the useMeeting hook, the host can publish their video to to other hosts and audience members.

• You can also pass a customised video track in enableWebcam() by using Custom Video Track.

• The video stream of a participant can be accessed from the webcamStream property of the useParticipant hook.

disableWebcam()

• By using the disableWebcam() function of the useMeeting hook, the host can stop publishing their video to to other hosts and audience members.

toggleWebcam()

• By using the toggleWebcam() function of the useMeeting hook, host can start or stop publishing their video to to other hosts and audience members based on the current state of the camera.

• You can also pass a customised video track in toggleWebcam() by using Custom Video Track.

• The video stream of a participant can be accessed from the webcamStream property of useParticipant hook.

Example

import { useMeeting } from "@videosdk.live/react-sdk";

const LiveStreamView = () => {
  //Getting the camera methods from hook
  const { enableWebcam, disableWebcam, toggleWebcam } = useMeeting();

  const handleEnableWebcam = () => {
    // Enabling camera
    enableWebcam();
  };

  const handleDisableWebcam = () => {
    // Disabling camera
    disableWebcam();
  };

  const handleToggleWebcam = () => {
    // Toggling webcam
    toggleWebcam();
  };

  return (
    <>
      <button onClick={handleEnableWebcam}>Enable Webcam</button>
      <button onClick={handleDisableWebcam}>Disable Webcam</button>
      <button onClick={handleToggleWebcam}>Toggle Webcam</button>
    </>
  );
};

note

To learn, how to render video in the live stream, follow this detailed guide.

Events associated with enableWebcam

• Every Participant—including all the hosts and audience members will receive a callback on onStreamEnabled() event of the useParticipant() hook with the Stream object.

• Every Participant—including all the hosts and audience members will receive a callback on onMediaStatusChanged() event of the useParticipant() hook with the type of media and its status.

Events associated with disableWebcam

• Every Participant—including all the hosts and audience members will receive a callback on onStreamDisabled() event of the useParticipant() hook with the Stream object.

• Every Participant—including all the hosts and audience members will receive a callback on onMediaStatusChanged() event of the useParticipant() hook with the type of media and its status.

Events associated with toggleWebcam

• Every Participant—including all the hosts and audience members will receive a callback on onStreamEnabled() event of the useParticipant() hook with the Stream object if the video broadcasting was started.

• Every Participant—including all the hosts and audience members will receive a callback on onStreamDisabled() event of the useParticipant() hook with the Stream object if the video broadcasting was stopped.

• Every Participant—including all the hosts and audience members will receive a callback on onMediaStatusChanged() event of the useParticipant() hook with the type of media and its status.

import { useParticipant } from "@videosdk.live/react-sdk";

const ParticipantView = (participantId) => {
  //Callback for when the participant starts a stream
  function onStreamEnabled(stream) {
    if(stream.kind === 'video'){
      console.log("Video Stream On: onStreamEnabled", stream);
    }
  }

  //Callback for when the participant stops a stream
  function onStreamDisabled(stream) {
    if(stream.kind === 'video'){
      console.log("Video Stream Off: onStreamDisabled", stream);
    }
  }


  //Callback for when participant's media gets changed
  function onMediaStatusChanged(data) {
    const { kind, newStatus} = data;
    console.log("Participant Media Kind: ", kind, " newStatus: ", newStatus);
  }

  const {
    displayName
    ...
  } = useParticipant(participantId,{
    onStreamEnabled,
    onStreamDisabled,
    onMediaStatusChanged
    ...
  });
  return <> Participant View </>;
}

Video Permissions

• By default, VideoSDK will request video permission when the participants attempts to turn on the camera. Once the permission is granted the camera gets turned on. If the permission is denied, VideoSDK will send an error message in the onError event callback of the useMeeting hook.

Troubleshoot Video Permissions

• If a participant denies the camera permission, they can manually grant it by following below shown steps.

caution

To use the audio and video communications in the web browser, your site must be SSL enabled, i.e. it must be secured and running on https.

API Reference

The API references for all the methods and events utilized in this guide are provided below.

• enableWebcam()
• disableWebcam()
• toggleWebcam()
• onStreamEnabled()
• onStreamDisabled()
• onMediaStatusChanged()