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" sectionconst 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 StreamVideoClientconst 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.
