无 UI 集成方案

服务端 API

诚邀爱技术、爱分享的你,成为文档内容共建者> HOT

TUIKit 组件从 1.0.12 版本开始支持音视频通话功能,并且实现了 iOS、Android、Web、小程序平台的互通。

说明:

2022年10月以后,TUIKit 组件升级了音视频通话功能,采用了全新的 TUICallKit,新版本音视频通话功能需要加购专属的 IM 音视频通话能力包后解锁,具体购买方法请参见 步骤1:开通音视频服务,如已开通,则可忽略该步骤。

音视频通话界面如下图所示:

视频通话
语音通话

操作步骤

步骤1:开通音视频服务

进入 即时通信 IM 控制台 ,单击目标应用卡片,进入应用的基础配置页面。
在页面的右下角找到开通腾讯实时音视频服务功能区,单击免费体验即可开通 TUICallKit 的 7 天免费试用服务。

警告:

友情提示:单击免费体验以后,部分之前使用过 实时音视频 TRTC 服务的用户会收到[-100013]:TRTC service is suspended. Please check if the package balance is 0 or the Tencent Cloud accountis in arrears

因为新的 IM 音视频通话能力是整合了腾讯云 实时音视频 TRTC即时通信 IM 两个基础的 PaaS 服务,所以当 实时音视频 TRTC 的免费额度(10000分钟)已经过期或者耗尽,就会导致开通此项服务失败,这里您可以点击 TRTC 控制台,找到对应 SDKAppID 的应用管理页,示例如图,开通后付费功能后,再次启用应用即可正常体验音视频通话能力。

步骤2:下载 TUICallKit 组件

通过 npm 方式下载 TUICallKit 组件,为了方便您后续的拓展,建议您将 TUICallKit 组件复制到自己工程的 src/TUIKit/Plugin/TUICallKit 目录下:

# macOS 
npm i @tencentcloud/call-uikit-vue
mkdir -p ./src/TUIKit/TUIPlugin/TUICallKit && cp -r ./node_modules/@tencentcloud/call-uikit-vue/src/ ./src/TUIKit/TUIPlugin/TUICallKit

成功后目录结构如图所示:

步骤3:引入 TUICallKit 组件

在 main.ts 中,仅需添加两行代码,即可体验通话功能。
引入 TUICallKit,并将其挂载到 TUIKit 中。

// import TUICallKit
import { TUICallKit } from './TUIKit/TUIPlugin/TUICallKit';
// TUIKit add TUICallKit
TUIKit.use(TUICallKit);

main.ts文件整体示例代码如下:

import { createApp } from 'vue';
import App from './App.vue';
import { TUIComponents, TUICore, genTestUserSig } from './TUIKit';
import { TUICallKit } from './TUIKit/TUIPlugin/TUICallKit';

const SDKAppID = 0; // Your SDKAppID
const secretKey = ''; //Your secretKey
const userID = ''; // User ID

// init TUIKit
const TUIKit = TUICore.init({
SDKAppID,
});

// TUIKit add TUIComponents
TUIKit.use(TUIComponents);
// TUIKit add TUICallKit
TUIKit.use(TUICallKit);

// login TUIKit
TUIKit.login({
userID: userID,
userSig: genTestUserSig({
SDKAppID,
secretKey,
userID,
}).userSig, // The password with which the user logs in to IM. It is the ciphertext generated by encrypting information such as userID.For the detailed generation method, see Generating UserSig
});

createApp(App).use(TUIKit).mount('#app');

步骤4:调用 TUICallKit 组件

在需要展示的页面,调用 TUICallKit 的组件即可使用。TUICallKit 主要组件包括:

<TUICallKit/> :通话 UI 组件主体
<TUICallKitMini/>:通话 UI 悬浮窗组件,提供最小化功能

例如:在 App.vue 页面中,在上文已搭建的聊天界面基础上,使用 TUICallKit、TUICallKitMini 快速搭建通话界面。

<template>
<div class="home-TUIKit-main">
<div :class="env?.isH5 ? 'conversation-h5' : 'conversation'" v-show="!env?.isH5 || currentModel === 'conversation'">
<TUISearch class="search" />
<TUIConversation @current="handleCurrentConversation" />
</div>
<div class="chat" v-show="!env?.isH5 || currentModel === 'message'">
<TUIChat>
<h1>欢迎使用腾讯云即时通信IM</h1>
</TUIChat>
</div>
<Drag :show="showCall" class="callkit-drag-container" domClassName="callkit-drag-container">
<!-- TUICallKit 组件:通话 UI 组件主体 -->
<TUICallKit
:allowedMinimized="true"
:allowedFullScreen="false"
:beforeCalling="beforeCalling"
:afterCalling="afterCalling"
:onMinimized="onMinimized"
:onMessageSentByMe="onMessageSentByMe"
/>

</Drag>
<Drag :show="showCallMini" class="callkit-drag-container-mini" domClassName="callkit-drag-container-mini">
<!-- TUICallKitMini 组件:通话 UI 悬浮窗组件,提供最小化功能 -->
<TUICallKitMini style="position: static" />
</Drag>
</div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue';
import { TUIEnv } from './TUIKit/TUIPlugin';
import Drag from './TUIKit/TUIComponents/components/drag';
import { handleErrorPrompts } from './TUIKit/TUIComponents/container/utils';

export default defineComponent({
name: 'App',
components: {
Drag,
},
setup() {
const data = reactive({
env: TUIEnv(),
currentModel: 'conversation',
showCall: false,
showCallMini: false,
});
const TUIServer = (window as any)?.TUIKitTUICore?.TUIServer;
const handleCurrentConversation = (value: string) => {
data.currentModel = value ? 'message' : 'conversation';
};
// beforeCalling:在拨打电话前与收到通话邀请前执行
const beforeCalling = (type: string, error: any) => {
if (error) {
handleErrorPrompts(error, type);
return;
}
data.showCall = true;
};
// afterCalling:结束通话后执行
const afterCalling = () => {
data.showCall = false;
data.showCallMini = false;
};
// onMinimized:组件切换最小化状态时执行
const onMinimized = (oldMinimizedStatus: boolean, newMinimizedStatus: boolean) => {
data.showCall = !newMinimizedStatus;
data.showCallMini = newMinimizedStatus;
};
// onMessageSentByMe:在整个通话过程内发送消息时执行
const onMessageSentByMe = async (message: any) => {
TUIServer?.TUIChat?.handleMessageSentByMeToView(message);
return;
};
return {
...toRefs(data),
handleCurrentConversation,
beforeCalling,
afterCalling,
onMinimized,
onMessageSentByMe,
};
},
});
</script>
<style scoped>
.home-TUIKit-main {
display: flex;
height: 100vh;
overflow: hidden;
}
.search {
padding: 12px;
}
.conversation {
min-width: 285px;
flex: 0 0 24%;
border-right: 1px solid #f4f5f9;
}
.conversation-h5 {
flex: 1;
border-right: 1px solid #f4f5f9;
}
.chat {
flex: 1;
height: 100%;
position: relative;
}
.callkit-drag-container {
left: calc(50% - 25rem);
top: calc(50% - 18rem);
width: 50rem;
height: 36rem;
border-radius: 16px;
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.callkit-drag-container-mini {
width: 168px;
height: 56px;
right: 10px;
top: 70px;
}
</style>

步骤5:启动项目

npm run serve

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

make your first call

常见问题

错误提示“The package you purchased does not support this ability”?

如遇以上错误提示,是由于您当前应用的音视频通话能力包过期未开通,请参见 步骤一:开通服务,领取或者开通音视频通话能力,进而继续使用 TUICallKit 组件.

如何购买套餐?

请参考购买链接:音视频通话 SDK 购买指南,如有其他问题,请点击页面右侧,进行售前套餐咨询,或者加入 下方 QQ 群 进行咨询和反馈。

通话邀请的超时时间默认是多久?

通话邀请的默认超时时间是30s。

相关文档

交流与反馈

欢迎加入 QQ 群进行技术交流和反馈问题。

目录