please select
Starter Deal! First 3 month from only $9.9 /month!
Starter Deal! First 3 month from only $9.9 /month!
Grab It Now 
Call
  • Overview
  • Web
    • Run Sample Code
    • Integration
      • Web&H5 (React)
      • Web&H5 (Vue3)
    • AI Noise Suppression
    • Virtual Background
    • UI Customization
    • On-Cloud Recording
    • More Features
      • Configuring Nicknames and Avatars
      • Configure Resolution and Fill Mode
      • Group Call
      • Floating Window
      • Custom Ringtone
      • Monitoring Call Status
    • API Documentation
      • API Overview
      • TUICallKit
      • TUICallEngine
      • TUICallEvent
    • Server APIs
      • Call Status Callback
        • Call Status Callback
        • Call Event Callback
        • Callback Configuration
          • API List for Callback Configuration
          • Establishing Callback Configuration
          • Retrieving Callback Configuration
          • Update Callback Configuration
          • Remove Callback Configuration
      • REST API
        • Introduction to REST API
        • Retrieve records via callId
        • Retrieve Records Based on Conditions
    • Release Notes
  • Android
    • Run Sample Code
    • Integration
    • AI Noise Suppression
    • Virtual Background
    • UI Customization
    • Offline Call Push
    • On-Cloud Recording
    • More Features
      • Configuring Nicknames and Avatars
      • Group Call
      • Floating Window
      • Custom Ringtone
      • Monitoring Call Status
    • API Documentation
      • API Overview
      • TUICallKit
      • TUICallEngine
      • TUICallObserver
      • Type Definition
    • Server APIs
      • Call Status Callback
        • Call Status Callback
        • Call Event Callback
        • Callback Configuration
          • API List for Callback Configuration
          • Establishing Callback Configuration
          • Retrieving Callback Configuration
          • Update Callback Configuration
          • Remove Callback Configuration
      • REST API
        • Introduction to REST API
        • Retrieve records via callId
        • Retrieve Records Based on Conditions
    • Release Notes
  • iOS
    • Run Sample Code
    • Integration
    • AI Noise Suppression
    • Virtual Background
    • UI Customization
    • Offline Call Push
      • VoIP
      • APNs
    • On-Cloud Recording
    • More Features
      • Configuring Nicknames and Avatars
      • Group Call
      • Floating Window
      • Custom Ringtone
      • Monitoring Call Status
    • API Documentation
      • API Overview
      • TUICallKit
      • TUICallEngine
      • TUICallObserver
      • Type Definition
    • Server APIs
      • Call Status Callback
        • Call Status Callback
        • Call Event Callback
        • Callback Configuration
          • API List for Callback Configuration
          • Establishing Callback Configuration
          • Retrieving Callback Configuration
          • Update Callback Configuration
          • Remove Callback Configuration
      • REST API
        • Introduction to REST API
        • Retrieve records via callId
        • Retrieve Records Based on Conditions
    • Release Notes
  • Flutter
    • Run Sample Code
    • Integration
    • AI Noise Suppression
    • Virtual Background
    • UI Customization
    • offline Call Push
      • Notification
      • VoIP (Optional)
    • On-Cloud Recording
    • More Features
      • Configuring Nicknames and Avatars
      • Group Call
      • Floating Window
      • Beauty Effects
      • Custom Ringtone
      • Monitoring Call Status
    • API Documentation
      • API Overview
      • TUICallKit
      • TUICallEngine
      • TUICallObserver
      • Type Definition
    • Server APIs
      • Call Status Callback
        • Call Status Callback
        • Call Event Callback
        • Callback Configuration
          • API List for Callback Configuration
          • Establishing Callback Configuration
          • Retrieving Callback Configuration
          • Update Callback Configuration
          • Remove Callback Configuration
      • REST API
        • Introduction to REST API
        • Retrieve records via callId
        • Retrieve Records Based on Conditions
    • Upgrading
    • Release Notes
  • Overview
    • Overview
  • Activate the Service
  • Pricing
    • Call Monthly Packages
    • Pay-As-You-Go
    • Free Minutes
  • ErrorCode
  • FAQs
    • All Platform
      • FAQs
      • UserSig
    • Web
    • Flutter
    • iOS
    • Android
Call

Web&H5 (Vue3)

This article will guide you through the quick integration of the TUICallKit component. You will complete several key steps within 10 minutes, ultimately obtaining a video call feature with a complete UI interface.




TUICallKit Demo Experience

If you want to experience audio and video calls, click to experience the Tencent RTC Demo.
If you want to run a new project, please read Run Sample Demo.

Environment preparations

Node.js version 18+ or 20+.
Modern browser, supporting WebRTC APIs.

Step 1. Activate the service

Refer to Activate the Service to obtain SDKAppID, SDKSecretKey, which will be used as Mandatory Parameters in Step 4: Initialize the TUICallKit Component.

Step 2. Create a Vue3 Project

1. Create the callkit-demo project. You can choose whether to use the typescript template. If you encounter any installation issues, see FAQs.
npm create vite@latest callkit-demo --template vue-ts
2. After completing the project creation, switch to the project directory.
cd callkit-demo

Step 3. Download the TUICallKit

1. Download the @tencentcloud/call-uikit-vue component.
npm install @tencentcloud/call-uikit-vue
2. Copy the debug directory to your project directory callkit-demo/src, it is necessary when generating userSig locally.
MacOS
Windows
cp -r node_modules/@tencentcloud/call-uikit-vue/debug ./src
xcopy node_modules\@tencentcloud\call-uikit-vue\debug .\src\debug /i /e

Step 4. Initialize the TUICallKit

You can choose to import the sample code in the callkit-demo/src/App.vue file.The example code uses the Composition API approach.
1. Introducethe TUICallKit component, which contains the complete UI interaction during a call.
<template>
<span> caller's ID: </span>
<input type="text" v-model="callerUserID">
<button @click="init"> step1. init </button> <br>
<span> callee's ID: </span>
<input type="text" v-model="calleeUserID">
<button @click="call"> step2. call </button>
<!--【1】Import the TUICallKit component: Call interface UI -->
<TUICallKit style="width: 650px; height: 500px " />
</template>
2. Call the TUICallKitServer.init API to log in to the component, you need to fill in SDKAppID, SDKSecretKey as two parameters in the code.
<script setup>
import { ref } from 'vue';
import { TUICallKit, TUICallKitServer, TUICallType } from "@tencentcloud/call-uikit-vue";
import * as GenerateTestUserSig from "./debug/GenerateTestUserSig-es"; // Refer to Step 3

const SDKAppID = 0; // TODO: Replace with your SDKAppID (Notice: SDKAppID is of type number)
const SDKSecretKey = ''; // TODO: Replace with your SDKSecretKey

const callerUserID = ref('');
const calleeUserID = ref('');

//【2】Initialize the TUICallKit component
const init = async () => {
const { userSig } = GenerateTestUserSig.genTestUserSig({
userID: callerUserID.value,
SDKAppID,
SecretKey: SDKSecretKey
});
await TUICallKitServer.init({
userID: callerUserID.value,
userSig,
SDKAppID,
});
alert('TUICallKit init succeed');
}

//【3】Make a 1v1 video call
const call = async () => {
await TUICallKitServer.call({
userID: calleeUserID.value,
type: TUICallType.VIDEO_CALL,
});
};
</script>
Parameter
Type
Note
userID
String
a custom of UserID, it is allowed to contain only upper and lower case letters (a-z, A-Z), numbers (0-9), underscores, and hyphens.
SDKAppID
Number
The unique identifier for the audio and video application created in the Tencent RTC Console.
SDKSecretKey
String
The SDKSecretKey of the audio and video application created in the Tencent RTC Console.
userSig
String
A security protection signature used for user log in authentication to confirm the user's identity and prevent malicious attackers from stealing your cloud service usage rights.
Explanation of userSig:
Development environment: If you are running a demo locally and developing debugging, you can use the GenerateTestUserSig.genTestUserSig function in the debug file to generate a `userSig`. In this method, SDKSecretKey is vulnerable to decompilation and reverse engineering. Once your key is leaked, attackers can steal your Tencent Cloud traffic.
Production environment: If your project is going live, please use the Server-side Generation of UserSig method.

Step 5. Make your first call

1. using the TUICallKitServer.call API to make a call.
//【3】Make a 1v1 video call
const call = async () => {
await TUICallKitServer.call({
userID: calleeUserID.value,
type: TUICallType.VIDEO_CALL,
});
};
2. Enter npm run dev to run the project.
Warning:
For local environment, please access under localhost protocol. For public network experience, please access under HTTPS protocol. For details, see Description of Network Access Protocol.
3. Open two browser pages, enter different custom userID click step1. init to login (caller and callee).



4. After both userID init to successfully, click on step2. callto make a call. If you have a call problem, refer to FAQs.




Additional Features

FAQs

If you encounter any problems with access and use, please refer to FAQs.

Technical Consultation

If you have any requirements or feedback, you can contact: info_rtc@tencent.com.