实时音视频
有奖捉虫：办公协同&微信生态&物联网文档专题 HOT
文档中心 > 实时音视频

Web

最近更新时间：2024-03-22 15:46:32

我的收藏

本页目录：

TUICallKit 是腾讯云推出一款新的音视频通话 UI 组件，是 TRTCCalling 的升级版本，支持群组通话、AI 降噪等更多功能特性、支持全平台间互通呼叫，功能更加稳定，欢迎您使用新的 TUICallKit 组件，在升级前您需要了解到：
TRTCCalling 和 TUICallKit 支持相互呼叫，升级前后，请保持 SDKAppID 不变，否则会影响相互通信。
TUICallKit 需要搭配 IM 音视频通话能力套餐，可以单击 IM 控制台，进入对应 SDKAppID 应用的 基本配置 页面，并在页面的右下角找到 开通腾讯实时音视频服务 功能区，单击 免费体验 即可开通 TUICallKit 的 7 天免费试用服务。如果需要正式应用上线，可以单击 前往加购 即可进入购买页面。



升级概览

TUICallKit 在设计之初就兼顾了 TRTCCalling 客户的升级诉求，仅需要简单几步就可以升级完成，预计花费 20 分钟；
您可以选择两种升级方式：
1. 升级到 TUICallKit Vue3 UI 开源组件：只需要编写几行代码就可以为您的 App 添加音视频通话功能，并且支持离线唤起能力。（推荐）
2. 升级到 TUICallEngine SDK：可直接从旧版本 TRTCCalling 迁移而来，UI 层可沿用已开发版本。
接下来将分别介绍两种方式的升级步骤。

TUICallKit Vue3 UI 组件升级步骤

TUICallKit Vue3 UI 提供带 UI 的开源组件，节省 90% 开发时间，快速上线音视频通话应用。
如果您想要体验并调试通话效果，请阅读 Demo 快速跑通。
如果您想把我们的功能直接嵌入到您的项目中，请阅读 快速接入 TUICallKit。
如果您想要修改 UI 界面，请阅读 TUICallKit 界面定制指引。

TUICallEngine SDK 1.x 无 UI 升级步骤

本部分将帮助您从 TRTCCalling 1.x 升级到 TUICallEngine 1.x。

1. 升级 SDK 包依赖

安装 TUICallEngine SDK 包，并将其他依赖更新到最新版本
npm install tuicall-engine-webrtc # 安装新版本 SDK 
npm install tim-js-sdk@latest trtc-js-sdk@latest tsignaling@latest # 更新依赖到最新版本
npm uninstall trtc-calling-js # 移除旧版本 SDK

2. 替换 SDK 引入方式与创建实例方式

在完成上述步骤后，您的工程就无法正常编译了，接下里的步骤将手把手修改其中冲突的几个地方。
1. 首先，替换引入方式。
// 旧版本
import TRTCCalling from 'trtc-calling-js';

// 新版本
import { TUICallEngine } from "tuicall-engine-webrtc";
2. 修改创建实例方式，示例代码如下，若需详细接口请参考 createInstance()。
// 旧版本
new TRTCCalling({ SDKAppID });

// 新版本
TUICallEngine.createInstance({ SDKAppID });
// TUICallEngine.destroyInstance(); // 如需要销毁实例，可调用此接口

3. 替换监听事件常量

监听事件常量地址由TRTCCalling.EVENT变为TUICallEvent，后者可以从包tuicall-engine-webrtc中引入。
此步骤推荐使用编辑器全局搜索一键替换。
// 旧版本
trtcCalling.on(TRTCCalling.EVENT.ERROR, this.handleError);
trtcCalling.on(TRTCCalling.EVENT.INVITED, this.handleNewInvitationReceived);
trtcCalling.on(TRTCCalling.EVENT.USER_ACCEPT, this.handleUserAccept);
...（包含其他监听）

// 新版本
import { TUICallEvent } from "tuicall-engine-webrtc";
tuiCallEngine.on(TUICallEvent.ERROR, this.handleError); // tuiCallEngine 为新实例名称，沿用旧 trtcCalling 无妨
tuiCallEngine.on(TUICallEvent.INVITED, this.handleNewInvitationReceived);
tuiCallEngine.on(TUICallEvent.USER_ACCEPT, this.handleUserAccept);
...（包含其他监听）

4. 替换通话类型常量

若您之前未使用通话类型常量可跳过本步骤。
通话类型常量地址由TRTCCalling.CALL_TYPE变为TUICallType，后者可以从包tuicall-engine-webrtc中引入。
此步骤推荐使用编辑器全局搜索一键替换。
// 旧版本
this.TRTCCalling.CALL_TYPE.AUDIO_CALL // 语音类型
this.TRTCCalling.CALL_TYPE.VIDEO_CALL // 视频类型

// 新版本
import { TUICallType } from "tuicall-engine-webrtc";
TUICallType.AUDIO_CALL // 语音类型
TUICallType.VIDEO_CALL // 视频类型

5. 调整渲染远端视频的时机

在旧版本 TRTCCalling 中，推荐在收到 USER_ENTER 事件回调时，调用 startRemoteView() 渲染远端摄像头。
在新版本 TUICallEngine 中，推荐在收到 USER_VIDEO_AVAILABLE 事件回调时，调用 startRemoteView() 渲染远端摄像头。
// 旧版本
let handleUserEnter = async function(event) {
  await trtcCalling.startRemoteView({userID: 'user1', videoViewDomID: 'video_1'});
};
trtcCalling.on(TRTCCalling.EVENT.USER_ENTER, handleUserEnter);

// 新版本
let handleUserVideoAvailable = async function(event) {
  await tuiCallEngine.startRemoteView({userID: 'user1', videoViewDomID: 'video_1'});
};
tuiCallEngine.on(TUICallEvent.USER_VIDEO_AVAILABLE, handleUserVideoAvailable);

6. 其他关键接口变更

API 含义
旧版本 TRTCCalling SDK
新版本 TUICallEngine SDK
备注
切换通话类型
trtcCalling.switchToAudioCall()
tuiCallEngine.switchCallMediaType()
名称变更，通过参数选择切换类型
获取麦克风设备列表
trtcCalling.getMicrophones()
tuiCallEngine.getDeviceList()
接口合并，通过参数选择设备类型
获取摄像头设备列表
trtcCalling.getCameras()
关闭/打开麦克风
trtcCalling.setMicMute()
tuiCallEngine.closeMicrophone()
接口拆分
tuiCallEngine.openMicrophone()
设置用户昵称和头像
无
tuiCallEngine.setSelfInfo()
设置用户昵称和头像
开启/关闭 AI 降噪
无
tuiCallEngine.enableAIVoice()
4.12.1 版本以后支持，具体使用详情请参阅使用 AI 降噪

7. 补充说明

由于 TUICallKit 需要搭配 IM 音视频通话能力套餐，您还可能遇到"The package you purchased does not support this ability."，可以单击 IM 控制台，进入对应 SDKAppID 应用的 基本配置 页面，并在页面的右下角找到 开通腾讯实时音视频服务 功能区，单击 免费体验 即可开通 TUICallKit 的 7 天免费试用服务。如果需要正式应用上线，可以单击 前往加购 即可进入购买页面。
升级完上述 API 之后，就可以正常使用 TUICallEngine SDK 了，如果遇到其他 API 接口调用问题，可参阅 SDK API 文档。
欢迎加入 QQ 群：646165204，进行技术交流和反馈~
中国站