tencent cloud

All product documents
Tencent Real-Time Communication
DocumentationTencent Real-Time CommunicationVideo Calling (Including UI)Conversational Chat（TUICallKit）Vue
Vue
Download PDF
Last updated: 2025-01-16 15:15:37
Vue
Last updated: 2025-01-16 15:15:37
Download PDF
By integrating Chat and CallKit, you can achieve the following effects. Click Try It Online.


Environment Requirements

TypeScript
Sass (The version of sass-loader should be ≤ 10.1.1)
node（node.js ≥ 16.0.0）
npm (use a version that matches the Node version in use)

Step 1: Integrating Chat

For detailed steps, please refer to: Quick Integration of Chat.

Step 2: Activating the Audio and Video Call Capability

Before using the audio and video services provided by Tencent Cloud, you need to go to the console to activate the service for the application. Refer to the specific steps in Activate the Service.

Step 3: Download the TUICallKit Component

Download the TUICallKit component via npm, version 3.3.6 and above:
npm i @tencentcloud/call-uikit-react

Step 4: Introducing and Invoking the TUICallKit Component

As follows: Import <TUICallKit /> where <TUIKit /> is imported.
<template>
  <div id="app">
    <TUIKit :SDKAppID="YOUR_SDKAPPID" userID="YOUR_USERID" userSig="YOUR_USERSIG" />
    <TUICallKit class="callkit-container" :allowedMinimized="true" :allowedFullScreen="false" />
  </div>
</template>
<script lang="ts" setup>
import { TUIKit } from './TUIKit';
import { TUICallKit } from '@tencentcloud/call-uikit-vue';
</script>
<style lang="scss">
</style>

Step 5: Launching the Project

vite
webpack
npm run dev
npm run serve

Step 6: Sending Your First Message

As shown in the figure, you can send messages to and from your friends.


Step 7. Make your first call

As shown in the figure, click the video/audio Icon in the toolbar to realize the call effect.


FAQs

If you encounter any problems with access and use, please refer to FAQs.
If you have any requirements or feedback, you can contact: info_rtc@tencent.com.
Was this page helpful?
You can also Contact Sales or Submit a Ticket for help.
Yes
No

Feedback

Contact Us

Contact our sales team or business advisors to help your business.

Contact Us
Technical Support

Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

Submit a Ticket
7x24 Phone Support
Hong Kong, China
+852 800 906 020 (Toll Free)
United States
+1 844 606 0804 (Toll Free)
United Kingdom
+44 808 196 4551 (Toll Free)
Canada
+1 888 605 7930 (Toll Free)
Australia
+61 1300 986 386 (Toll Free)
EdgeOne hotline
+852 300 80699
More local hotlines coming soon