Quick Run of TUIRoom Web Demo

English | 简体中文

This document describes how to quickly run the TUIRoom demo project to try out group audio/video interaction.

Directory structure

.
├── README.md
├── auto-imports.d.ts
├── components.d.ts
├── index.html
├─ src
│ ├─ App.vue // main page of the sample project
│ ├── TUIRoom // TUIRoom UI component source files
│ ├── assets // public resources
│ ├── config // TUIRoom configuration file
│ ├── env.d.ts
│ ├── main.ts // Example project entry file
│ ├── router // Example project routing configuration
│ └── views // Example project routing page
└── vite.config.ts

Step 1. Create a TRTC application

1. Enter the Application Management interface of the Tencent Cloud Live Audio/Video Console, select Create Application, enter the application name,click Create Application.

2. Find your application in the application list and Click Application Info.

3. Follow the steps below to get the application’s SDKAppID and key.

! This component uses two basic PaaS services of Tencent Cloud: TRTC and IM. When you activate TRTC, IM will be activated automatically. For information about the billing of IM, see Pricing.

Step 2: Download the source code and configure the project

1. Clone or download the source code in our repository (You can start the repository to save it).

2. Find and open Web/vue3/src/config/basic-info-config.js.

3. Configure parameters in basic-info-config.js:

   - SDKAPPID: 0 by default. Set it to the `SDKAppID` obtained in step 1. - SECRETKEY: '' by default. Set it to the key obtained in step 1.

Step 3: Run the example

1. install dependencies

   1cd TUIRoomKit/Web/vue3
   2
   3npm install

2. Run the sample project in the development environment

   1npm run dev

3. Generate a DIST file

   1npm run build

Step 4. Try out the demo

Open http://localhost:3000/#/home in a browser to try out TUIRoom.

Because Element Plus components are imported manually, it may take a relatively long time for the page to load in the development environment for the first time. This will not be an issue after building.

Anchor (userId: anchor)

• 1. On the home page, click New Room.
• 2. Enter a room.

1	2

Participant (userId: audience)

• 1. On the home page, enter the ID of the room created by the anchor and click Join Room.
• 2. Enter the room.

1	2

Step 5: Production Environment Deployment

• 1. Generate a DIST file

  1npm run build

• 2. Deploy the dist file to the server

! Production environments require the use of https domains

FAQs

I deployed the demo project in the testing/development environment. The mic and camera did not work. What should I do?

Make sure you used an HTTPS URL. For the sake of data security and privacy protection, your browser may restrict HTTP URLs. To access all features of the TRTC web SDK (WebRTC), please use an HTTPS URL.

Other

• Welcome to join our Telegram Group to communicate with our professional engineers! We are more than happy to hear from you~ Click to join: https://t.me/+EPk6TMZEZMM5OGY1
  Or scan the QR code