Video Call | Audio Call |
| |
npm i @tencentcloud/call-uikit-vue
// import TUICallKitimport { TUICallKit } from '@tencentcloud/call-uikit-vue';// TUIKit add TUICallKitTUIKit.use(TUICallKit);
<TUICallKit/> : Call UI component body | <TUICallKitMini/> : Call UI floating window component, providing a minimize feature |
| |
<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>Welcome to Tencent Cloud Instant Messaging (IM)</h1></TUIChat></div><!-- TUICallKit Component: Call UI Component Body --><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: Execute before making a call and before receiving a call invitationconst beforeCalling = (type: string, error: any) => {if (error) {handleErrorPrompts(error, type);return;}data.showCall = true;};// afterCalling: Execute after ending the callconst afterCalling = () => {data.showCall = false;data.showCallMini = false;};// onMinimized: Execute when the component switches to minimized stateconst onMinimized = (oldMinimizedStatus: boolean,newMinimizedStatus: boolean) => {data.showCall = !newMinimizedStatus;data.showCallMini = newMinimizedStatus;};// onMessageSentByMe: Execute when sending messages during the entire callconst 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>
npm run serve
Was this page helpful?