Starter Deal! First 3 month from only  $9.9 /month!
Starter Deal! First 3 month from only  $9.9 /month!
Grab It Now 
Tencent RTC Blog
Tencent RTC Blog
Tutorial

Build Video Call Website with Tencent RTC in Minutes Using Vue3

Tencent RTC - Dev Team

Build Video Call Website with Tencent RTC in Minutes Using Vue3.png

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.

creating the call app in the TRTC console.png

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

configure the basic information about your app.png

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

pick the "free trail" edition.png

4. After confirming the pop-up content, click on "Free Trail" to successfully open the trial version of audio and video calling.

confirm the free edition.png

5. After opening, you can view the version information on the current page and refer to the integration guide for integration.

the basic information of your call app.png

Step 2: Create a Vue3 project.

Create a project using the "@vue/cli" method

	npm install -g @vue/cli

Create the project via "@vue/cli" and select the configuration item selected in the figure below.

	vue create call-demo

the vue configuration information.png

To test if the project has been created successfully, switch to 'call-demo' and run 'npm run serve'. When the 'Local' address: "http: // localhost:8080/" opens successfully and the page appears as shown, the creation is successful.

	cd call-demo

local address of your calling website.png

the initial page.png

Step 3: Install TUICallKit Components.

copy the "npm install @tencentcloud/call-uikit-vue" command, run it in the "~/call-demo" directory to install the Tencent RTC Call (TUICallKit) component.

	npm install @tencentcloud/call-uikit-vue

Please modify the necessary information in the sample code below to ensure proper operation.

  • SDKAppID:Obtained in the duration of creating the call application.
  • userID:The ID of the current user, which is a string that can contain only letters (a–z and A–Z), digits (0–9), hyphens (-), or underscores (_).
  • userSig:The authentication credential used by Tencent Cloud to verify whether the current user is allowed to use the TRTC service. You can generate a temporary UserSig by using the UserSig generation in the console.

the important variables you need: SDKAppID, userID,userSig and callUserID.png

Step 4: Generate the user signature.

Copy this code to the "App.vue" page of the sample project.

<template>
  <div>
    <button @click="init()"> init </button>
    <button @click="call()"> start video call </button>
    <details>
      <summary>auto accept feature</summary>
      <button @click="accept()"> accept </button>
      <button @click="reject()"> reject </button>
      <button @click="hangup()"> hangup </button>
    </details>
    <div style="width: 50rem; height: 35rem; border: 1px solid salmon;">
      <TUICallKit 
        :beforeCalling="beforeCalling" 
        :afterCalling="afterCalling" 
        :onMinimized="onMinimized"
        :allowedMinimized="true" 
        :allowedFullScreen="true" 
        :videoDisplayMode="VideoDisplayMode.CONTAIN"
        :videoResolution="VideoResolution.RESOLUTION_1080P" 
        @kicked-out="handleKickedOut"
        @status-changed="handleStatusChanged" />
    </div>
  </div>
</template>


<script lang="ts" setup>
import { TUICallKit, TUICallKitServer, TUICallType, VideoDisplayMode, VideoResolution } from "@tencentcloud/call-uikit-vue";
import TIM from "@tencentcloud/chat"


// The following 5 variables need to be modified before running
const SDKAppID = 0; 
const userID = "";
const userSig = "";
const callUserID = ""; // callUserID of the called party in the one-to-one call


// If you do not want to experience group calls, you do not need to set this parameter
let userIDList = ["xxx", "xxx"]; // UserID of a group call member


async function init() {
  try {
    await TUICallKitServer.init({ SDKAppID, userID, userSig });
    // await TUICallKitServer.init({ tim, SDKAppID, userID, userSig}); 
    alert("init finished");
  } catch (error: any) {
    alert(`init failed, reason:${error}`);
  }
}


async function call() {
  try {
    await TUICallKitServer.call({ userID: callUserID, type: TUICallType.VIDEO_CALL }); // one-to-one call
    
    // If you want to experience a group call, comment the call, and then uncomment the following two pieces of code.
    // const groupID = await createGroupID();
    // TUICallKitServer.groupCall({ userIDList, groupID, type: 2 }); // group call
  } catch (error: any) {
    alert(`call failed, reason:${error}`);
  }
}


// chat SDK document: https://web.sdk.qcloud.com/im/doc/en/SDK.html#createGroup
async function createGroupID() {
  let tim = TIM.create({ SDKAppID });
  let memberList: any[] = [];
  userIDList.forEach((user: string) => {
    memberList.push({ userID: user });
  });
  let res = await tim.createGroup({
    type: TIM.TYPES.GRP_PUBLIC,
    name: 'WebSDK',
    memberList
  });
  return res.data.group.groupID;
}


function beforeCalling(type: string, error: any) {
  console.log("call begin", type, error);
}


function afterCalling() {
  console.log("call end");
}


function onMinimized(oldStatus: string, newStatus: string) {
  console.log("Minimize status changes: " + oldStatus + " -> " + newStatus);
}


function handleKickedOut() {
  console.error("The user has been kicked out");
}


function handleStatusChanged(args: { oldStatus: string; newStatus: string; }) {
  const { oldStatus, newStatus } = args;
  console.log("call status change: " + oldStatus + " -> " + newStatus);
}


async function accept() {
  try {
    await TUICallKitServer.accept();
    alert("auto-accept");
  } catch (error) {
    alert(`auto-accept failed, reason:${error}`);
  }
}


async function reject() {
  try {
    await TUICallKitServer.reject();
    alert("auto-reject");
  } catch (error) {
    alert(`auto-reject failed, reason:${error}`);
  }
}


async function hangup() {
  try {
    await TUICallKitServer.hangup();
    alert("auto-hangup");
  } catch (error) {
    alert(`auto-hangup failed, reason:${error}`);
  }
}
</script>

Please return to the console and copy the "SDKAppID" and "SDKSecretKey" in the basic information of the App here and paste them into your Web project:

the basic information of your calling website in TRTC console.png

After clicking on the "call" option in the left sidebar, click on <UserSig generation>, select the "SDKAppID" for which you want to generate "userSig", enter the userID you filled in the code earlier, and click <Generate>. You will see that the "userSig" is generated successfully.

click the <UserSig generation> button.png

generate the user signature.png

Then, you can simply copy the "UserSig" to the project file.

Step 5: Make a call to test

One-to-one video call

You can find a partner to run the same code, ensuring that you both have the same "SDKAppID".

In the terminal, enter "npm run serve" to start the project. Open "http://localhost:8080/" in your browser to see the successful display of the page. You will then be able to successfully see the webpage as shown below:

init the login and start a video & audio call.png

First, click on the <init> button in the top left corner to initialize the login. Then, click on <start video call> to make a call to your friend.

the screenshot of the calling process.png

Group video call

First, we need to import the package:

	import TIM from "@tencentcloud/chat";

Comment out the 1v1 call and open the groupCall section. Then fill in the userIDs for the group call in the "userIDList":

fill the user list of your calling group.png

Replace the "createGroupID()" code in Step 2 with the following code and copy it into your project file:

write the createGroupId function coding.png

Then, call the function "createGroupID()" within the "call()" function:

call the function "createGroupID" within the "call" function.png

The remaining steps are the same as the One-to-one video call. Execute the command "npm run serve" in the terminal, and then open the local address in your browser. Remember to click on <init> to initialize the login first, and then click on <start video call> to initiate a group call.

the screenshot of your calling website by group calling.png

Conclusion

It's not difficult, right? You have successfully integrated Tencent RTC Call (TUICallKit) into your Web project. Tencent RTC Call (TUICallKit) saves you a lot of development time and effort for implementing audio and video calling applications.

Additionally, Tencent RTC Call (TUICallKit) provide custom UI components for your convenience. If you want to learn more information, please visit our official website: Tencent RTC and explore freely.

If you have any questions or need assistance, our support team is always ready to help. Please feel free to contact us, or join us in Discord.

Set Up
Call
Build App
Web