OutgoingCall

Display outgoing call state when calling another user. Shows until someone accepts.

Features:

  • Callee details - Shows who is being called
  • Pre-join controls - Audio/video mute status

Customize via Custom Incoming/Outgoing Call components guide.

Outgoing Call Camera Enabled

Outgoing Call View Camera Disabled

General Usage

import {
  CallingState,
  OutgoingCall,
  useCall,
  useCalls,
  useCallStateHooks,
} from "@stream-io/video-react-native-sdk";

const CallPanel = () => {
  const call = useCall();
  const isCallCreatedByMe = call?.data?.created_by.id === call?.currentUserId;
  const { useCallCallingState } = useCallStateHooks();

  const callingState = useCallCallingState();

  // Display the outgoing call if the call state is RINGING and the call is created by me.
  if (callingState === CallingState.RINGING && isCallCreatedByMe) {
    return <OutgoingCall />;
  }
};

const Call = () => {
  const calls = useCalls();

  return (
    <StreamCall call={call[0]}>
      <CallPanel />
    </StreamCall>
  );
};

Props

landscape

Applies the landscape mode styles to the component, if true.

Type
boolean | undefined

onHangupCallHandler

Type
() => void | undefined

Handler to be executed when the outgoing call is cancelled or hanged up.

OutgoingCallControls

Prop to customize the Outgoing call controls in the OutgoingCall component.

TypeDefault Value
ComponentType| undefinedOutgoingCallControls