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 中。
注意:
1. 如果您还没有集成 TUIKit,请按照 集成 TUIKit 文档先集成 TUIKit。
2. 如果使用源码集成,需要 Typescript。推荐通过 npm 包集成,这样 JavaScript 也可以使用。
// import TUICallKitimport { TUICallKit } from '@tencentcloud/call-uikit-vue';// TUIKit add TUICallKitTUIKit.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:进行您的第一次通话
更多特性
中途加入
悬浮窗