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。
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:
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
npminstall -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
npminstall @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>
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.
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.