有奖:语音产品征文挑战赛火热进行中> HOT
chat-uikit-vue 组件从 v1.0.12 版本开始支持音视频通话功能,并且实现了 iOS、Android、Web、小程序平台的互通。 chat-uikit-vue 组件从 v1.4.0 版本开始自动集成音视频通话功能,无需进行以下手动集成音视频通话操作,开通即可使用,具体购买方法请参见 步骤1:开通音视频服务
说明:
2022年10月以后,TUIKit 组件升级了音视频通话功能,采用了全新的 TUICallKit,新版本音视频通话功能需要加购专属的 IM 音视频通话能力包后解锁,具体购买方法请参见 步骤1:开通音视频服务,如已开通,则可忽略该步骤。
chat-uikit-vue 组件从 v1.4.0 版本开始自动集成音视频通话功能,无需进行以下手动集成音视频通话操作,开通即可使用,具体购买方法请参见 步骤1:开通音视频服务
音视频通话界面如下图所示:
桌面端
移动端
视频通话
语音通话






单人通话
群组通话







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

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

步骤2:下载 TUICallKit 组件

通过 npm 方式下载 TUICallKit 组件:
npm i @tencentcloud/call-uikit-vue

步骤3:引入 TUICallKit 组件

在 main.ts 中,仅需添加两行代码,即可体验通话功能。 引入 TUICallKit,并将其挂载到 TUIKit 中。
注意:
如果使用源码集成,需要 Typescript。推荐通过 npm 包集成,这样 JavaScript 也可以使用。
// import TUICallKit
import { TUICallKit } from '@tencentcloud/call-uikit-vue';
// TUIKit add TUICallKit
TUIKit.use(TUICallKit);

步骤4:调用 TUICallKit 组件

注意:
TUICallKit 组件需要放到一个 dom 节点里,用于显示并控制 TUICallKit 的位置、宽高等样式。
在需要展示的页面,调用 TUICallKit 的组件即可使用。例如:在 App.vue 页面中,在上文已搭建的聊天界面基础上,使用 TUICallKit 快速搭建通话界面。
<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>
<!-- TUICallKit 组件:通话 UI 组件主体 -->
<TUICallKit
:class="!showCallMini ? 'callkit-drag-container' : 'callkit-drag-container-mini'"
:allowedMinimized="true"
:allowedFullScreen="false"
:beforeCalling="beforeCalling"
:afterCalling="afterCalling"
:onMinimized="onMinimized"
:onMessageSentByMe="onMessageSentByMe"
/>
</div>
</template>

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

export default defineComponent({
name: "App",
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 {
position: fixed;
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 {
position: fixed;
width: 168px;
height: 56px;
right: 10px;
top: 70px;
}
</style>

步骤5:启动项目

npm run serve

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





更多特性

悬浮窗

常见问题

如果您的接入和使用中遇到问题,请参见 常见问题

技术咨询

了解更多详情您可 腾讯云通信官方社群 进行咨询和反馈。