Toggle Remote Participant Media - React Native

The host can ask a participant to turn their microphone or camera on, and can turn them off. This guide focuses on this very aspect of controlling other participant's media.

note

This page uses the following asynchronous methods. Refer to their API reference for the errors each Promise may reject with, and handle these rejections appropriately based on your use case.

• enableCam()
• enableMic()
• disableCam()
• disableMic()

note

The Participant with the capability to control other participant's media should have permission allow_mod passed in the token. To know more about permissions visit here.

Before delving into the methods and events associated with this functionality, explore how the flow would unfold.

In the diagram, accept() and reject() are the functions that the onMicRequested and onWebcamRequested events hand to Participant B. accept() turns Participant B's microphone or camera on, and reject() declines the request.

Methods

enableMic()

• If the host wishes to activate a participant's microphone, the enableMic() method from the useParticipant hook should be employed.

• Upon invoking this method, the participant whose microphone is requested for, will receive the onMicRequested event. This event contains the participantId of the host making the request, and accept() and reject() to answer it. accept() turns the participant's microphone on.

• For instance, if a room involves Participant A and Participant B, and the host (Participant A) desires to enable the microphone of Participant B, the host will utilize the enableMic() function to send a request to Participant B. Subsequently, Participant B will receive the onMicRequested event and can choose to either accept or decline the incoming request.

enableCam()

• If the host wishes to activate a participant's camera, the enableCam() method from the useParticipant hook should be employed.

• Upon invoking this method, the participant whose camera is requested for, will receive the onWebcamRequested event. This event contains the participantId of the host making the request, and accept() and reject() to answer it. accept() turns the participant's camera on.

• For instance, if a room involves Participant A and Participant B, and the host (Participant A) desires to enable the camera of Participant B, the host will utilize the enableCam() function to send a request to Participant B. Subsequently, Participant B will receive the onWebcamRequested event and can choose to either accept or decline the incoming request.

disableMic()

• If the host wishes to deactivate a participant's microphone, the disableMic() method from the useParticipant hook should be employed.

• This will automatically disable the microphone of the participant.

disableCam()

• If the host wishes to deactivate a participant's camera, the disableCam() method from the useParticipant hook should be employed.

• This will automatically disable the camera of the participant.

Example

import { useParticipant } from "@videosdk.live/react-native-sdk";
import { TouchableOpacity, Text } from "react-native";

const ParticipantView = () => {
  const { enableCam, disableCam, enableMic, disableMic } =
    useParticipant("<participant-id>");

  const handleEnableWebcam = async () => {
    // This will emit an event called "onWebcamRequested" to that particular participant
    try {
      await enableCam();
    } catch (err) {
      console.error("enableCam failed:", err);
    }
  };

  const handleEnableMic = async () => {
    // This will emit an event called "onMicRequested" to that particular participant
    try {
      await enableMic();
    } catch (err) {
      console.error("enableMic failed:", err);
    }
  };

  const handleDisableWebcam = async () => {
    // This will disable the webcam of that particular participant
    try {
      await disableCam();
    } catch (err) {
      console.error("disableCam failed:", err);
    }
  };

  const handleDisableMic = async () => {
    // This will disable the mic of that particular participant
    try {
      await disableMic();
    } catch (err) {
      console.error("disableMic failed:", err);
    }
  };

  return (
    <>
      <TouchableOpacity
        onPress={() => {
          handleEnableWebcam();
        }}
      >
        <Text>Enable Webcam</Text>
      </TouchableOpacity>

      <TouchableOpacity
        onPress={() => {
          handleEnableMic();
        }}
      >
        <Text>Enable Mic</Text>
      </TouchableOpacity>

      <TouchableOpacity
        onPress={() => {
          handleDisableWebcam();
        }}
      >
        <Text>Disable Webcam</Text>
      </TouchableOpacity>

      <TouchableOpacity
        onPress={() => {
          handleDisableMic();
        }}
      >
        <Text>Disable Mic</Text>
      </TouchableOpacity>
    </>
  );
};

Events

onWebcamRequested

This event is triggered for a participant (Participant B) when the host (Participant A), requests to enable their webcam. The event handler for this event will receive an object with the following properties:

• participantId - ParticipantId of the requesting participant.
• accept() - Accepts the request and turns the camera on. Returns a Promise.
• reject() - Declines the request. Returns a Promise.

onMicRequested()

This event is triggered for a participant (Participant B) when the host (Participant A), requests to enable their microphone. The event handler for this event will receive an object with the following properties:

• participantId - ParticipantId of the requesting participant.
• accept() - Accepts the request and turns the microphone on. Returns a Promise.
• reject() - Declines the request. Returns a Promise.

Usage

import { useRoom } from "@videosdk.live/react-native-sdk";
import { Alert } from "react-native";

function RoomView() {
  useRoom({
    onWebcamRequested: ({ participantId, accept, reject }) => {
      Alert.alert("Turn on camera?", `Requested by ${participantId}`, [
        { text: "Decline", style: "cancel", onPress: () => reject() },
        {
          text: "Accept",
          onPress: async () => {
            try {
              await accept();
            } catch (err) {
              console.error("accept failed:", err);
            }
          },
        },
      ]);
    },
    onMicRequested: ({ participantId, accept, reject }) => {
      Alert.alert("Turn on microphone?", `Requested by ${participantId}`, [
        { text: "Decline", style: "cancel", onPress: () => reject() },
        {
          text: "Accept",
          onPress: async () => {
            try {
              await accept();
            } catch (err) {
              console.error("accept failed:", err);
            }
          },
        },
      ]);
    },
  });

  return null;
}

API Reference

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

• enableMic()
• enableCam()
• onWebcamRequested()
• onMicRequested()