Build a Video Call App in 10 minutes with UIKit using Vue3

Whether it’s for connecting remote teams, facilitating online classes, or enhancing customer support, video calling is an essential tool. However, developing a video call application from scratch can be time-consuming and complex. What if you could build a scalable and feature-rich video call application on the web in just 10 minutes? Using Vue 3, known for its efficiency and ease of use, this tutorial will guide you through creating a complete video call app in just 10 minutes!

Prerequisites

• Node.js version 16+.
• Modern browser, supporting WebRTC APIs.

Step 1. Activate the service

Refer to Activate the Service to obtain SDKAppID, SDKSecretKey, which will be used as Mandatory Parameters in Initialize the TUICallKit.

Step 2. Download TUICallKit

1. Download the @tencentcloud/call-uikit-vue component.

npm install @tencentcloud/call-uikit-vue

2. Copy the debug directory to your project directory src/debug, it is necessary when generating userSig locally.

MacOS

cp -r node_modules/@tencentcloud/call-uikit-vue/debug ./src

Windows

xcopy node_modules\@tencentcloud\call-uikit-vue\debug .\src\debug /i /e

Step 3. Initialize TUICallKit

You can choose to import the sample code in the src/App.vue file.The example code uses the Composition API approach.

1. using <TUICallKit />, which contains the complete UI interaction during a call.