Multi device support

[ertucaglar]

Which package/packages do you use?

• @stream-io/video-react-sdk
• @stream-io/video-react-native-sdk
• @stream-io/video-client

Is your feature request related to a problem? Please describe.
In our React Native application, we're trying to offer a WhatsApp-like experience and using native call features.

However, this experience breaks down if a user logs in on multiple devices simultaneously. The call goes to both devices, but if one accepts, the other struggles to handle it, leading to numerous anomalies.

Describe the solution you'd like
When a call comes in, we use iOS's native callKeep structure. When the call is accepted, information about the call on other devices should disappear, and no action should be taken within the app regarding the incoming call. In other words, all actions should only occur on the phone the user accepts the call on.

Describe alternatives you've considered
If this feature will take a long time to resolve, you can enable a function in your SDKs that completely disables the video-call feature. The existing disconnectUser and logoutPush methods don't completely solve the problem; even when I call these functions, the second phone remains active and anomalies still occur during calls.

[santhoshvai]

This should already be supported..

When there is an incoming call if your app mounts the <StreamCall> context component with the incoming, we listen to reject events/accepted on other device already events and end the call in callKeep.

Can you check if your app is mounting <StreamCall> context component on the incoming call scenarios please

docs for listening to ringing calls with a sample code: https://getstream.io/video/docs/react-native/incoming-calls/ringing/#watch-for-incoming-and-outgoing-calls

[ertucaglar]

AppNavigation.tsx

VoiceCallProvider

import React from 'react-native';
import {
  createContext,
  Dispatch,
  type FC,
  type ReactNode,
  SetStateAction,
  useContext,
  useEffect,
  useMemo,
  useState,
} from 'react';
import {
  type Call,
  CallingState,
  callManager,
  CallRejectedEvent,
  CallSessionParticipantJoinedEvent,
  type StreamVideoClient,
  useCalls,
  useStreamVideoClient,
} from '@stream-io/video-react-native-sdk';
import {
  ChannelType,
  Group,
  StartVoiceCallRequest,
  useAuthContext,
  User,
  useRealmContext,
  currentVoiceCallIdAtom,
  currentVoiceCallStateAtom,
  voiceCallPIPModeActiveAtom,
} from '@hoopt-app/react-native-hoopt-core';
import RNCallKeep, {AudioRoute, EventsPayload} from 'react-native-callkeep';
import {v4} from 'uuid';
import {useCallSounds} from '@screens/connections/hooks/useCallSounds.ts';
import {useSetAtom} from 'jotai';
import {ToastUtils} from '@components/toast/ToastUtils.ts';
import {useTranslation} from 'react-i18next';

interface VoiceCallContextProps {
  voiceClient: StreamVideoClient | null;
  currentCall: Call | null;
  startCall: (request: StartVoiceCallRequest) => void;
  endCall: () => void;
  joinGroupCall: (callId: string) => void;
  toggleSpeaker: () => void;
  speakerOn: boolean;
  channelName?: string | null;
  channelImage?: string | null;
  validCallingStates: CallingState[];
  callType?: ChannelType | null;
  setSpeakerOn: Dispatch<SetStateAction<boolean>>;
  activeAudioDevice: string | null;
  setActiveAudioDevice: Dispatch<SetStateAction<string | null>>;
  callStartTime?: Date | null;
  currentAudioDevices: AudioRoute[];
}

export const VoiceCallContext = createContext<
  VoiceCallContextProps | undefined
>(undefined);

interface VoiceCallProviderProps {
  children: ReactNode;
}

export const VoiceCallProvider: FC<VoiceCallProviderProps> = ({children}) => {
  // contexts
  const {meUser} = useAuthContext();

  // variables
  const validCallingStates = [
    CallingState.RECONNECTING,
    CallingState.JOINED,
    CallingState.JOINING,
    CallingState.MIGRATING,
  ];

  // realm
  const {useRealm} = useRealmContext();
  const realm = useRealm();

  // local states
  const [currentCall, setCurrentCall] = useState<Call | null>(null);
  const [speakerOn, setSpeakerOn] = useState<boolean>(false);
  const [activeAudioDevice, setActiveAudioDevice] = useState<string | null>(
    null,
  );
  const [callStartTime, setCallStartTime] = useState<Date | null>(null);
  const [currentAudioDevices, setCurrentAudioDevices] = useState<AudioRoute[]>(
    [],
  );

  // jotai states
  const setCurrentVoiceCallId = useSetAtom(currentVoiceCallIdAtom);
  const setCurrentVoiceCallState = useSetAtom(currentVoiceCallStateAtom);
  const setVoiceCallPIPModeActive = useSetAtom(voiceCallPIPModeActiveAtom);

  // hooks
  const {t} = useTranslation();
  const voiceClient = useStreamVideoClient();
  const calls = useCalls().filter(
    c => (!!currentCall?.id && c.id === currentCall?.id) || c.ringing,
  );
  const call = calls?.[0];
  const {playRingback, playBusyTone, stopSounds} = useCallSounds();

  useEffect(() => {
    handleInitialEvents();

    const startCallActionEvent = RNCallKeep.addEventListener(
      'didReceiveStartCallAction',
      didReceiveStartCallAction,
    );

    return () => {
      startCallActionEvent?.remove();
      try {
        call?.leave();
      } catch (e) {
        console.error(e);
      }
    };
  }, []);

  useEffect(() => {
    setCurrentCall(call || null);
    setCurrentVoiceCallId(call?.id || null);
    setCurrentVoiceCallState(call?.state?.callingState || null);
  }, [voiceClient, call]);

  useEffect(() => {
    let changeAudioRouteEventTimeout: number | NodeJS.Timeout;
    const changeAudioRouteEvent = RNCallKeep.addEventListener(
      'didChangeAudioRoute',
      async event => {
        try {
          clearTimeout(changeAudioRouteEventTimeout);

          changeAudioRouteEventTimeout = setTimeout(() => {
            if (event.output?.toLowerCase()?.includes('bluetooth')) {
              setActiveAudioDevice('bluetooth');
            } else if (event.output === 'Speaker') {
              setSpeakerOn(true);
              setActiveAudioDevice('speaker');
            } else if (event.output === 'Receiver') {
              setSpeakerOn(false);
              setActiveAudioDevice('earpiece');
            }
          }, 500);
        } catch (e) {
          console.error(e);
        }
      },
    );

    let changeMicStateEventTimeout: number | NodeJS.Timeout;
    const changeMicStateEvent = RNCallKeep.addEventListener(
      'didPerformSetMutedCallAction',
      async params => {
        try {
          clearTimeout(changeMicStateEventTimeout);

          changeMicStateEventTimeout = setTimeout(() => {
            if (params.muted) {
              currentCall?.microphone?.disable({forceStop: true});
            } else {
              currentCall?.microphone?.enable();
            }
          }, 500);
        } catch (e) {
          console.error(e);
        }
      },
    );

    const unsubCallSessionParticipantLeft = currentCall?.on(
      'call.session_participant_left',
      () => {
        if (callType === 'friend') {
          endCall();
        }
      },
    );

    return () => {
      changeAudioRouteEvent?.remove();
      changeMicStateEvent?.remove();
      unsubCallSessionParticipantLeft?.();
    };
  }, [currentCall]);

  useEffect(() => {
    const unsubCallEndedEvent = voiceClient?.on('call.ended', async () => {
      await endCall();
    });

    const unsubParticipantJoined = voiceClient?.on(
      'call.session_participant_joined',
      (event: CallSessionParticipantJoinedEvent) => {
        if (event.participant.user.id !== voiceClient.state.connectedUser?.id) {
          setCallStartTime(new Date());
          stopSounds();
        }
      },
    );

    const unsubCallRejected = voiceClient?.on(
      'call.rejected',
      async (event: CallRejectedEvent) => {
        try {
          if (event.call.type === 'default') {
            await voiceClient.call(event.call.type, event.call.id).endCall();
          } else if (event.call.type === 'audio_room') {
            await voiceClient.call(event.call.type, event.call.id).leave();
          }

          await voiceClient.call(event.call.type, event.call.id).get();

          if (
            (event.reason === 'timeout' &&
              event.call.created_by.id ===
                voiceClient.state.connectedUser?.id) ||
            (event.reason === 'decline' &&
              event.user.id !== voiceClient.state.connectedUser?.id)
          ) {
            playBusyTone();
          }
        } catch (e) {
          console.error(e);
        } finally {
          setVoiceCallPIPModeActive(false);
        }
      },
    );

    return () => {
      unsubCallEndedEvent?.();
      unsubParticipantJoined?.();
      unsubCallRejected?.();
    };
  }, [voiceClient]);

  // functions
  const handleInitialEvents = async () => {
    try {
      const initialEvents = await RNCallKeep.getInitialEvents();
      if (initialEvents.length) {
        const startCallEvent = initialEvents.find(
          f => f.name === 'RNCallKeepDidReceiveStartCallAction',
        );
        if (startCallEvent) {
          didReceiveStartCallAction(startCallEvent.data);
        }
      }
    } catch (e) {
      console.error(e);
    }
  };

  const didReceiveStartCallAction = async (
    args: EventsPayload['didReceiveStartCallAction'],
  ) => {
    try {
      if (!args?.callUUID && args?.handle?.endsWith('@hoopt.app')) {
        const userIdValue = args?.handle?.replace('@hoopt.app', '');

        if (userIdValue) {
          startCall({
            type: 'friend',
            objectId: parseInt(userIdValue),
          });
        }
      }
    } catch (e) {
      console.error(e);
    }
  };

  const clearCalls = async () => {
    const currentUserId = voiceClient?.state?.connectedUser?.id;
    const {calls: oneToOneCalls} = (await voiceClient?.queryCalls({
      filter_conditions: {
        $and: [{ongoing: true}, {members: {$in: [currentUserId]}}],
      },
      sort: [{field: 'created_at', direction: -1}],
      limit: 100,
    })) as {
      calls: Call[];
    };

    oneToOneCalls?.map(call => {
      try {
        call?.endCall();
      } catch (e) {}
    });
  };

  const hasActiveCall = async (
    targetMemberId: string,
    targetUserName: string,
  ) => {
    try {
      const {calls: oneToOneCalls} = (await voiceClient?.queryCalls({
        filter_conditions: {
          $and: [{ongoing: true}, {members: {$in: [targetMemberId]}}],
        },
        sort: [{field: 'created_at', direction: -1}],
        limit: 100,
      })) as {
        calls: Call[];
      };
      if (oneToOneCalls?.filter(f => !f.state.endedAt)?.length > 0) {
        playBusyTone();
        ToastUtils.show({
          type: 'success',
          text1: t('screens.voiceCallScreen.userIsBusy', {targetUserName}),
        });
        return true;
      }

      return false;
    } catch (e) {
      console.error(e);
      return false;
    }
  };

  const startCall = async (request: StartVoiceCallRequest) => {
    try {
      if (request.type === 'friend') {
        const targetUser = realm
          .objects<User>(User.schema.name)
          .filtered('userId == $0', request.objectId)?.[0];

        if (!targetUser) {
          return;
        }

        await clearCalls();
        const hasUserActiveCall = await hasActiveCall(
          targetUser.chatId as string,
          targetUser.name,
        );

        if (hasUserActiveCall) {
          return;
        }

        const callId = `${meUser?.userId}_${v4()}`;

        const newCall = voiceClient?.call('default', callId);
        await newCall?.getOrCreate({
          ring: true,
          video: false,
          data: {
            members: [
              {user_id: meUser?.chatId as string},
              {user_id: targetUser.chatId as string},
            ],
          },
        });

        if (newCall) {
          playRingback();

          setCurrentCall(newCall);
        }
      } else if (request.type === 'group') {
        const group = realm
          .objects<Group>(Group.schema.name)
          .filtered('groupId == $0', request.objectId)?.[0];

        const callId = `group-${request.objectId}-${v4()}`;

        const newCall = voiceClient?.call('audio_room', callId);
        await newCall?.join({
          create: true,
          video: false,
          data: {
            members: [{user_id: meUser?.chatId as string}],
            custom: {
              channelName: group?.name,
              channelImage: group?.groupPicture,
            },
          },
        });

        if (newCall) {
          playRingback();

          setCurrentCall(newCall);
        }
      }
    } catch (e) {
      console.error(e);
    }
  };

  const endCall = async () => {
    try {
      stopSounds();

      if (currentCall?.type === 'default') {
        await currentCall?.endCall();
      }

      callManager.stop();
      setSpeakerOn(false);
    } catch (e) {
      console.error(e);
    } finally {
      setCurrentCall(null);
      setCallStartTime(null);
      setVoiceCallPIPModeActive(false);
    }
  };

  const toggleSpeaker = () => {
    try {
      callManager.speaker?.setForceSpeakerphoneOn(!speakerOn);
      setSpeakerOn(!speakerOn);
    } catch (e) {
      console.error(e);
    }
  };

  const joinGroupCall = async (callId: string) => {
    try {
      const newCall = voiceClient?.call('audio_room', callId);
      if (newCall) {
        await newCall?.join();
        await newCall?.microphone?.toggle();
        await newCall?.microphone?.enable();
        setCurrentCall(newCall);
      }
    } catch (e) {
      console.error(e);
    }
  };

  const channelName = useMemo(() => {
    return (
      currentCall?.state?.custom?.channelName ||
      currentCall?.state?.createdBy?.name
    );
  }, [
    currentCall?.state?.custom?.channelName,
    currentCall?.state?.createdBy?.name,
  ]);

  const channelImage = useMemo(() => {
    return currentCall?.type === 'default'
      ? currentCall?.state?.createdBy?.image
      : currentCall?.state?.custom?.channelImage;
  }, [
    currentCall?.type,
    currentCall?.state?.custom?.channelImage,
    currentCall?.state?.createdBy?.image,
  ]);

  const callType = useMemo(() => {
    return currentCall?.type
      ? ((currentCall?.type === 'default' ? 'friend' : 'group') as ChannelType)
      : null;
  }, [currentCall?.type]);

  return (
    <VoiceCallContext.Provider
      value={{
        voiceClient: voiceClient || null,
        currentCall,
        startCall,
        endCall,
        channelName,
        channelImage,
        validCallingStates,
        callType,
        toggleSpeaker,
        speakerOn,
        setSpeakerOn,
        joinGroupCall,
        activeAudioDevice,
        setActiveAudioDevice,
        callStartTime,
        currentAudioDevices,
      }}>
      {children}
    </VoiceCallContext.Provider>
  );
};

export const useVoiceCallContext = (): VoiceCallContextProps => {
  const context = useContext(VoiceCallContext);
  if (!context) {
    throw new Error(
      'useVoiceCallContext must be used within a VoiceCallProvider',
    );
  }
  return useMemo(() => context, [context]);
};

VoiceCallContainer.tsx

import React, {FC} from 'react';
import {StreamCall} from '@stream-io/video-react-native-sdk';
import {VoiceCallContent} from '@screens/connections/components/voiceCall/components/VoiceCallContent.tsx';
import {useVoiceCallContext} from '@screens/connections/contexts/VoiceCallContext.tsx';
import {CallingState} from '@stream-io/video-client';
import {VoiceCallInAppHeader} from '@screens/connections/components/voiceCall/components/VoiceCallInAppHeader.tsx';

export const VoiceCallContainer: FC = () => {
  // contexts
  const {currentCall} = useVoiceCallContext();

  if (
    (currentCall?.state?.callingState === CallingState.RINGING ||
      currentCall?.state?.callingState === CallingState.IDLE) &&
    !currentCall?.isCreatedByMe
  ) {
    return null;
  }

  return (
    currentCall && (
      <StreamCall call={currentCall}>
        <VoiceCallContent />
        <VoiceCallInAppHeader />
      </StreamCall>
    )
  );
};

In the VoiceCallContainer, I'm passing the currentCall information from the VoiceCallProvider to the StreamCall object, and this appears in an absolute layout view, meaning it's displayed above all navigation screens.

Apart from this structure, we don't have any other specific code. Despite this, we frequently encounter problems when it becomes a multi-device setup.

The main problems we experience are as follows:

1- Voice calls are answered, but the session doesn't start.
2- Sometimes the microphone remains muted, even though all permissions are granted.
3- Sometimes, without the application opening at all, the connection fails when we accept the call directly from the iOS native call screen.

These problems don't follow a fixed pattern; they occur completely randomly.

We are trying to implement the instructions in the documents you provided, but as we discussed before, we want to offer a native call experience in our application as well. Calls aren't only answered within the application, but also via iOS's native notification. In this case, when answered via the notification, it's not possible to run the callManager.start command. @santhoshvai