Video Live Integration
This document will guide you on how to quickly integrate the desktop TUILiveKit component into your project, thereby providing your application with live streaming capabilities.
Environmental Preparation
Operating System: Windows 10 or 11.
Node.js version ≥ 16.19.1 (Recommended to use the official LTS version, and the npm version should match the node version).
Step 1: Activate the service
Before using the Audio and Video Services provided by Tencent Cloud, you need to go to the Console and activate the service for your application. For detailed steps, refer to Activate the service.
Step 2: Download TUILiveKit source code
git clone https://github.com/Tencent-RTC/ultra-live-electron.git
Step 3: Integrate TUILiveKit
When TUILiveKit runs on the desktop, two Electron browser windows need to be created to accommodate the main page view and settings page view, respectively. We call these two windows the TUILiveKit main window and sub-window, respectively. After integrating TUILiveKit into your existing application, you can send a message to Electron main process, for exapme by cilcking a button, to open TUILiveKit main window. Then you can explore all features of TUILiveKit.
Prerequirement
Your existing code project need to include the following technology support:
Vue3
Webpack
TypeScript
Electron
Note:
If you do not have a project that meets the integration prerequirement, you can refer to the common questionsat the bottom of the document for guidance.
Install dependencies
npm install --save pinianpm install --save trtc-electron-sdk@11.8.603-alpha.1 # Must use this versionnpm install --save @tencentcloud/tuiroom-engine-electron@2.4.0-alpha.3 # TUILiveKit Enginenpm install --save trtc-electron-plugin-xmagic@latest # TUILiveKit beauty pluginnpm install --save-dev native-ext-loader electron-devtools-installer electron-builder
Copy TUILiveKit soure code to your project
1. Copy TUILiveKit components
Copy directory
ultra-live-electron/src/TUILiveKit
into src
directory of your project.2. Copy TUILiveKit windows creation code
Copy
ultra-live-electron/TUILiveKit.main.js
and ultra-live-electron/TUILiveKit.preload.js
files into root directory of your project.3. Copy TUILiveKit main window and sub-window pages and their router configuration
Copy
ultra-live-electron/src/views/TUILiveKitChild.vue
and ultra-live-electron/src/views/TUILiveKitMain.vue
files into src/views
directory of you project。Add the following pages routing configuration in
src/router/index.ts
file of your project:// src/router/index.tsimport { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';import HomeView from '../views/HomeView.vue';const routes: Array<RouteRecordRaw> = [{ // Default page of your application, contains a button to trigger the openning of TUILiveKit main windowpath: '/',name: 'home',component: HomeView},// ********************************** TUILiveKit required code start ********************************** //{ // TUILiveKit main window pagepath: '/tui-live-kit-main',name: 'tui-live-kit-main',component: () => import(/* webpackChunkName: "TUILiveKitMain" */ '../views/TUILiveKitMain.vue')},{ // TUILiveKit sub-window pagepath: '/tui-live-kit-child',name: 'tui-live-kit-child',component: () => import(/* webpackChunkName: "TUILiveKitChild" */ '../views/TUILiveKitChild.vue'),},// ********************************** TUILiveKit required code end ********************************** //];// ********************************** TUILiveKit required code start ********************************** //window.ipcRenderer.on('window-type', (event: any, type: string) => {console.log(`[router] window type:${type}`);console.log(`[router] current href:${window.location.href}`);router.replace({ name: `tui-live-kit-${type}`});});// ********************************** TUILiveKit required code end ********************************** //const router = createRouter({history: createWebHashHistory(),routes});export default router;
4. Copy beauty-related code, resources, and configurations.
Copy
ultra-live-electron/public/assets
directory and ultra-live-electron/public/avatar.png
file into the public
directory of your project.Copy
ultra-live-electron/scripts/prestart.js
file into the scripts
directory of your project, and add the following command in the scripts
section of the package.json
file of your project.{"scripts": {"prestart": "node ./scripts/prestart.js"}}
Here we do not enable the humain beauty function right now. The above configuration, code, and resource copied can ensure the project runs without errors. For how to enable the beauty function, see How to Enable the Beauty Function.
5. Modify vue.config.js
Add the following configuration in the
vue.config.js
file of your project:// vue.config.jsconst { defineConfig } = require('@vue/cli-service')// *********************************** TUILiveKit required code start *********************************** //const os = require("os");const isProduction = process.env.NODE_ENV === "production";const platform = os.platform();// *********************************** TUILiveKit required code end *********************************** //module.exports = defineConfig({transpileDependencies: true,// *********************************** TUILiveKit required code start *********************************** //publicPath: "./",configureWebpack: {devtool: isProduction ? "source-map" : "inline-source-map",target: "electron-renderer",module: {rules: [{test: /\.node$/,loader: "native-ext-loader",options: {rewritePath: isProduction? platform === "win32"? "./resources": "../Resources": "./node_modules/trtc-electron-sdk/build/Release",},},],},}// *********************************** TUILiveKit required code end *********************************** //});
6. Copy
src/debug
directory and configure SDKAppID
and SDKSecretKey
.Copy
ultra-live-electron/src/debug
directory into the src
directory of your project, open the copied file basic-info-config.js
to enter the SDKAppID
and SDKSecretKey
obtained from Step 1: Activate the service .// basic-info-config.js/*** Tencent Cloud SDKAppID, which should be replaced with user's SDKAppID.* Enter Tencent Cloud TRTC [Console] (https://console.cloud.tencent.com/trtc ) to create an application,* and you will see the SDKAppID.* It is a unique identifier used by Tencent Cloud to identify users.*/export const SDKAppID = 0;/*** Encryption key for calculating signature, which can be obtained in the following steps:** Step1. Enter Tencent Cloud TRTC [Console](https://console.cloud.tencent.com/rav ),* and create an application if you don't have one.* Step2. Click your application to find "Quick Start".* Step3. Click "View Secret Key" to see the encryption key for calculating UserSig,* and copy it to the following variable.** Notes: this method is only applicable for debugging Demo. Before official launch,* please migrate the UserSig calculation code and key to your backend server to avoid* unauthorized traffic use caused by the leakage of encryption key.* Document: https://intl.cloud.tencent.com/document/product/647/35166#Server*/export const SDKSecretKey = '';
7. Enable pinia
Open the
src/main.ts
file in your project, add the following configuration to enable pinia:// main.tsimport { createApp } from 'vue';// *********************************** TUILiveKit required code start *********************************** //import { createPinia } from 'pinia';// *********************************** TUILiveKit required code end *********************************** //import App from './App.vue'import router from './router'createApp(App)// *********************************** TUILiveKit required code start *********************************** //.use(createPinia())// *********************************** TUILiveKit required code end *********************************** //.use(router).mount('#app');
8. Modify global.d.ts
Add the following configuration in your project
src/global.d.ts
file. Need to declare several properties on the global Window type:// src/global.d.tsexport {}declare global {interface Window {// *********************************** TUILiveKit required code start *********************************** //ipcRenderer: any;nativeWindowHandle: Uint8Array;mainWindowPort: MessagePort | null;}// *********************************** TUILiveKit required code end *********************************** //}
Add an entry to open the TUILiveKit main window
In a page view of your vue project, add a button. When clicked, it will notify the Electron main process to open the TUILiveKit main window. As shown below, this is our implementation example code.
// HomeView.vue<template><div class="home"><button @click="openTUILiveKit">Open TUILiveKit</button></div></template><script setup lang="ts">import { ref } from 'vue';import type { Ref } from 'vue';import { getBasicInfo } from '../debug/basic-info-config';const isOpen:Ref<boolean> = ref(false);const openTUILiveKit = async () => {if (!isOpen.value) {const currentUserInfo = await getBasicInfo();if (currentUserInfo) {window.ipcRenderer.send('openTUILiveKit', {userInfo: currentUserInfo // Note: User information is required to open TUILiveKit main window});isOpen.value = true;} else {console.error('Error: cannot get current user info');}}};</script>
To facilitate communication with the Electron main process in Vue components and JavaScript/TypeScript scripts, put the ipcRenderer object of Electron onto the global object window in the preload script of your Electron project.
// preload.jsconst { ipcRenderer } = require("electron");// Enable `ipcRenderer` can be used in vue and Javascript modulewindow.ipcRenderer = ipcRenderer;
When received
openTUILiveKit
message from Vue component, the Electron main process will open the TUILiveKit main window.// main.jsconst { app, BrowserWindow, ipcMain } = require('electron');const path = require('path');// *********************************** TUILiveKit required code start *********************************** //const { TUILiveKitMain } = require("./TUILiveKit.main");// *********************************** TUILiveKit required code end *********************************** //let mainWindow = null;const createWindow = () => {mainWindow = new BrowserWindow({width: 800,height: 600,// *********************************** TUILiveKit required code start *********************************** //webPreferences: {preload: path.join(__dirname, 'preload.js'),nodeIntegration: true,contextIsolation: false,}// *********************************** TUILiveKit required code end *********************************** //});// *********************************** TUILiveKit required code start *********************************** //bindIPCMainEvent();// *********************************** TUILiveKit required code end *********************************** //if (app.isPackaged) {mainWindow.loadFile("dist/index.html");} else {mainWindow.loadURL('http://localhost:8080');}}// *********************************** TUILiveKit required code start *********************************** //function bindIPCMainEvent() {ipcMain.on("openTUILiveKit", (event, args) => {console.log(`[main] open live kit`, args);TUILiveKitMain.open(args); // Open TUILiveKit main window});}// *********************************** TUILiveKit required code end *********************************** //app.whenReady().then(() => {createWindow();app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) createWindow()});})app.on('window-all-closed', () => {if (process.platform !== 'darwin') app.quit()});
Add the following command in "scripts" of your project package.json file to enable the starting of Electron applicaiton in development mode.
{"scripts": {"start": "electron ."}}
Step 4: Run in development mode
1. Enter the root diectory of your project with
cmd.exe
and execute the following command to start the vue web project.npm run serve
If you encounter an error Component name "Index" should always be multi-word vue/multi-word-component-names at startup, it indicates that there is a difference in eslint configuration between your project and TUILiveKit. Add the following "vue/multi-word-component-names" validation rule in your project's .eslintrc.js file or eslintConfig section of the package.json file.
// .eslintrc.jsmodule.exports = {root: true,env: {node: true},'extends': ['plugin:vue/vue3-essential','eslint:recommended','@vue/typescript/recommended'],parserOptions: {ecmaVersion: 2020},rules: {'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off','no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',// *********************************** TUILiveKit required code start *********************************** //"vue/multi-word-component-names": process.env.NODE_ENV === 'production' ? 'warn' : 'off',// *********************************** TUILiveKit required code end *********************************** //}}
2. Enter the root directory of your project with another
cmd.exe
and execute the following command to start Electron applicaiton in development mode:npm run start
After successfully started, Click the "Open TUILiveKit" button to open TUILiveKit main window which is showing as below:
Step 5: Start your first live broadcast
1. Add a camera
Firstly, you should add some multimedia source before start live broadcast. Multimedia sources supported include: camera, image, screen and window capture.For example, the image below shows the effect after adding a camera.
2. Add your logo image
If you need to add your own brand logo during a live broadcast, you can add a logo image. As shown in the image below, this is the effect after adding a transparent background logo image. The newly added image will have a yellow border around it, indicating that it is currently selected. A selected multimedia source can be moved and resized with mouse. It can also be rotated and modify its display level by right-click menu.
3. Start a live broadcast
Click Go Live button to start a live broadcast . Once the broadcast starts successfully, the Go Live button will turn into End. Click it to end the live boradcast.
4. View the live broadcast
The desktop version only supports the host starting the broadcast. To watch, you need to use the mobile app. Find the corresponding live room in the live list on the mobile app and enter the live room. For the use of the mobile app, please refer to the documentation foriOSand Android.
Step 6: Build installation package
1. Copy `ultra-live-electron/electron-builder.json5` file into your project's root directory. You can modify the `productName` and `appId` as you like.
2. Add the following command in your project's package.json file to enable buliding installation package.
{"scripts": {"build:win64": "electron-builder --win --x64","pack:win64": "npm run build && npm run build:win64"}}
3. Build installation package
Enter the root path of your project with `cmd.exe` and execute the following command. The created installation package is in
release
directory.npm run pack:win64
4. Install the pacakge and run.
Common questions
Have no project meets the integration requirement, How can I start?
There are several ways to start your TUILiveKit journey:
If you do not have a project, then you can just start with our open source Github . Just clone it and modify the code as you need.
If you already have a project, you can adjust your project as our open source Template project: trtc-electron-template-vue3-webpack to ingerated TUILiveKit.
If you have a JavaScript project withour TypeScript support, you can refer to "How to integrate TUILiveKit in JavaScript project?".
Does TUILiveKit support Vite?
Currently, TUILiveKit does not support running with Vite.
How to integrate TUILiveKit in JavaScript project?
JavaScript project can not integrate TUILiveKit directly. It should be modify to support TypeScript to integrate TUILiveKit.
1. Install dependencies
npm install --save-dev typescript@4.5.5 @typescript-eslint/eslint-plugin@5.4.0 @typescript-eslint/parser@5.4.0 @vue/cli-plugin-typescript@5.0.0 @vue/eslint-config-typescript@9.1.0
2. Copy
ultra-live-electron/tsconfig.json
file into your project root diectory.3. Copy
ultra-live-electron/src/global.d.ts
file into your project root diectory.How to Enable the Beauty Function?
The humain beauty capability in TUILiveKit is base on Tencent Effect SDK, which you have to buy and activate to abtain the
licenseURL
and licenseKey
to use. Enter thelicenseURL
and licenseKey
into src/TUILiveKit/utils/beauty.ts
file to quick start.Note:
For production projects, it is necessary to obtain the
licenseURL
and licenseKey
by calling the backend service. Writing them into a JavaScript file can enable quick startting, but there is a very high risk of leakage for both licenseURL
and licenseKey
. This method is only suitable for quick integration and testing purposes.// beauty.tsexport const XmagicLicense = {licenseURL: "",licenseKey: "",};
Suggestions and Feedback
If you have any suggestions or feedback, please contact info_rtc@tencent.com.