qer-vue2-js-kit v5.0.1

TUICallKit basic demo

English | 简体中文

Overview

This the basic demo shows how to integrate TUICallKit voice/video calling component in your project.

• Environment: Vue2.js + Vite + TypeScript
• With debug panel to quickly experience calling
• Live Demo

Getting Started

Installation

1. clone the repository

git clone https://github.com/tencentyun/TUICallKit.git

2. enter the demo directory and install dependencies

cd ./TUICallKit/Web/demos/basic-vue2
npm run install:demo

3. run the serve

npm run dev

How to use

1. Open the running page, fill in the parameters in the bottom debug panel (if not currently available, read the hint first).

   • SDKAPPID
   • SECRETKEY
   • UserID: such as user_A

   Click the login button, while the panel is hidden, the login is successful

2. Click Login other UserID, You can login to other users in a new tab.

   Fill in a different userID at the bottom, such as user_B, Click the login button, while the panel is hidden, the login is successful

3. Calling

• Enter user_B into user_A's calling list, click to call
• user_B will be invited, click accept to start the call

How to build

1. Copy Web/src to Web/demos/basic-vue2/src/components/;

2. Enter Web/demos/basic-vue2 and install dependencies

   npm install trtc-js-sdk tsignaling tuicall-engine-webrtc
   npm install

3. Modify the package path: In src/App.vue, change import { TUICallKit, TUICallKitServer, TUICallKitMini } from "../../.."; to import { TUICallKit, TUICallKitServer, TUICallKitMini } from "./components/src";

4. build

   npm run build

   In the production mode, your website should under https protocol.

Read more

• TUICallKit Getting Started
• TUICallKit API
• TUICallKit UI Customization
• TUICallKit (Web) FAQs

How to get SDKAppID and SecretKey？

Activate the service

TUICallKit is an audio/video call component developed based on two paid PaaS services: IM and TRTC. You can activate the services and enjoy a 60-day free trial as follows: 1. Log in to the IM console and click Create Application. In the pop-up window, enter your application name and click OK.

2. Click the application you just created to enter the Basic Configuration page. In the Tencent Real-Time Communication area at the bottom right of the page, click Try now. In the pop-up window, click Activate now to activate a 60-day free trial of TUICallKit.

3. On the same page, find and record the SDKAppID and Key(also called SecretKey), which will be used in subsequent steps.

• SDKAppID: The IM application ID, which is used for business isolation; that is, calls with different SDKAppID values cannot be interconnected.
• SecretKey: The IM application key, which needs to be used together with SDKAppID to generate the authentication credential UserSig for authorized use of IM. It will be used in step 5.