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.
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>
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.