chat-uikit-vue 组件从 v1.0.12 版本开始支持音视频通话功能，并且实现了 iOS、Android、Web、小程序平台的互通。
chat-uikit-vue 组件从 v1.4.0 版本开始自动集成音视频通话功能，无需进行以下手动集成音视频通话操作，开通即可使用，具体购买方法请参见 步骤1：开通音视频服务。
说明
2022年10月以后，TUIKit 组件升级了音视频通话功能，采用了全新的 TUICallKit，新版本音视频通话功能需要加购专属的 IM 音视频通话能力包后解锁，具体购买方法请参见 步骤1：开通音视频服务，如已开通，则可忽略该步骤。
音视频通话界面如下图所示：
视频通话 | 语音通话 |
 |  |
步骤1：开通音视频通话能力
步骤2：下载 TUICallKit 组件
npm i @tencentcloud/call-uikit-vue
步骤3：引入 TUICallKit 组件
在 main.ts 中，仅需添加两行代码，即可体验通话功能。
引入 TUICallKit，并将其挂载到 TUIKit 中。
// import TUICallKitimport { TUICallKit } from '@tencentcloud/call-uikit-vue';// TUIKit add TUICallKitTUIKit.use(TUICallKit);
步骤4：调用 TUICallKit 组件
注意：
TUICallKit 组件需要放到一个 dom 节点里，用于显示并控制 TUICallKit 的位置、宽高等样式。
在需要展示的页面，调用 TUICallKit 的组件即可使用。TUICallKit 主要组件包括：
<TUICallKit/> ：通话 UI 组件主体 | <TUICallKitMini/> ：通话 UI 悬浮窗组件，提供最小化功能 |
|  |
例如：在 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：进行您的第一次通话
