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
Get open source code from Github, or you can clone the code with the git command as below: 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 pinia
npm install --save trtc-electron-sdk@11.8.603-alpha.0
npm install --save @tencentcloud/tuiroom-engine-electron@2.4.0-alpha.2
npm install --save trtc-electron-plugin-xmagic@latest
npm 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:
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
import HomeView from '../views/HomeView.vue';
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/tui-live-kit-main',
name: 'tui-live-kit-main',
component: () => import( '../views/TUILiveKitMain.vue')
},
{
path: '/tui-live-kit-child',
name: 'tui-live-kit-child',
component: () => import( '../views/TUILiveKitChild.vue'),
},
];
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}`});
});
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:
const { defineConfig } = require('@vue/cli-service')
const os = require("os");
const isProduction = process.env.NODE_ENV === "production";
const platform = os.platform();
module.exports = defineConfig({
transpileDependencies: true,
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",
},
},
],
},
}
});
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 .
export const SDKAppID = 0;
export const SDKSecretKey = '';
7. Enable pinia
Open the src/main.ts
file in your project, add the following configuration to enable pinia:
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue'
import router from './router'
createApp(App)
.use(createPinia())
.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:
export {}
declare global {
interface Window {
ipcRenderer: any;
nativeWindowHandle: Uint8Array;
mainWindowPort: MessagePort | null;
}
}
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.
<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
});
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.
const { ipcRenderer } = require("electron");
window.ipcRenderer = ipcRenderer;
When received openTUILiveKit
message from Vue component, the Electron main process will open the TUILiveKit main window.
const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');
const { TUILiveKitMain } = require("./TUILiveKit.main");
let mainWindow = null;
const createWindow = () => {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
nodeIntegration: true,
contextIsolation: false,
}
});
bindIPCMainEvent();
if (app.isPackaged) {
mainWindow.loadFile("dist/index.html");
} else {
mainWindow.loadURL('http://localhost:8080');
}
}
function bindIPCMainEvent() {
ipcMain.on("openTUILiveKit", (event, args) => {
console.log(`[main] open live kit`, args);
TUILiveKitMain.open(args);
});
}
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.
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.
module.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',
"vue/multi-word-component-names": process.env.NODE_ENV === 'production' ? 'warn' : 'off',
}
}
2. Enter the root directory of your project with another cmd.exe
and execute the following command to start Electron applicaiton in development mode:
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.
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. 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 thelicenseURL
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.
export const XmagicLicense = {
licenseURL: "",
licenseKey: "",
};
Suggestions and Feedback
If you have any suggestions or feedback, please contact info_rtc@tencent.com.
Was this page helpful?