Not getting any ringing status in nextjs by using getstream sdk

Question

I started trying to integrate getstream video sdk to call from caller to callee. From the caller side, i successfully can make create calls but from the callee side i am not getting any status about the call.

Here my caller side codes are,

import {
  CustomButtonPrimary,
  CustomStackCenter,
  CustomStackFullWidth,
} from '@/styles/styled-components/CustomStacks';
import {CustomPaper} from '@/styles/styled-components/CustomStyles';
import CallIcon from '@mui/icons-material/Call';
import {
  Call,
  CallingState,
  StreamCall,
  StreamVideo,
  StreamVideoClient,
  useCallStateHooks,
} from '@stream-io/video-react-sdk';
import '@stream-io/video-react-sdk/dist/css/styles.css';
import {useEffect, useState} from 'react';
const apiKey = 'mmhfdzb5evj2'; // the API key can be found in the "Credentials" section
const token =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiSGFuX1NvbG8iLCJpc3MiOiJwcm9udG8iLCJzdWIiOiJ1c2VyL0hhbl9Tb2xvIiwiaWF0IjoxNjk4MjE0OTUwLCJleHAiOjE2OTg4MTk3NTV9.ugMkFCZcQHOnjT-JGT4rmCOe91p__2guOs2Lcrz8Ew8'; // the token can be found in the "Credentials" section
// the user id can be found in the "Credentials" section
// const callId = 'R2E4TuX4TPQ4'; // the call id can be found in the "Credentials" section

// initialize the StreamVideoClient

const Layout = ({callId, user}: {callId: string; user: any}) => {
  const [call, setCall] = useState<Call>();
  const client = new StreamVideoClient({apiKey, user, token});
  //const myCall = client.call('default', callId);
  const handleCreateCall = async () => {
    const newCall = await client.call('default', callId).join({
      ring: true,
      data: {
        members: [{user_id: 'Han_Solo'}, {user_id: 'Pre_Vizsla'}],
      },
    });
    console.log('daa', newCall);
    setCall(newCall);
  };
  const handleLeave = () => {
    // call.leave().catch((err) => {
    //   console.error(`Failed to leave the call`, err);
    // });
    // setCall(undefined);
  };
  // if (!call) {
  //   return null;
  // }
  return (
    <>
      {call ? (
        <CustomStackFullWidth>
          <StreamVideo client={client}>
            <StreamCall call={call}>
              <UILayout handleLeave={handleLeave} />
            </StreamCall>
          </StreamVideo>
        </CustomStackFullWidth>
      ) : (
        <CustomPaper sx={{p: '3rem'}}>
          <CustomStackCenter spacing={3}>
            <CallIcon sx={{fontSize: '50px'}} />
            <CustomButtonPrimary onClick={handleCreateCall}>
              Create Call
            </CustomButtonPrimary>
          </CustomStackCenter>
        </CustomPaper>
      )}
    </>
  );
};

export default Layout;

export const UILayout = ({handleLeave}: {handleLeave: () => void}) => {
  const {useCallState} = useCallStateHooks();
  const callingState = useCallState();

  useEffect(() => {
    if (callingState !== CallingState.JOINED) {
      return <div>Loading...</div>;
    }

    return (
      <CustomStackFullWidth>
        <StreamVideo client={client}>
          <StreamCall call={call}>
            <UILayout handleLeave={handleLeave} />
            {/* <RingingCall /> */}
          </StreamCall>
        </StreamVideo>
      </CustomStackFullWidth>
    );
  }, [callingState]);
};

on the other side, callee side code is also given below,

import {
  Call,
  RingingCall,
  StreamCall,
  StreamVideo,
  StreamVideoClient,
} from '@stream-io/video-react-sdk';
import {useState} from 'react';
const callId = '';
const userId = '';
const user = {
  id: userId,
  name: 'Anwar Irish',
  image: 'https://getstream.io/random_svg/?id=oliver&name=Oliver',
};
const apiKey = 
const token =
// const client = new StreamVideoClient({apiKey, user, token});
const RingingLayout = () => {
  const [call, setCall] = useState<Call>();
  const client = new StreamVideoClient({apiKey, user, token});

  // Listen for incoming calls
  client.on('incomingCall', async (incomingCall) => {
    try {
      console.log('ga', incomingCall);
      // await incomingCall.answer();
      // setCall(incomingCall);
    } catch (error) {
      console.error('Failed to answer the incoming call', error);
    }
  });

  if (!call) return null;

  return (
    <StreamVideo client={client}>
      <StreamCall call={call}>
        <RingingCall />
      </StreamCall>
    </StreamVideo>
  );
};

export default RingingLayout;

I tried my best to solve or find out the issue. Couldn't get any proper solution. Also, I read Getstream's documentations.

Answer 1

You can utilize the useCalls() hook that comes bundled with @stream-io/video-react-sdk. Here is a short snippet that demonstrates how it can be used:

import { useCalls, CallingState } from '@stream-io/video-react-sdk';

export const MyCallUI = () => {
  const calls = useCalls();

  // handle incoming ring calls
  const incomingCalls = calls.filter(
    (call) =>
      call.isCreatedByMe === false &&
      call.state.callingState === CallingState.RINGING,
  );

  const [incomingCall] = incomingCalls;
  if (incomingCall) {
    // render the incoming call UI
    return <MyIncomingCallUI call={incomingCall} />;
  }

  // handle outgoing ring calls
  const outgoingCalls = calls.filter(
    (call) =>
      call.isCreatedByMe === true &&
      call.state.callingState === CallingState.RINGING,
  );

  const [outgoingCall] = outgoingCalls;
  if (outgoingCall) {
    // render the outgoing call UI
    return <MyOutgoingCallUI call={outgoingCall} />;
  }

  return null;
};

Please note, this component needs to be rendered as a child of <StreamVideo>. Example:

export const MyApp = () => {
  // ... init
  return (
    <StreamVideo client={client}>
      <MyCallUI />
    </StreamVideo>
  );
};

We have expanded the docs section on managing Ring Calls. Please take a look here:

• https://getstream.io/video/docs/react/guides/joining-and-creating-calls/#watch-for-incoming-and-outgoing-calls

Additionally, here are two Code Sandboxes that showcase how a "ring call" integration can be done:

• Caller: https://codesandbox.io/s/stream-video-ringing-caller-x3twcw
• Callee: https://codesandbox.io/s/stream-video-ringing-callee-28wssp