集成通话能力

TUICallKit 是腾讯云推出一款音视频通话 UI 组件,通过集成该组件,您只需要编写几行代码就可以在聊天应用中体验音视频通话功能。



React version 18+(不支持 17.x 版本)
TypeScript
Node.js version 16+
npm(版本请与 node 版本匹配)

步骤1:开通音视频通话能力

在使用腾讯云提供的音视频服务前,您需要前往控制台,为应用开通音视频服务。具体步骤请参见 开通服务

步骤2:下载 TUICallKit 组件

通过 npm 方式下载 TUICallKit 组件,版本至 v3.3.6 版本及以上:
npm i @tencentcloud/call-uikit-react

步骤3:引入并调用 TUICallKit 组件

仅需添加两行代码,即可体验通话功能。引入 TUICallKit,并调用 TUICallKit 组件。
<ChatHeader /> 组件中开启 Call,显示 Icon,设置 enableCallture
注意:
1. 如果您还没有集成 TUIKit,请按照 集成 TUIKit 文档先集成 TUIKit。TUIKit 版本至 v2.2.8 及以上。
2. TUICallKit 组件可以添加 style,用于显示并控制 TUICallKit 的位置、宽高等样式。
// 引入 TUICallKit
import { TUICallKit } from '@tencentcloud/call-uikit-react';
// 如果您是 PC 端展示,请添加 style。初始化 TUICallKit 位置,如果是 H5 展示,则不需要
const callStyle: React.CSSProperties = {
position: 'fixed',
top: '50%',
left: '50%',
zIndex: '999',
transform: 'translate(-50%, -50%)',
};
// 请在 UIKitProvider 中使用 TUICallKit 组件
return (
<div style={{display: 'flex', height: '100vh'}}>
<UIKitProvider language={"en-US"}>
<TUICallKit style={callStyle} />
<div style={{maxWidth: '400px'}}>
<Profile />
<ConversationList />
</div>
<Chat>
<ChatHeader enableCall={true}/>
<MessageList />
<MessageInput />
</Chat>
<ChatSetting />
</UIKitProvider>
</div>
);

步骤4:启动项目

npm run start

步骤5:进行您的第一次通话





常见问题

如何关闭音视频通话功能?

关闭音视频通话按钮,在 <ChatHeader /> 组件中设置 enableCall 属性为 falseenableCall 不填写,默认为 false
return (
<div style={{display: 'flex', height: '100vh'}}>
<UIKitProvider language={"en-US"}>
<TUICallKit style={callStyle} />
<div style={{maxWidth: '400px'}}>
<Profile />
<ConversationList />
</div>
<Chat>
<ChatHeader enableCall={false}/>
<MessageList />
<MessageInput />
</Chat>
<ChatSetting />
</UIKitProvider>
</div>
);

如何购买套餐?

请参考购买链接 购买正式版

技术咨询

如果有任何需要或者反馈,您可以联系:info_rtc@tencent.com 。或者加入 Telegram 技术交流群组WhatsApp 交流群,享有专业工程师的支持,解决您的难题。