专为以下场景打造：REACT

React 视频通话 UI Kit

使用 Tencent RTC 的 React Video Calling UI Kit 添加应用内通话。嵌入 TUICallKit、连接用户，并根据你的 React 应用调整通话界面和悬浮窗。

开始构建试用 Call 演示

开发者资源

React 视频通话 UI Kit 文档与示例

组件参考

探索 React 视频通话 UI Kit 组件。

探索组件用户身份验证

接入指南

安装 React 视频通话 UI Kit 并连接用户。

React 集成快速入门

示例与源码

查看产品的实际运行效果并了解其实现方式。

试用 Call 演示查看 React 源代码

React 一对一视频通话

在 React 应用中引入面对面交流，用于建立个人联系或开展咨询，并在同一体验中提供视频和通话控制。

探索视频咨询

React 群组视频通话

在 React 通话组件中连接多位参与者。请参考平台指南配置通话流程和支持的群组布局。

探索群组通话

REACT CALL 功能

React 视频通话功能

连接人与人

语音和视频通话
来电处理

掌控通话体验

摄像头和麦克风控件
通话生命周期事件

打造属于您的产品体验

您的应用流程
平台专属集成

探索 React 视频通话组件

将 TUICallKit 接入你的组件布局，然后通过应用中的操作发起通话。

通话界面

嵌入您的 React 通话界面

在组件布局中挂载 TUICallKit，并使用已验证身份的用户进行初始化。该组件提供通话界面和控件。

阅读文档

import { TUICallKit } from '@trtc/calls-uikit-react';

export function CallView() {
  return <TUICallKit />;
}

发起通话

在 React 中发起视频通话

将接收方 ID 从您的应用传递给通话 API。在 React 界面中，将此操作连接到联系人、对话或通话按钮。

阅读文档

import { TUICallKitAPI, CallMediaType } from
  '@trtc/calls-uikit-react';

await TUICallKitAPI.calls({
  userIDList: [recipientID],
  type: CallMediaType.VIDEO,
});

悬浮窗

让用户在应用内切换页面时始终看到对话。

阅读文档

TUICallKitAPI.enableFloatWindow(true);

个性化定制

自定义您的 React Call UI Kit

根据您的产品调整 React 通话组件、控件和来电流程。

布局与控制

使用平台指南中的自定义选项调整通话体验。

阅读文档

开始使用

为你的 React 应用添加视频通话

01
创建您的应用
为应用和测试用户启用 Call。
打开 Call 控制台
02
添加 React 视频通话 UI Kit
按照平台指南连接您的项目。
按照集成指南操作
03
发起首次通话
登录两位测试用户，然后拨打并接听通话。
配置身份验证

React Call UI Kit

npm install @trtc/calls-uikit-react

import { TUICallKitAPI } from '@trtc/calls-uikit-react';

await TUICallKitAPI.init({ SDKAppID, userID, userSig });

React 视频通话 UI Kit 常见问题

React Video Calling UI Kit 包含哪些内容？

React Video Calling UI Kit 提供 TUICallKit 页面和通话控件。将其与您的用户身份和组件布局连接；Call 服务负责连接参与者。

应该使用 React 通话 SDK 还是 UI Kit？

UI Kit 在底层服务之上提供界面组件。如果需要更灵活地控制自己的应用界面，请选择 SDK。

Web 视频通话 SDK

在浏览器中使用 React 视频通话需要什么？

为已认证且启用 Call 服务的用户初始化 TUICallKit。使用 HTTPS 或 localhost，并处理摄像头、麦克风和浏览器播放权限。

React 通话集成指南

如何对 React 视频通话 UI Kit 的用户进行身份验证？

在您的服务器上创建 UserSig，并在您自己的登录流程完成后将其传递给客户端。应用密钥应始终保存在服务器上。

阅读身份验证指南

React 视频通话 UI Kit 可以免费使用吗？

界面与托管式 Call 服务承担不同的作用。请为你的应用开通该服务，并查看当前套餐、功能可用性和使用费用。

查看 Call 定价

如何将 React 视频通话 UI Kit 集成到 React 项目中？

初始化文档所述的 provider 并组合已连接的组件。让订阅及清理操作与 React 生命周期一致，再在实际应用中测试导航和重复挂载。

阅读平台指南

发布应用前如何测试 React 视频通话 UI Kit？

在独立用户之间测试邀请、接听、拒绝和结束通话状态，包括拒绝权限的情况。

阅读平台指南

如何定制 React 视频通话 UI Kit 的界面？

使用 @trtc/calls-uikit-react 中的 TUICallKitAPI 进行受支持的控件调整。例如，hideFeatureButton(FeatureButton.Camera) 可隐藏摄像头按钮，setLayoutMode(LayoutMode.LocalInLargeView) 可将本地视频放到大画面中。该布局设置仅适用于一对一视频通话。如果需要完全不同的界面，可基于 TUICallEngine 构建，不应假定每个内部视图都提供可替换它的 React prop。

查看定制指南

React Call 集成支持

集成问题

获取 React 视频通话 UI Kit 的配置帮助。

查看开发者文档

讨论您的应用

讨论您的产品、预期用量和集成需求。

联系销售人员

为您的 React 应用添加视频通话

从 React Video Calling UI Kit 开始，连接两名测试用户并创建您的第一个通话。

免费开始查看 UI Kit 指南

React 视频通话 UI Kit

React 视频通话 UI Kit 文档与示例

组件参考

接入指南

示例与源码

React 一对一视频通话

React 群组视频通话

React 视频通话功能

连接人与人

掌控通话体验

打造属于您的产品体验

探索 React 视频通话组件

嵌入您的 React 通话界面

在 React 中发起视频通话

悬浮窗

自定义您的 React Call UI Kit

布局与控制

铃声与身份信息

为你的 React 应用添加视频通话

创建您的应用

添加 React 视频通话 UI Kit

发起首次通话

React 视频通话 UI Kit 常见问题

React Video Calling UI Kit 包含哪些内容？

应该使用 React 通话 SDK 还是 UI Kit？

在浏览器中使用 React 视频通话需要什么？

如何对 React 视频通话 UI Kit 的用户进行身份验证？

React 视频通话 UI Kit 可以免费使用吗？

如何将 React 视频通话 UI Kit 集成到 React 项目中？

发布应用前如何测试 React 视频通话 UI Kit？

如何定制 React 视频通话 UI Kit 的界面？

React Call 集成支持

集成问题

讨论您的应用

为您的 React 应用添加视频通话