On / Off Camera - Javascript

Participants in the meeting have the ability to toggle their cameras on or off using the methods outlined below.

enableWebcam()

• By using the enableWebcam() function of the meeting object, the local participant can publish their video to other participants.

• You can only call this method when the local participant is not broadcasting video to others.

• 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 streams property of the Participant object.

disableWebcam()

• By using the disableWebcam() function of the meeting object, the local participant can stop publishing their video to other participants.

• You can only call this method when the local participant is broadcasting video to others.

Example

let meeting;

// Initialize Meeting
meeting = VideoSDK.initMeeting({
  // ...
});

const enableWebcamBtn = document.getElementById("enableWebcamBtn");
enableWebcamBtn.addEventListener("click", () => {
  // Enable Webcam in Meeting
  meeting?.enableWebcam();
});

const disableWebcamBtn = document.getElementById("disableWebcamBtn");
disableWebcamBtn.addEventListener("click", () => {
  // Disable Webcam in Meeting
  meeting?.disableWebcam();
});

note

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

Events associated with enableWebcam

• Every Participant will receive a callback onstream-enabled event of the participant object with the Stream object.

• Every Participant will receive a callback on media-status-changed event of the participant object with the type of media and its status.

Events associated with disableWebcam

• Every Participant will receive a callback on stream-disabled event of the participant object with Stream object.

• Every Participant will receive a callback on media-status-changed event of the participant object with the type of media and its status.

const participants = meeting.participants;
const participant = participants.get("<participant-id>");

participant.on("stream-enabled", (stream) => {
  if (stream.kind === "video") {
    //particiapnt turned on video
    //Render Participant video logic here
  }
});

participant.on("stream-disabled", (stream) => {
  if (stream.kind === "video") {
    //particiapnt turned off video
    //remove Participant video logic here
  }
});

participant.on("media-status-changed", (data) => {
  const { kind, newStatus } = data;
  if (kind === "video") {
    //particiapnt media status changed
  }
});

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 meeting object.

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()
• stream-enabled event
• stream-disabled event
• media-status-changed event