External Call Detection Events - React Native

VideoSDK tells you when the participant's device has a phone call while they are in a room. You can use these events to update your UI, for example to show that the participant is on another call.

• Only the participant whose device has the call receives the events. Other participants in the room do not.
• The SDK only reports the call. It does not mute the mic, turn off the camera or leave the room. To mute the mic during a call, call muteMic() yourself.
• On Android, only cellular calls are reported. On iOS, calls from the Phone app, FaceTime and apps that use CallKit are reported.

Subscribe to the events with the useRoom hook. Each event receives an object with a callType of "incoming" or "outgoing".

onExternalCallRinging()

• This event is triggered when a call starts ringing.
• On Android, only an incoming call rings, so callType is always "incoming". On iOS, a call you dial also rings, with callType set to "outgoing".

onExternalCallAnswered()

• This event is triggered when a call is answered.
• callType is "incoming" for a call that rang on the device, and "outgoing" for a call you dialled.
• On Android, a call you dial is reported as answered when you dial it, before the other party picks up.

onExternalCallRejected()

• This event is triggered when a ringing call ends without being answered.
• A declined call and a missed call both arrive here. Android cannot tell them apart.

onExternalCallHangup()

• This event is triggered when an answered call ends.
• callType is the same value that onExternalCallAnswered() reported.

Android Setup

On Android, the SDK needs the READ_PHONE_STATE permission to detect calls. Without it, no events are sent. iOS needs no permission.

1. Add the permission to android/app/src/main/AndroidManifest.xml:

AndroidManifest.xml

<uses-permission android:name="android.permission.READ_PHONE_STATE" />

2. Ask the user for it before the room joins. requestPermission() of useMediaDevice does not cover it, so use PermissionsAndroid:

import { PermissionsAndroid, Platform } from "react-native";

async function requestPhoneStatePermission() {
  if (Platform.OS !== "android") return true;
  const result = await PermissionsAndroid.request(
    PermissionsAndroid.PERMISSIONS.READ_PHONE_STATE
  );
  return result === PermissionsAndroid.RESULTS.GRANTED;
}

Example

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

const RoomView = () => {
  const [isOnPhoneCall, setIsOnPhoneCall] = useState(false);

  useRoom({
    onExternalCallRinging: ({ callType }) => {
      console.log("Phone call ringing:", callType);
    },
    onExternalCallAnswered: ({ callType }) => {
      console.log("Phone call answered:", callType);
      setIsOnPhoneCall(true);
    },
    onExternalCallRejected: ({ callType }) => {
      console.log("Phone call not answered:", callType);
    },
    onExternalCallHangup: ({ callType }) => {
      console.log("Phone call ended:", callType);
      setIsOnPhoneCall(false);
    },
  });

  return isOnPhoneCall ? <Text>You are on a phone call</Text> : null;
};

API Reference

The API references for all the events used in this guide are provided below.

• onExternalCallRinging()
• onExternalCallAnswered()
• onExternalCallRejected()
• onExternalCallHangup()