SuperAPI AI 工具集

cometchat-react-calls

编程与开发

查看项目

更新于 10-16 08:34

技能介绍

用途:为 React 系 Web 应用(Vite、CRA、Next.js、React Router、Astro)接入 CometChat 语音与视频通话,可独立使用通话功能,也可叠加在已有的 CometChat React UI Kit 聊天集成之上。

主要能力与关键前提:必须二选一确定模式——ringing(收到来电时接收方响铃并接受/拒绝,使用 CometChatIncomingCall 与 CometChatCallButtons)或 session(双方凭同一 sessionId 进入会议式房间,路由如 /meet/:sessionId,调用 joinSession)。两种模式不共享 UI、导航与界面结构,未确认模式前不应编写上述响铃组件代码。

依赖与用法:@cometchat/chat-sdk-javascript 负责响铃信令(initiateCall / acceptCall),@cometchat/calls-sdk-javascript 负责 WebRTC 会话(generateToken(sessionId)、joinSession(token, settings, container))。v5 使用普通 SessionSettings 对象,无 Builder。容器 div 在 joinSession 时同步测量,宽高为 0 会抛错,需用 flex-1 + min-h-0 或显式像素高度。空闲超时字段单位为毫秒(默认 60_000 / 120_000),afterPrompt 最小 60_000,禁用请用极大值,不建议设 0。

Next.js 限制:两个 SDK 都会破坏 SSR,需使用 webpack(next dev --webpack / next build --webpack)、配置 fs 与 path fallback、以 next/dynamic({ ssr: false }) 延迟加载 Provider,并在 useEffect 内动态 import SDK;否则出现模块找不到或 window 未定义错误。Vite / React Router / Astro 不涉及这些配置。

适用与不适用:适用于需要通话 UI 的 React 系 Web 应用;纯聊天、原生移动端、Angular、仅 SDK 无 UI Kit、服务端令牌签发、Visual Builder 通话等场景应改用对应技能。安装包体积较大(公开资料称通话应用生产包约 4.8 MB JS),构建时可能出现 COMMONJS_VARIABLE_IN_ESM 与分块体积告警,并非失败。价格、收费与支持平台等细节资料暂未提供。