我开始尝试集成getstream video sdk来从调用者到被调用者调用。从调用者方面,我可以成功地进行创建调用,但从被调用者方面,我没有得到任何关于调用的状态。
这是我的来电侧代码
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]);
};
字符串
另一方面,被叫方代码也在下面给出,
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;
型
我尽了最大的努力去解决或找出问题。不能得到任何适当的解决方案。而且,我读了Getstream的文档。
1条答案
按热度按时间mnowg1ta1#
您可以使用
@stream-io/video-react-sdk
附带的useCalls()
钩子。这里有一个简短的片段演示如何使用它:字符串
请注意,此组件需要作为
<StreamVideo>
的子组件呈现。示例:型
我们已经扩展了有关管理振铃呼叫的文档部分。请在这里查看:
此外,这里有两个代码沙箱,展示了如何进行“振铃呼叫”集成: