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.