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 (official LTS version is recommend, and the npm version should match the node version).
Step 1: Activate the service
Before using 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 the TUILiveKit source code
Get the source code from Github, or you can clone the code with the following git command: git clone https://github.com/Tencent-RTC/ultra-live-electron.git
Step 3: Integrate TUILiveKit
When TUILiveKit runs on the desktop, it requires the creation of two Electron windows, which are used to host the main interface and the settings interface of TUILiveKit. We call these two windows the TUILiveKit main window and sub-window, respectively. After integrating TUILiveKit into your existing application, you can create and open the TUILiveKit main window by clicking a button, allowing you to start using all the features of TUILiveKit.
Prerequisite dependencies
The following must be supported in your existing code:
Vue3
Webpack
TypeScript
Electron
Note:
If you do not have a project that meets the integration requirements, refer to the FAQ in this document. Copy TUILiveKit soure code to your project
1. Copy TUILiveKit components
Copy the ultra-live-electron/src/TUILiveKit
directory into the src
directory of your project.
2. Copy TUILiveKit window creation code
Copy the ultra-live-electron/TUILiveKit.main.js
and ultra-live-electron/TUILiveKit.preload.js
files into the 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 routing configurations of the following pages to the 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 the ultra-live-electron/public/assets
directory and ultra-live-electron/public/avatar.png
file into the public
directory of your project.
Copy the 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"
}
}
The above configurations, code, and resources enable your project to run correctly without errors, but they do not enable beauty features. To enable them, see How do I enable beauty features. 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 the src/debug
directory and configure SDKAppID
and SDKSecretKey
.
Copy the ultra-live-electron/src/debug
directory into the src
directory of your project. Open the copied file basic-info-config.js
, and add the SDKAppID
and SDKSecretKey
obtained from Step 1: Activate the service .
export const SDKAppID = 0;
export const SDKSecretKey = '';
7. Enable pinia and import theme CSS file
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 "./TUILiveKit/assets/theme.css";
import App from './App.vue'
import router from './router'
createApp(App)
.use(createPinia())
.use(router)
.mount('#app');
8. Modify global.d.ts
In the src/global.d.ts
file of your project, add the following declarations for the 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 configuration in your project package.json file to enable the starting of Electron application in development mode.
{
"main": "main.js",
"scripts": {
"start": "electron ."
},
"overrides": {
"@tencentcloud/tuiroom-engine-electron": {
"trtc-electron-sdk": "^12.2.701"
}
}
}
Install dependencies
npm install --save pinia
npm install --save trtc-electron-sdk movable-resizable-js
npm install --save @tencentcloud/tuiroom-engine-electron
npm install --save trtc-electron-plugin-xmagic
npm install --save-dev native-ext-loader electron-devtools-installer electron-builder
Step 4: Run in development mode
1. Enter the root directory 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. Then try to run "npm run serve" command again.
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 an Electron application in development mode:
After successfully starting, click the "Open TUILiveKit" button to open TUILiveKit main window shown below:
Step 5: Start your first live stream
1. Add a camera
Before you can begin streaming, you need to add a video source. Supported video sources include: camera, screen sharing, window sharing, and images. The image below shows the window after adding a camera.
2. Add your logo image
You can use a custom logo image to display during live streaming. The image below shows the preview after adding a logo with a transparent background. When you click the logo, a yellow border will appear, indicating that it is currently selected. You can then move and resize using the mouse, or you can rotate and adjust the layer order using the right-click menu.
3. Start the live stream
Click the Go Live button to start live streaming. Once the stream starts, the End button will appear, which you can click to end the live stream.
4. View the live stream
In the desktop version, the host can start a live stream but can't view it. To view the stream, you need to use the mobile app. In the app, find the corresponding live room and enter it to see the host's video stream. For more information on using the mobile app, refer to the documentation for iOSand Android. Step 6: Build the installation package
1. Copy the 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 building the installation package.
{
"scripts": {
"build:win64": "electron-builder --win --x64",
"pack:win64": "npm run build && npm run build:win64"
}
}
3. Build the 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.
FAQs
I want to use TUILiveKit, but I don't have a project that meets the integration requirements. How can I start?
There are several ways to get started with TUILiveKit:
If you do not have a project, you can start with our open source project code on Github. Just clone it and modify the code as needed. Does TUILiveKit support Vite?
Currently, TUILiveKit does not support running with Vite.
How do i integrate TUILiveKit in a JavaScript project?
JavaScript projects cannot be integrated with TUILiveKit directly. You need to modify the project to support TypeScript in order 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 the ultra-live-electron/tsconfig.json
file into your project root directory.
3. Copy the ultra-live-electron/src/global.d.ts
file into your project root directory.
How do I enable beauty features?
The beauty features used in TUILiveKit are based on Tencent Effect SDK. which you need to purchase and activate in order to obtain the licenseURL
and licenseKey
. You can then add them to the src/TUILiveKit/utils/beauty.ts
file to quickly enable beauty features for testing. Note:
The above method is only suitable for quick integration and testing purposes. Adding your licenseURL
and licenseKey
to a JavaScript file is quick and simple, but there is a very high risk of exposing both your licenseURL
and licenseKey
. For commercial projects, you should obtain the licenseURL and licenseKey by calling a backend service.
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?