Build Video Call Website with Tencent RTC in Minutes Using Vue3

Introduction

Vue is a popular JavaScript front-end framework used for building user interfaces. It has a simple and easy-to-learn syntax, along with a flexible architecture, enabling developers to quickly build highly interactive and efficient web applications. Due to its flexibility and ease of use, Vue has gained widespread adoption and recognition within the front-end development community.

Tencent RTC provides Tencent RTC Call (TUICallKit) , a UI component for audio and video calls in Vue3 version. With just a few lines of code, you can easily add audio and video call features to your Web application.This blog will walk you through the process of setting up 1-to-1 call and group call in your Web project.

Tencent RTC is the Ideal Video Commuincations Solution

After recommending our integration solution for Tencent RTC Call (TUICallKit), I would like to highlight why Tencent RTC is your preferred choice:

1. Feature rich

Tencent RTC provides a rich set of components to help you quickly implement features such as audio chat, conferencing, interactive live streaming, and interactive teaching.

2. Cross-platform global connection

Tencent RTC is a cross-platform solution compatible with more than 5,000 device models. It provides client SDKs and Tencent Cloud APIs for both mobile and desktop platforms including iOS, Android, Windows, macOS, and web.

3. Low latency, low stutter rate, high video/audio quality

Tencent RTC maintains an average end-to-end latency of below 300 ms across different countries and regions and supports 720p and 1080p video and allows video calls even under a packet loss rate of 70%.

You can now enter the official website Tencnet RTC and development documentation. Let's start coding!

Video Tutorial

Step 0: Environment Preparations

1. @vue/cli.
2. @tencentcloud/call-uikit-vue If using source code integration requires：Vue3 + Typescript.

Step 1: Activate the service

You can activate the Call free trial version in the TRTC console, with the specific operation steps as follows:

1. Log into the TRTC console > Call, and create a new application.

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.