uniapp(Android&iOS)

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

TUICallKit Plugin Address: TUICallKit Plugin Link .
If you want to quickly run a new project, please read uni-app Demo Quick Start directly.

Environment Requirements

HbuilderX version requirement: HbuilderX version ≥ 3.94.
Plugin Debugging Notes: Native plugins do not currently support simulator debugging.
iOS Device Requirements: iOS system ≥ 9.0, supports audio and video calls on actual devices.
Android Device Requirements: Android system ≥ 5.0 (SDK API Level 21), supports audio and video calls on actual devices, Allow USB Debugging.

Step 1. Activate the service

Before using the Audio and Video Services provided by Tencent Cloud, you need to go to the Console and activate the service for your application. For detailed steps, refer to Activate Service.

Step 2: Create a uni-app Project

Open HBuilderX development tool, click to create a new uni-app project: Project Name (TUICallKit-Demo).




Step 3: Download and import the TUICallKit Plugin

1. Create project, generate uin-app Application ID (AppID)
Open HbuilderX, click the bottom left corner to login to your uni-app account (if you don't have an account, please register first). After logging in, click manifest.json file of the project to generate the uni-app AppID.



2. Visit TencentCloud-TUICallKit Plugin, purchase the plugin on the plugin detail page, and select the corresponding AppID, ensuring the package name is correct.



3. Import the plugin in the TUICallKit-Demo project.




Step 4: Use the TUICallKit Plugin

1. Import the following code in TUICallKit-Demo/pages/index/index.vue .
<template>
<view class="container">
<input type="text" v-model="inputID" :placeholder=" isLogin ? 'please enter a caller userID' : 'please enter your login userID' " />
<text v-show="isLogin"> your userID: {{ userID }} </text>
<button v-show="!isLogin" @click="handleLogin"> Login </button>
<button v-show="isLogin" @click="handleCall"> start call </button>
</view>
</template>
<script>
const TUICallKit = uni.requireNativePlugin('TencentCloud-TUICallKit'); //[1]import TUICallKit plugin
uni.$TUICallKit = TUICallKit;
import { genTestUserSig } from '../../debug/GenerateTestUserSig.js'
export default {
data() {
return {
inputID: '',
isLogin: false,
userID: '',
}
},
methods: {
handleLogin() {
this.userID = this.inputID;
const { userSig, sdkAppID: SDKAppID } = genTestUserSig(this.userID);
const loginParams = { SDKAppID, userID: this.userID, userSig }; // apply SDKAppID,userSig
//[2]Login
uni.$TUICallKit.login( loginParams, res => {
if (res.code === 0) {
this.isLogin = true;
this.inputID = '';
console.log('[TUICallKit] login success.');
} else {
console.error('[TUICallKit] login failed, failed message = ', res.msg, params);
}
}
);
},
handleCall() {
try {
const callParams = {
userID: this.inputID,
callMediaType: 2, // 1 -- audio call,2 -- video call
callParams: { roomID: 234, strRoomID: '2323423', timeout:30 },
};
//[3]start 1v1 video call
uni.$TUICallKit.call( callParams, res => {
console.log('[TUICallKit] call params: ', JSON.stringify(res));
}
);
this.inputID = '';
} catch (error) {
console.log('[TUICallKit] call error: ', error);
}
}
}
}
</script>
<style>
.container {
margin: 30px;
}
.container input {
height: 50px;
border: 1px solid;
}
.container button {
margin-top: 30px;
}
</style>
2. Enter the SDKAppID, SDKSecretKey, and userSig parameters.
Client-side userSig generation
Console-generated userSig
Due to the time sensitivity of UserSig, in a testing environment, it is recommended to use this method.
1. Click to download the debug folder, and copy the debug directory to your project, as shown below:



2. Fill in the TUICallKit-Demo/debug/GenerateTestUserSig.js file with SDKAppID and SDKSecretKey (refer to Activate Service)



If you want to quickly experience TUICallKit, you can generate a temporary UserSig available through the Auxiliary Tools in the console.

If you are using Console Generation, you will need to assign the SDKAppID, userSig values in the TUICallKit-Demo/pages/index/index.vue file.




Step Five: Make your first phone call

1. To create a custom debugging base, please use the Traditional Packaging method.



2. After successfully creating the custom debugging base, run the project Using Custom Base.



3. The specific effect of making a 1v1 video call is shown in the figure.




Additional Features

FAQs

If you encounter any issues during integration and use, please refer to Frequently Asked Questions.

Related Case - Online Customer Service Scenario

We provide the source code related to the Online Customer Service Scenario. We recommend you download the Online Customer Service Scenario and integrate it for the experience. This scenario provides a basic template with sample customer groups + sample friends, featuring:
Support for sending text messages, image messages, Voice Message Service, and video messages.
Supports two-person voice and video call features.
Supports creating group chat sessions, group member management, etc.




Technical Consultation

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