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：开通音视频通话能力

1. 登录 即时通信 IM 控制台 ，单击目标应用卡片，进入应用的基础配置页面。2. 在页面的右下角找到开通腾讯实时音视频服务功能区。2.1 若您需要体验音视频通话功能，可单击卡片内的 免费体验 开通 TUICallKit 的 7 天免费试用服务。
2.2 您可参见 音视频通话能力版本说明 确认所需要使用的版本，单击 购买正式版 以购买正式的音视频通话能力。在购买页内的增值服务中勾选“音视频通话能力”，并选择所需版本即可。


步骤2：下载 TUICallKit 组件

通过 npm 方式下载 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 的组件即可使用。TUICallKit 主要组件包括：

：通话 UI 组件主体	：通话 UI 悬浮窗组件，提供最小化功能
	

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

  
    
                
    
              
欢迎使用腾讯云即时通信IM
          
          

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,    };  },});.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;}

步骤5：启动项目

npm run serve

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



常见问题

页面访问协议说明

浏览器厂商出于对用户安全、隐私等问题的考虑，限制网页在 https 协议下才能正常使用 WebRTC。为确保生产环境用户顺畅接入和体验 CallKit 的全部功能，请使用 https 协议访问即时通信 IM 应用页面。本地开发环境请使用 http://localhost生产环境请使用 HTTPS 协议

错误提示“权限获取失败，用户禁止使用设备”？

如遇以上错误提示，可能是由于以下原因导致：您当前应用所在的浏览器或设备没有开通“麦克风”或“摄像头”权限。请先确保页面已被授权使用麦克风或摄像头，参见设备授权说明。您当前应用所使用的“页面访问协议”不符合上文要求。如以上问题都已解决但仍提示该错误，请使用当前浏览器打开 WebRTC 能力测试 测试是否完整的支持 WebRTC 的功能。

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

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

如何购买套餐？

请参考购买链接：音视频通话 SDK 购买指南，如有其他问题，请点击页面右侧，进行售前套餐咨询。

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

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

如何自定义音视频通话相关界面？

请参考文档 TUICallKit 界面定制。

相关文档

TUICallKit API 参考TUICallKit 界面定制

交流与反馈

欢迎 进入 IM 社群 进行咨询和反馈。

对即时通讯IM解决方案有疑惑？想了解解决方案收费？ 联系解决方案专家

腾讯云限时活动1折起，即将结束： 马上收藏

同尘科技为腾讯云授权服务中心，购买腾讯云享受折上折，更有现金返利:同意关联，立享优惠

阿里云解决方案也看看？： 点击对比阿里云的解决方案