Menu

Web

Last updated: 2023-09-21 15:37:01Download PDF
This document describes how to quickly integrate the TUICallKit component. Performing the following key steps generally takes about an hour, after which you can implement the video call feature with complete UIs.
Video Call
Audio Call







Environment Preparations

1. @vue/cli。
2. @tencentcloud/call-uikit-vue2 If using source code integration requires:Vue2.7 + Typescript;If using the npm package integration, all Vue2 versions are available。
3. @tencentcloud/call-uikit-vue If using source code integration requires:Vue3 + Typescript。

Step 1. Activate the service

TUICallKit is an audio & video communication component built upon Tencent Cloud's paid PaaS services, Chat and Real-time Communication (TRTC) . In order for you to better experience the Call feature, we offer a 7-day free trial version for each SDKAppID (Note: no additional call duration is provided with the free trial version), You can activate the Call free trial version in the (Real-time Communication)TRTC console, with the specific operation steps as follows:

1. Log into the TRTC console > Call, and create a new application.

2. In the create pop-up window, select Call as the product and enter the application name. You can also choose to associate with an existing application to open Call for an existing TRTC application. After making the selection, click on Create application.

3. After completing the application creation, you will be directed to the application details page by default. In the pop-up window, select the "Trial Free" version and click on "Claim now".

4. After confirming the pop-up content, click on "Free Trail" to successfully open the trial version of audio and video calling.



5. After opening, you can view the version information on the current page and refer to the integration guide for integration.


Step 2. Basic sample code

1. create project.
Vue3 + Typescript
Create a project using the @vue/cli method
npm install -g @vue/cli
Create the project via @vue/cli and select the configuration item selected in the figure below.
vue create call-demo



After the project is created, switch to the project directory.
cd call-demo

2. Install Components.
Vue3
≥Vue2.7
npm install @tencentcloud/call-uikit-vue
npm install @tencentcloud/call-uikit-vue2
3. Please modify the necessary information in the sample code below to ensure proper operation.
SDKAppID:Obtained in the last step in step 1 and not detailed here。
userID:The ID of the current user, which is a string that can contain only letters (a–z and A–Z), digits (0–9), hyphens (-), or underscores (_).
userSig:The authentication credential used by Tencent Cloud to verify whether the current user is allowed to use the TRTC service. You can get it by using the SecretKey obtained in the third step in step 1 to encrypt the information such as SDKAppID and UserID. You can generate a temporary UserSig by using the UserSig generation in the console.
4. Refer to the following sample code.
Vue3 + TypeScript
Vue2 + JavaScript + Options API
<template>
<div>
<button @click="init()"> init </button>
<button @click="call()"> start video call </button>
<details>
<summary>auto accept feature</summary>
<button @click="accept()"> accept </button>
<button @click="reject()"> reject </button>
<button @click="hangup()"> hangup </button>
</details>
<div style="width: 50rem; height: 35rem; border: 1px solid salmon;">
<TUICallKit
:beforeCalling="beforeCalling"
:afterCalling="afterCalling"
:onMinimized="onMinimized"
:allowedMinimized="true"
:allowedFullScreen="true"
:videoDisplayMode="VideoDisplayMode.CONTAIN"
:videoResolution="VideoResolution.RESOLUTION_1080P" />
</div>
</div>
</template>

<script lang="ts" setup>
import { TUICallKit, TUICallKitServer, TUICallType, VideoDisplayMode, VideoResolution } from "@tencentcloud/call-uikit-vue";
import TIM from "@tencentcloud/chat"

// The following 5 variables need to be modified before running
const SDKAppID = 0;
const userID = "";
const userSig = "";
const callUserID = ""; // callUserID of the called party in the one-to-one call

// If you do not want to experience group calls, you do not need to set this parameter
let userIDList = ["xxx", "xxx"]; // UserID of a group call member

async function init() {
try {
await TUICallKitServer.init({ SDKAppID, userID, userSig });
// await TUICallKitServer.init({ tim, SDKAppID, userID, userSig});
alert("init finished");
} catch (error: any) {
alert(`init failed, reason:${error}`);
}
}

async function call() {
try {
await TUICallKitServer.call({ userID: callUserID, type: TUICallType.VIDEO_CALL }); // one-to-one call
// If you want to experience a group call, comment the call, and then uncomment the following two pieces of code.
// const groupID = await createGroupID();
// TUICallKitServer.groupCall({ userIDList, groupID, type: 2 }); // group call
} catch (error: any) {
alert(`call failed, reason:${error}`);
}
}

async function createGroupID() {
let tim = TIM.create({ SDKAppID });
let memberList: any[] = [];
userIDList.forEach((user: string) => {
memberList.push({ userID: user });
});
let res = await tim.createGroup({
type: TIM.TYPES.GRP_PUBLIC,
name: 'WebSDK',
memberList
});
return res.data.group.groupID;
}

function beforeCalling(type: string, error: any) {
console.log("[Callkit Demo] beforeCalling:", type, error);
}

function afterCalling() {
console.log("[Callkit Demo] afterCalling");
}

function onMinimized(oldStatus: string, newStatus: string) {
console.log("[Callkit Demo] onMinimized: " + oldStatus + " -> " + newStatus);
}

async function accept() {
try {
await TUICallKitServer.accept();
alert("auto-accept");
} catch (error) {
alert(`auto-accept failed, reason:${error}`);
}
}

async function reject() {
try {
await TUICallKitServer.reject();
alert("auto-reject");
} catch (error) {
alert(`auto-reject failed, reason:${error}`);
}
}

async function hangup() {
try {
await TUICallKitServer.hangup();
alert("auto-hangup");
} catch (error) {
alert(`auto-hangup failed, reason:${error}`);
}
}
</script>
<template>
<div>
<button @click="init()"> Step 1: init </button>
<button @click="call()"> Step 2: start video call </button>
<div style="width: 50rem; height: 35rem; border: 1px solid salmon;">
<TUICallKit />
</div>
</div>
</template>

<script>
import { TUICallKit, TUICallKitServer, TUICallType } from "@tencentcloud/call-uikit-vue2";

export default {
name: 'App',
data() {
return {
SDKAppID: 0,
userID: '',
userSig: '',
callUserID: '',
};
},
components: {
TUICallKit
},
methods: {
async init() {
try {
await TUICallKitServer.init({
SDKAppID: this.SDKAppID,
userID: this.userID,
userSig: this.userSig
// tim: this.tim
});
alert("init finished");
} catch (error) {
alert(`init failed, reason:${error}`);
}
},
async call() {
try {
// one-to-one call
await TUICallKitServer.call({
userID: this.callUserID,
type: TUICallType.VIDEO_CALL
});
// group call
// TUICallKitServer.groupCall({ userIDList: ["xxx"], groupID: "xxx", type: TUICallType.VIDEO_CALL });
} catch (error) {
alert(`call failed, reason:${error}`);
}
}
},
}
</script>
Please refer to the TUICallKit interface documentation for detailed interface usage.

Step3. Make a call

One-to-one video call

You can call the call function of TUICallKit and specify the call type and the callee's userID to make an audio/video call.
import { TUICallKitServer, TUICallType } from "@tencentcloud/call-uikit-vue";
await TUICallServer.call({
userID: 'mike',
type: TUICallType.VIDEO_CALL
});
Parameter
Type
Description
userID
String
The ID of the target user, such as "mike".
type
Number
The call media type, such as audio call(type = 1)、video call(type = 2)

Group video call

You can call the groupCall function of TUICallKit and specify the call type and the list of callee's UserID values to make a group audio/video call.
import { TUICallKitServer, TUICallType } from "@tencentcloud/call-uikit-vue";
await TUICallServer.groupCall({
groupID: "xxx",
userIDList: ['jack', 'tom'],
type: TUICallType.VIDEO_CALL
});
Parameter
Type
Description
groupID
String
The group ID, such as "12345678".
userIDList
Array<string>
The list of UserID values of the target users, such as["jane", "mike", "tommy"]
type
Number
The call media type, such as audio call(type = 1)、video call(type = 2)

Step 4. Implement more features

1. Floating window

The allowedMinimized property can be used to control the enabling of the floating window (minimization).
The allowedFullScreen property can be used to control the enabling of full-screen mode for the call window.
<TUICallKit
:allowedMinimized="true"
:allowedFullScreen="true"
/>

2. Custom ringtone

You can use the following API to customize the ringtone:
Note:
≥v3.0.0 Support
Only local file addresses are allowed here, and make sure the file directory is accessible by the application.
The ringtone file passed in must be in MP3 format.
To restore the default ringtone, pass an empty value for the filePath parameter.
The ringtone media file must be placed in the public directory for the passed-in creation.
try {
await TUICallKitServer.setCallingBell(filePath?: string)
} catch (error: any) {
alert(`Failed to modify the ringtone :${error}`);
}

3. Nickname and profile photo settings

To customize the nickname or profile photo, use the following API for update:
try {
await TUICallKitServer.setSelfInfo({ nickName: "xxx", avatar: "http://xxx" });
} catch (error: any) {
alert(`Failed to setSelfInfo :${error}`);
}

4. Call state callback and UI settings

This component provides call state callbacks that can be used by the business side to implement additional interaction logic.
beforeCalling: Executed before the call starts.
afterCalling: Executed after the call ends.
onMinimized: Executed when the component is minimized.
kickedOut: The user is kicked out (e.g., due to duplicate login), and the call automatically ends. (Supported from version ≥v2.3.2)
statusChanged: The call status has changed. Refer to the example code below for usage, and refer to the API documentation for the available status types. (Supported from version ≥v2.3.2)
This component provides several feature toggles that can be enabled or disabled as needed:
allowedMinimized: Whether to allow minimizing the component.
allowedFullScreen: Whether to allow full-screen mode.
videoDisplayMode: Display mode for the video.
videoResolution: Call resolution.
This component also provides several events that will be triggered and notified to the business side within the component.
Note:
Features supported in versions below v2.3.2.
From version ≥v2.3.2, events are no longer supported and are replaced with callbacks.
kicked-out: The user is kicked out (e.g., due to duplicate login), and the call automatically ends.
status-changed: The call status has changed. Refer to the example code below for usage, and refer to the API documentation for the available status types.
<script lang="ts" setup>
import { TUICallKit, TUICallKitServer, TUICallType, VideoDisplayMode, VideoResolution } from "@tencentcloud/call-uikit-vue";

// The following 4 variables need to be modified before running.
const SDKAppID = 0;
const userID = "";
const userSig = "";
const callUserID = "";

async function init() {
try {
await TUICallKitServer.init({ SDKAppID, userID, userSig });
// await TUICallKitServer.init({ tim, SDKAppID, userID, userSig}); // If there is already a TIM instance in the project, it needs to be passed here.
alert("Initialization completed.");
} catch (error: any) {
alert(`Initialization failed. Reason: ${error}`);
}
}
async function call() {
try {
await TUICallKitServer.call({ userID: callUserID, type: TUICallType.VIDEO_CALL }); // 1v1 call
// TUICallKitServer.groupCall({ userIDList: ["xxx"], groupID: "xxx", type: 2 }); // Group call
} catch (error: any) {
alert(Call failed. Reason: ${error});
}
}
function beforeCalling(type: string, error: any) {
console.log("[Callkit Demo] beforeCalling:", type, error);
}
function afterCalling() {
console.log("[Callkit Demo] afterCalling");
}
function onMinimized(oldStatus: string, newStatus: string) {
console.log("[Callkit Demo] onMinimized: " + oldStatus + " -> " + newStatus);
}
function handleKickedOut() {
console.log("[Callkit Demo] handleKickedOut");
}
function handleStatusChanged(args: { oldStatus: string; newStatus: string; }) {
const { oldStatus, newStatus } = args;
if (newStatus === STATUS.CALLING_C2C_VIDEO) {
console.log(`[Callkit Demo] handleStatusChanged: ${oldStatus} -> ${newStatus}`);
}
}
</script>
<template>
<div>
<button @click="init()"> init </button>
<button @click="call()"> video call </button>
<div style="width: 50rem; height: 35rem; border: 1px solid salmon;">
<TUICallKit
:beforeCalling="beforeCalling"
:afterCalling="afterCalling"
:onMinimized="onMinimized"
:allowedMinimized="true"
:allowedFullScreen="true"
:videoDisplayMode="VideoDisplayMode.CONTAIN"
:videoResolution="VideoResolution.RESOLUTION_1080P"
:kickedOut="handleKickedOut"
:statusChanged="handleStatusChanged"
/>
</div>
</div>
</template>

5. Set up auto-answer via the interface

Through the interface of TUICallKitServer component, you can flexibly control the state of <TUICallKit/> component to achieve more requirements on the business side.
Note: When calling the "Answer/Reject/Hang Up" interface, it is recommended to remind the user that the call has been handled automatically at UI level in order to maintain a good user experience.
accept() : Answer incoming calls
reject() : Rejected calls
hangup() : Hang up the connected call
// This interface needs to ensure that it is called after an incoming call invitation is received (status === STATUS.BE_INVITED),
// the call status can be referred to the throw of `@status-changed`.
try {
await TUICallKitServer.accept();
alert(`auto-accept`);
} catch (error: any) {
alert(`auto-accept failed, reason:${error}`);
}
// Same as accept(), with the same call timing restrictions.
try {
await TUICallKitServer.reject();
alert(`auto-reject`);
} catch (error: any) {
alert(`auto-reject failed, reason:${error}`);
}
try {
await TUICallKitServer.hangup();
alert(`auto-hangup`);
} catch (error: any) {
alert(`auto-hangup failed, reason:${error}`);
}



FAQs

1. error message: "The package you purchased does not support this ability"?

If you encounter the above error, it is because the audio/video calling capability package of your current application has expired or not yet opened, please refer to Step 1: Open Service to receive or open the audio/video calling capability, and then continue to use TUICallKit components.

2、How to purchase official version?

please refer to Purchase Official Version.

3. Experience Demo

Before accessing, you can visit the online Demo one-to-one audio/video call experience to experience the call.
If you want to run through a new project, you can also read Vue3 Quick Demo or Vue2 Quick Demo directly.

Suggestions and Feedback

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