如何使用GetStream React SDK监听来电并获取Call对象？

核心逻辑：非发起方无需创建Call对象 #

非呼叫发起方不需要手动创建Call对象，Call实例是由发起方创建并通过Stream服务推送过来的，你只需要接收并存储这个已有的Call实例，再传递给StreamCall组件即可。

具体实现步骤 #

• 通过Client事件监听获取Call实例
  除了call.created，更关键的是监听call.incoming事件（当你被邀请加入通话时触发），在事件回调中直接拿到完整的Call对象，存入React状态：

  import { useState, useEffect } from 'react';
  import { StreamCall } from '@stream-io/video-react-sdk';
  
  function CallReceiver() {
    const [activeCall, setActiveCall] = useState(null);
    const client = useStreamVideoClient(); // 假设你已初始化并获取了client实例
  
    useEffect(() => {
      if (!client) return;
  
      // 监听来电事件
      const handleIncomingCall = (call) => {
        setActiveCall(call);
        // 这里可以处理来电提示逻辑，比如弹窗提醒用户接听
      };
  
      // 监听通话创建事件（捕获所有当前用户参与的通话）
      const handleCallCreated = (call) => {
        if (call.members.some(m => m.user.id === client.user.id)) {
          setActiveCall(call);
        }
      };
  
      client.on('call.incoming', handleIncomingCall);
      client.on('call.created', handleCallCreated);
  
      // 组件卸载时移除监听
      return () => {
        client.off('call.incoming', handleIncomingCall);
        client.off('call.created', handleCallCreated);
      };
    }, [client]);
  
    return (
      <div>
        {activeCall && (
          <StreamCall call={activeCall}>
            {/* 你的通话UI组件，比如视频窗口、控制按钮等 */}
          </StreamCall>
        )}
      </div>
    );
  }
  

• 通过Call ID主动获取Call实例
  如果你通过其他渠道（比如后端推送、消息通知）拿到了Call ID，可以用client.getCall()方法获取Call实例，再存入状态：

  useEffect(() => {
    const fetchCall = async (callId) => {
      if (!client || !callId) return;
      const call = await client.getCall('default', callId); // 'default'是通话类型，根据实际业务调整
      setActiveCall(call);
    };
  
    // 假设callId是从路由、通知或后端接口获取的
    fetchCall('target-call-id');
  }, [client]);
  

• 正确使用useCall钩子的场景
  如果你能提前拿到Call ID，useCall钩子也能直接返回Call实例，无需额外监听事件：

  import { useCall } from '@stream-io/video-react-sdk';
  
  function CallComponent({ callId }) {
    const { call, isLoading } = useCall('default', callId);
  
    if (isLoading) return <div>加载中...</div>;
  
    return call ? (
      <StreamCall call={call}>
        {/* 通话UI */}
      </StreamCall>
    ) : null;
  }
  

关键注意点 #

• 组件卸载时一定要移除Client事件监听，避免内存泄漏
• 存储Call实例前，建议判断当前用户是否是该通话的参与者，避免存储无关通话
• 多人通话场景下，call.created事件会推送给所有参与者，此时可直接拿到有效Call对象

内容的提问来源于stack exchange，提问作者Irvingo