Menu

Web&H5 (Vue3)

This article will guide you on how to quickly integrate the TUICallKit component. You will complete the following key steps within 10 minutes and ultimately obtain a video calling feature with a complete UI interface.
Desktop
Mobile
Video call
Voice call







1-on-1 call
Group call








TUICallKit Demo Experience

If you would like to experience audio and video calls directly, please visit the Demo Experience page.
If you would like to quickly set up a new project, please refer to the Quick Start for Web Demo.

Environment Preparation

TUICallKit component link: @tencentcloud/call-uikit-vue.
Node version: node.js ≥ 16.0.0 (npm version should match the node version).

Step 1: Activate TRTC Service

TUICallKit is a video calling component built on top of Tencent Cloud's Instant Messaging (IM) and Real-Time Communication (TRTC) paid PaaS services. You can follow the steps below to activate the relevant services and experience a 7-day free trial.
1. Log in to the TRTC Console and click on "Create application". Enter your application name in the dialog box and click "Create".



2. When creating the application, select "Free Trial" to experience the calling feature of TUICallKit for free.



3. After completing the application creation, you will be redirected to the application details page. The SDKAppID and SDKSecretKey obtained here will be used for initializing the TUICallKit component.




Step 2: Create a Vue3 Project

1. If you haven't installed vue-cli yet, you can install it by running the following command in the terminal or cmd:
npm install -g @vue/cli
2. Create a project using vue-cli and select the configuration options as shown in the screenshot below.
vue create tuicallkit-demo



3. Once the project is created, navigate to the directory where the project is located.
cd tuicallkit-demo

Step 3: Download the TUICallKit Component

1. Download the @tencentcloud/call-uikit-vue component using npm and use it in your project.
npm install @tencentcloud/call-uikit-vue
2. Copy the debug directory to your project.
MacOS
Windows
cp -r node_modules/@tencentcloud/call-uikit-vue/debug ./src
xcopy node_modules\@tencentcloud\call-uikit-vue\debug .\src /i /e

Step 4: Integrate the TUICallKit Component

1. In the code example below, there are four parameters: SDKAppID, SDKSecretKey, userID, and callUserID.
SDKAppID: The SDKAppID of the audio/video application created in Tencent Cloud. Refer to the "Activate TRTC Service" step.
SDKSecretKey: User signature. Refer to the "Activate TRTC Service" step.
userID: The caller's userID, a string that can only contain alphanumeric characters (a-z and A-Z), numbers (0-9), hyphens (-), and underscores (_).
callUserID: The callee's userID, which should already be initialized. (In the demo, enter the callUserID if there is a callee; if not, you can leave it blank.)
2. Import the following code in tuicallkit-demo/App.vue.
<template>
<div style="padding: 20px 0 0 20px">
<div><span>userID:</span><input type="text" v-model="userID" /></div>
<div style="margin-top: 6px;"><span>callUserID:</span><input type="text" v-model="callUserID" /></div>
<button @click="init()" style="margin: 10px 10px 10px 0; height: 28px;"> Step 1: Initialization </button>
<button @click="call()" style="margin: 10px 10px 10px 0; height: 28px;"> Step 2: Start 1v1 video call </button>
<div style="width: 50rem; height: 35rem; border: 1px solid salmon;">
<TUICallKit />
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { TUICallKit, TUICallKitServer, TUICallType } from "@tencentcloud/call-uikit-vue";
import * as GenerateTestUserSig from "./debug/GenerateTestUserSig-es";

const userID = ref('');
const callUserID = ref('');
const SDKAppID = 0; // Replace with your SDKAppID
const SDKSecretKey = ''; // Replace with your SDKSecretKey

async function init() {
try {
const { userSig } = GenerateTestUserSig.genTestUserSig({
userID: userID.value,
SDKAppID: SDKAppID,
SecretKey: SDKSecretKey,
});
await TUICallKitServer.init({ //【1】Initialize the TUICallKit component
SDKAppID,
userID: userID.value,
userSig,
});
alert("[TUICallKit] Initialization success.");
} catch (error: any) {
alert(`[TUICallKit] Initialization failed. Reason: ${error}`);
}
}
async function call() { //【2】Make a 1v1 video call
try {
await TUICallKitServer.call({ userID: callUserID.value, type: TUICallType.VIDEO_CALL });
} catch (error: any) {
alert(`[TUICallKit] Call failed. Reason: ${error}`);
}
}
</script>

Step 5: Make Your First Call

Run npm run serve in the terminal to start the tuicallkit-demo.
Note:For local environments, please access it using the localhost protocol. Refer to the Network Access Protocol Instructions for more details.
Click on the Step 1: Initialization Button. If a message saying "Initialization success" pops up, it means the initialization was successful.



Click on Step 2: Start 1v1 video call to initiate a 1v1 video call, the actual effect is demonstrated in the following image.




More features of TUICallKit

1. Setting User Avatar and Nickname

If you need to set the nickname or avatar for the current user, you can use the following interface to update them.
try {
await TUICallKitServer.setSelfInfo({ nickName: "jack", avatar: "http://xxx" });
} catch (error: any) {
alert(`[TUICallKit] setSelfInfo failed. Reason: ${error}`);
}

2. Customizing Incoming Call Ringtone

Customize the incoming ringtone for the user.
Only local MP3 files are supported, and you need to ensure that the file directory is accessible to the application.
The ringtone media file must be placed in the "public" directory.
try {
await TUICallKitServer.setCallingBell(filePath?: string)
} catch (error: any) {
alert(`[TUICallKit] setCallingBell failed. Reason: ${error}`);
}

3. Group Call

To initiate a group call, you need to pass the groupID as a parameter. The groupID can be generated using the group interface of @tencentcloud/chat. Suggestion: Initiate a group call in the group of IM TUIKit.
For generating the groupID, please refer to the documentation on How to generate a groupID in a group call.
import TIM from "@tencentcloud/chat"; // npm i @tencentcloud/chat
import { TUICallKitServer, TUICallType } from "@tencentcloud/call-uikit-vue";

const userIDList: string[] = ['user1', 'user2'];
async function groupCall() {
const groupID: string = await createGroupID();
try {
await TUICallKitServer.groupCall({
userIDList,
groupID,
type: TUICallType.VIDEO_CALL,
});
} catch (error: any) {
alert(`[TUICallKit] groupCall failed. Reason:${error}`);
}
}

async function createGroupID() {
const tim = TIM.create({ SDKAppID });
const memberList: any[] = userIDList.map(userId => ({ userID: userId }));
const res = await tim.createGroup({
type: TIM.TYPES.GRP_PUBLIC, // Must be a public group
name: 'WebSDK',
memberList
});
return res.data.group.groupID;
}

4. Callback Events for Call Status

If your business requires listening to the status of a call, such as when a call starts, ends, or events that occur during the call (detailed in TUICallEvent), details are as follows:
import { TUICallEvent } from 'tuicall-engine-webrtc';

let handleOnCallBegin = function(event) {
console.log(event);
};
tuiCallEngine.on(TUICallEvent.ON_CALL_BEGIN, handleOnCallBegin);
tuiCallEngine.off(TUICallEvent.ON_CALL_BEGIN, handleOnCallBegin);

5. Floating Window & Full Screen

The allowedMinimized attribute can control the activation of the minimized floating window.
The allowedFullScreen attribute can regulate the activation of the full-screen call window.
<TUICallKit
:allowedMinimized="true"
:allowedFullScreen="true"
/>

6. Resolution and Fill Mode

The TUICallKit component provides call status callbacks that can be used by the business side to implement additional interaction logic. For more details, please refer to the TUICallKit property introduction.
VideoDisplayMode: Display mode of the frame.
VideoResolution: Call resolution.
import { VideoDisplayMode, VideoResolution } from "@tencentcloud/call-uikit-vue";
<TUICallKit
:videoDisplayMode="VideoDisplayMode.CONTAIN"
:videoResolution="VideoResolution.RESOLUTION_1080P"
/>

7. Component Callback Events

The TUICallKit component provides call status callbacks that can be used by the business side to implement additional interaction logic. For more details, please refer to the TUICallKit property introduction.
beforeCalling: Executed prior to the commencement of the call.
afterCalling: Executed upon the completion of the call.
onMinimized: It gets executed when the component switches to a minimized state.
kickedOut: Undertaken when a user gets evicted (such as logging in from multiple endpoints).
statusChanged: Carried out when there is a variation in the call status, status types refer to TUICallKit Status.
<template>
<script>
<TUICallKit
:beforeCalling="beforeCalling"
:afterCalling="afterCalling"
:onMinimized="onMinimized"
:kickedOut="kickedOut"
:statusChanged="statusChanged"
/>
function beforeCalling() {
console.log("[TUICallKit Demo] beforeCalling");
}
function afterCalling() {
console.log("[TUICallKit Demo] afterCalling");
}
function onMinimized(oldStatus: string, newStatus: string) {
console.log("[TUICallKit Demo] onMinimized: " + oldStatus + " -> " + newStatus);
}
function kickedOut() {
console.log("[TUICallKit Demo] kickedOut");
}
function statusChanged(args: { oldStatus: string; newStatus: string; }) {
const { oldStatus, newStatus } = args;
if (newStatus === STATUS.CALLING_C2C_VIDEO) {
console.log(`[TUICallKit Demo] statusChanged: ${oldStatus} -> ${newStatus}`);
}
}

FAQs

1. What should I do if I receive the error message "The package you purchased does not support this ability"?

If you encounter the aforementioned error message, it may be due to the expiration or non-activation of the audio and video call package for your current application. Please refer to Activating the TRTC Service, claim or activate the audio and video calling capability to continue using the TUICallKit.

2. How do I procure a package?

Please follow the link Purchase Official Version.

3. How can I generate UserSig?

UserSig is a type of security signature designed by Tencent Cloud for its cloud services. It serves as a login credential, derived from the encrypted combination of information such as SDKAppID and SecretKey.
Method 1: Accessing from the control panel, refer to How to Obtain a Temporary UserSig.
Method 2: Deploying a temporary generation script.
Warning:
This approach involves configuring the SecretKey within the front-end code. Regrettably, in this method, the SecretKey can be easily decrypted through reverse engineering. In the event of your key being exposed, attackers can usurp your Tencent Cloud traffic. Therefore, this method is only suitable for local functional debugging. For a production environment, please refer to Method 3.
For easier initial debugging, GenerateTestUserSig-es.js in the genTestUserSig(params) function can be used temporarily to calculate userSig, for instance:
import { genTestUserSig } from "@tencentcloud/call-uikit-vue/debug/GenerateTestUserSig-es.js";
const { userSig } = genTestUserSig({ userID: "Alice", SDKAppID: 0, SecretKey: "YOUT_SECRETKEY" });
Method Three:Use in official environment.
The correct method of issuing UserSig is to integrate the calculation code of UserSig into your server-side, providing project-specific interfaces. When UserSig is needed, your project can launch requests to the business server to obtain dynamic UserSig. For detailed information, please see Generating UserSig on Server-side.

4. How is the groupID generated in group calls?

The generation of groupID requires integrating the @tencentcloud/chat npm package. Please refer to the createGroup API for details. The following is an example code for generating groupID.
Note:
Please find the details on group creation in IM Group Management, or you can directly use IM TUIKit, a one-stop integration for chat, call, etc.
TUICallKit currently does not support initiating multi-person video calls that are not part of a group.
import TIM from "@tencentcloud/chat"; // npm i @tencentcloud/chat

const userIDList: string[] = ['user1', 'user2', 'xxx']; // group member
async function createGroupID() {
const tim = TIM.create({ SDKAppID });
const memberList: any[] = userIDList.map(userId => ({ userID: userId }));
const res = await tim.createGroup({
type: TIM.TYPES.GRP_PUBLIC, // must be a public group
name: 'WebSDK',
memberList
});
return res.data.group.groupID;
}

5. How can I create a userID?

Signing in once with userID and userSig will automatically create the user.
Create and get through the Instant Messaging Console.




Exchange and Feedback

If you have any requirements or feedback, contact colleenyu@tencent.com.