Video Live Integration
본 문서는 데스크탑 TUILiveKit 컴포넌트를 프로젝트에 빠르게 통합하여 애플리케이션에 라이브 스트리밍 푸시 기능을 제공하는 방법을 안내합니다.
환경 준비
Windows 컴퓨터: 운영 체제 Windows 10 또는 11 버전.
Node.js: 버전: Node.js ≥ 16.19.1(공식 LTS 버전 사용을 권장하며, npm 버전은 node 버전과 일치해야 합니다).
단계 1: 서비스 활성화
Tencent Cloud에서 제공하는 오디오/비디오 서비스를 사용하기 전에 콘솔로 이동하여 애플리케이션에 대한 오디오/비디오 서비스를 활성화해야 합니다. 구체적인 절차는 서비스 활성화(TUILiveKit)를 참조하십시오.
단계 2: TUILiveKit 소스 코드 다운로드
git clone https://github.com/Tencent-RTC/ultra-live-electron.git
단계 3: TUILiveKit 통합
TUILiveKit이 데스크톱에서 실행될 때, TUILiveKit의 메인 인터페이스와 설정 인터페이스를 각각 담을 두 개의 Electron 창을 생성해야 합니다. 이 두 창을 각각 TUILiveKit 메인 창과 서브 창이라고 부릅니다. 통합 후 최종 효과: 기존의 Electron 애플리케이션에서 하나의 버튼을 클릭하여 TUILiveKit 메인 창을 생성 및 열면 TUILiveKit의 모든 기능을 사용할 수 있습니다.
전제 조건
코드 프로젝트에는 다음 기술 스택이 포함되어야 합니다:
Vue3
Webpack
TypeScript
Electron
주의:
TUILiveKit 코드를 프로젝트로 복사
1. TUILiveKit 컴포넌트 복사
ultra-live-electron/src/TUILiveKit
디렉터리를 프로젝트의 src
디렉터리 아래로 복사합니다.2. TUILiveKit 창 생성 코드 복사
ultra-live-electron/TUILiveKit.main.js
와 ultra-live-electron/TUILiveKit.preload.js
파일을 프로젝트의 루트 디렉터리로 복사합니다.3. TUILiveKit 메인 창과 서브 창 페이지 및 해당 페이지 라우팅 정의 복사
ultra-live-electron/src/views/TUILiveKitChild.vue
와 ultra-live-electron/src/views/TUILiveKitMain.vue
파일을 프로젝트의 src/views
디렉터리 아래로 복사합니다.프로젝트의 페이지 라우팅 파일
src/router/index.ts
에 다음 두 가지 라우팅 설정을 추가합니다:// src/router/index.tsimport { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';import HomeView from '../views/HomeView.vue';const routes: Array<RouteRecordRaw> = [{ // 애플리케이션의 현재 라우팅 페이지, 페이지 내에 TUILiveKit 메인 창을 여는 버튼이 있습니다path: '/',name: 'home',component: HomeView},// ********************************** TUILiveKit 관련 코드 시작 ********************************** //{ // TUILiveKit 메인 창 페이지path: '/tui-live-kit-main',name: 'tui-live-kit-main',component: () => import(/* webpackChunkName: "TUILiveKitMain" */ '../views/TUILiveKitMain.vue')},{ // TUILiveKit 서브 창 페이지path: '/tui-live-kit-child',name: 'tui-live-kit-child',component: () => import(/* webpackChunkName: "TUILiveKitChild" */ '../views/TUILiveKitChild.vue'),},// ********************************** TUILiveKit 관련 코드 종료 ********************************** //];// ********************************** TUILiveKit 관련 코드 시작 ********************************** //// 메인 프로세스에서 오는 창 유형 알림을 수신하고, 라우팅 점프 수행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 관련 코드 종료 ********************************** //const router = createRouter({history: createWebHashHistory(),routes});export default router;
4. 뷰티 관련 코드, 리소스 및 구성을 복사합니다.
ultra-live-electron/public/assets
디렉터리와 public/avatar.png
파일을 프로젝트의 public
디렉터리 아래로 복사합니다.ultra-live-electron/scripts/prestart.js
파일을 프로젝트의 scripts
디렉터리 아래로 복사하고, 프로젝트의 package.json
파일의 scripts
부분에 다음 명령어를 추가합니다.{"scripts": {"prestart": "node ./scripts/prestart.js"}}
여기서는 뷰티 기능을 활성화하지 않으며, 위에 언급된 설정, 코드, 리소스를 복사하면 프로젝트가 오류 없이 실행될 수 있습니다. 뷰티 기능 활성화는 뷰티 기능 활성화 방법을 참조하세요.
5. vue.config.js 구성 변경
프로젝트의
vue.config.js
파일에 다음 구성을 추가합니다:// vue.config.jsconst { defineConfig } = require('@vue/cli-service')// *********************************** TUILiveKit 관련 코드 시작 *********************************** //const os = require("os");const isProduction = process.env.NODE_ENV === "production";const platform = os.platform();// *********************************** TUILiveKit 관련 코드 종료 *********************************** //module.exports = defineConfig({transpileDependencies: true,// *********************************** TUILiveKit 관련 코드 시작 *********************************** //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 관련 코드 종료 *********************************** //});
6.
src/debug
디렉토리를 복사하고, SDKAppID
및 SDKSecretKey
를 구성합니다.ultra-live-electron/src/debug
폴더를 프로젝트의 src
디렉토리로 복사하고, 복사된 basic-info-config.js
파일을 열어 단계 1: 서비스 활성화에서 획득한 SDKAppID
와 SDKSecretKey
를 입력하십시오.// basic-info-config.js/*** Tencent Cloud SDKAppID는 귀하의 계정 아래의 SDKAppID로 교체해야 합니다.* TRTC [콘솔](https://console.cloud.tencent.com/rav)로 이동하여 애플리케이션을 생성하면, SDKAppID를 볼 수 있습니다,* 이것은 Tencent Cloud가 고객을 구별하기 위한 고유 식별자입니다.*/export const SDKAppID = 0;/*** 서명 계산을 위한 암호키는 다음 절차에 따라 얻을 수 있습니다:** 단계 1. TRTC [콘솔](https://console.cloud.tencent.com/rav)로 이동하세요. 만약 아직 애플리케이션이 없다면 하나 생성하세요.* 단계 2. "애플리케이션 구성"을 클릭하여 기본 구성 페이지로 들어가서 "계정 체계 통합" 부분을 찾습니다.* 단계 3. "암호키 보기" 버튼을 클릭하면 UserSig 계산에 사용되는 암호키를 확인할 수 있습니다. 이를 복사하여 아래의 변수에 복사해 넣습니다.** 주의: 이 방법은 Demo 디버깅에만 사용됩니다. 정식 출시 전에 UserSig 계산 코드와 암호키를 귀하의 백엔드 서버로 마이그레이션하여 암호키 유출로 인한 트래픽 도용을 방지하세요.* 문서: https://cloud.tencent.com/document/product/647/17275#Server*/export const SDKSecretKey = '';
7. Pinia 상태 관리 활성화 및 테마 스타일을 도입
프로젝트의 src/main.ts 파일을 열고 pinia 상태 관리 지원을 추가합니다.
// main.tsimport { createApp } from 'vue';// *********************************** TUILiveKit 관련 코드 시작 *********************************** //import { createPinia } from 'pinia';import "./TUILiveKit/assets/theme.css";// *********************************** TUILiveKit 관련 코드 종료 *********************************** //import App from './App.vue'import router from './router'createApp(App)// *********************************** TUILiveKit 관련 코드 시작 *********************************** //.use(createPinia())// *********************************** TUILiveKit 관련 코드 종료 *********************************** //.use(router).mount('#app');
8. global.d.ts 수정
프로젝트
src/global.d.ts
파일에서 Window 유형에 대해 다음 속성 선언을 추가합니다.// src/global.d.tsexport {}global 선언 {interface Window {// *********************************** TUILiveKit 관련 코드 시작 *********************************** //ipcRenderer: any;nativeWindowHandle: Uint8Array;mainWindowPort: MessagePort | null;}// *********************************** TUILiveKit 관련 코드 종료 *********************************** //}
입구 추가, TUILiveKit 메인 창 열기
프로젝트의 특정 페이지에서 새 버튼을 추가하고 클릭하면 Electron 메인 프로세스에게 TUILiveKit 메인 창을 열도록 알립니다. 아래 예시는 우리가 구현한 샘플 코드입니다.
// HomeView.vue<template><div class="home"><button @click="openTUILiveKit">방송 시작</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); // 상태를 기록하여 TUILiveKit 메인 창을 중복해서 열지 않도록 합니다const openTUILiveKit = async () => {if (!isOpen.value) {const currentUserInfo = await getBasicInfo();if (currentUserInfo) {window.ipcRenderer.send('openTUILiveKit', {userInfo: currentUserInfo // TUILiveKit 메인 창을 열 때 사용자 정보를 매개변수로 전달해야 합니다});isOpen.value = true;} else {console.error('Error: cannot get current user info');}}};</script>
Electron 프로젝트의 preload 스크립트에서 Electron의
ipcRenderer
객체를 전역 객체인 window
에 추가하여 vue 컴포넌트 및 JavaScript/TypeScript 스크립트에서 Electron 메인 프로세스와 통신할 수 있게 합니다.// preload.jsconst { ipcRenderer } = require("electron");// Enable `ipcRenderer` can be used in vue and Javascript modulewindow.ipcRenderer = ipcRenderer;
Electron 프로젝트의 메인 프로세스 스크립트에서 vue 컴포넌트에서 보낸
openTUILiveKit
요청을 수신하고 TUILiveKit 메인 창을 엽니다.// main.jsconst { app, BrowserWindow, ipcMain } = require('electron');const path = require('path');// *********************************** TUILiveKit 관련 코드 시작 *********************************** //const { TUILiveKitMain } = require("./TUILiveKit.main");// *********************************** TUILiveKit 관련 코드 종료 *********************************** //let mainWindow = null;const createWindow = () => {mainWindow = new BrowserWindow({width: 800,height: 600,// *********************************** TUILiveKit 관련 코드 시작 *********************************** //webPreferences: {preload: path.join(__dirname, 'preload.js'),nodeIntegration: true,contextIsolation: false,}// *********************************** TUILiveKit 관련 코드 종료 *********************************** //});// *********************************** TUILiveKit 관련 코드 시작 *********************************** //bindIPCMainEvent();// *********************************** TUILiveKit 관련 코드 종료 *********************************** //if (app.isPackaged) {mainWindow.loadFile("dist/index.html");} else {mainWindow.loadURL('http://localhost:8080');}}// *********************************** TUILiveKit 관련 코드 시작 *********************************** //function bindIPCMainEvent() {ipcMain.on("openTUILiveKit", (event, args) => {console.log(`[main] open live kit`, args);TUILiveKitMain.open(args); // TUILiveKit 메인 창 열기});}// *********************************** TUILiveKit 관련 코드 종료 *********************************** //app.whenReady().then(() => {createWindow();app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) createWindow()});})app.on('window-all-closed', () => {if (process.platform !== 'darwin') app.quit()});
프로젝트 package.json 파일에 다음 구성을 추가하여 개발 모드에서 Electron 애플리케이션을 시작할 수 있도록 지원합니다.
{"main": "main.js","scripts": {"start": "electron ."},"overrides": {"@tencentcloud/tuiroom-engine-electron": {"trtc-electron-sdk": "^12.2.701"}}}
의존성 설치
npm install --save pinianpm install --save trtc-electron-sdk movable-resizable-jsnpm install --save @tencentcloud/tuiroom-engine-electron # TUILiveKit 라이브룸 엔진npm install --save trtc-electron-plugin-xmagic # TUILiveKit 통합된 뷰티 플러그인npm install --save-dev native-ext-loader electron-devtools-installer electron-builder
단계 4: 개발 모드 시작
1. 프로젝트 디렉토리로 이동하여 명령 실행 파일
cmd.exe
를 열고, 다음 명령어를 실행하여 Web 프로젝트를 개발 모드로 시작하십시오.npm run serve
만약 시작 시 error Component name "Index" should always be multi-word vue/multi-word-component-names 오류가 발생하면, 프로젝트의 eslint 구성이 TUILiveKit과 일치하지 않음을 의미합니다. 프로젝트의 .eslintrc.js 파일 또는 package.json 파일의 eslintConfig 부분을 열어, 아래 코드에 있는 vue/multi-word-component-names 검증 규칙을 추가한 후, 다시 "npm run serve" 명령어를 실행하십시오.
// .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 관련 코드 시작 *********************************** //"vue/multi-word-component-names": process.env.NODE_ENV === 'production' ? 'warn' : 'off',// *********************************** TUILiveKit 관련 코드 종료 *********************************** //}}
2. 프로젝트 디렉토리로 이동하여 새로운 명령 실행 파일
cmd.exe
를 열고, 다음 명령어를 실행하여 Electron 애플리케이션을 개발 모드로 시작하십시오.npm run start
성공적으로 시작되면, 애플리케이션 인터페이스에 추가된 "방송 시작" 버튼을 클릭하여 TUILiveKit 메인 창을 열 수 있습니다. 열리면 다음 그림과 같이 표시됩니다:

단계 5: 라이브 방송 시작하기
1. 카메라 추가
방송을 시작하기 전에, 화면 소스를 먼저 추가해야 합니다. 현재 지원되는 항목은 카메라, 화면 공유, 창 공유 및 이미지입니다. 아래 그림은 카메라를 추가한 후의 효과입니다.

2. Logo 이미지 추가
방송 중에 브랜드 Logo를 추가해야 하는 경우, Logo 이미지를 추가할 수 있습니다. 아래 그림은 투명한 배경의 Logo 이미지를 추가한 후의 효과입니다. 새로 추가된 이미지 주위에 노란색 테두리가 표시되며, 이는 현재 선택된 상태임을 나타냅니다. 선택된 상태의 멀티미디어 소스는 마우스를 사용하여 위치를 이동하거나 크기를 조절할 수 있으며, 오른쪽 버튼 메뉴를 사용하여 멀티미디어 소스를 회전시키거나 표시 계층을 변경하는 등의 작업을 할 수 있습니다.

3. 방송 시작
방송 시작을 클릭하면 라이브 스트리밍 푸시가 시작됩니다. 성공적으로 방송이 시작되면 방송 시작 버튼이 방송 종료로 변경되며, 클릭하여 라이브 스트리밍 푸시를 종료할 수 있습니다.

4. 방송 시청
데스크톱 버전의 TUILiveKit은 라이브 스트리밍 푸시만 지원하며, 시청하려면 TUILiveKit 모바일 버전으로 접속해야 합니다. 모바일 버전을 통해 시청하기: Android、iOS.
단계 6: 설치 패키지 구축
1.
ultra-live-electron/electron-builder.json5
파일을 프로젝트 루트 디렉토리로 복사한 후, 파일 내의 productName
과 appId
를 해당 애플리케이션의 정보로 변경하세요.2. 프로젝트의 package.json 파일에 다음 명령어를 추가하여 애플리케이션 설치 패키지 생성을 지원합니다.
{"scripts": {"build:win64": "electron-builder --win --x64","pack:win64": "npm run build && npm run build:win64"}}
3. 애플리케이션 설치 패키지를 구축합니다.
프로젝트 디렉토리로 이동하여 명령 실행 파일
cmd.exe
를 열고, 다음 명령어를 실행하면 구축이 시작됩니다. 구축된 설치 패키지는 프로젝트의 release
디렉토리에 저장됩니다.npm run pack:win64
4. 구축된 애플리케이션 설치 패키지를 설치하고 실행합니다.
자주 묻는 질문
통합 조건을 충족하는 프로젝트가 없으면 어떻게 해야 하나요?
구체적인 상황에 따라, 상이한 방법을 채택하는 것이 좋습니다.
아직 프로젝트가 없다면, 저희의 오픈소스 Github 프로젝트를 기반으로 하나의 프로젝트를 복제하는 것이 좋습니다.
프로젝트가 요구하는 통합 조건과 일치하지 않다면, 저희가 공개한 프로젝트 템플릿: trtc-electron-template-vue3-webpack을 참조하여 프로젝트를 조정하십시오.
프로젝트가 JavaScript 프로젝트이고 TypeScript를 지원하지 않는다면, 자주 묻는 질문 "3. JavaScript 프로젝트에서는 어떻게 통합하나요?"를 참고하십시오.
Vite 구축 및 통합을 지원하나요?
JavaScript 프로젝트에서 통합하는 방법?
JavaScript 프로젝트에서는 TUILiveKit를 직접 통합할 수 없습니다. TypeScript를 지원하도록 프로젝트를 변경해야 합니다. 절차는 다음과 같습니다.
1. 의존성 설치
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.
ultra-live-electron/tsconfig.json
파일을 프로젝트의 루트 디렉터리로 복사합니다.3.
ultra-live-electron/src/global.d.ts
파일을 프로젝트의 루트 디렉터리로 복사합니다.뷰티 기능을 어떻게 켜나요?
TUILiveKit이 사용하는 뷰티 기능은 Tencent Effect SDK를 기반으로 구현됩니다. 사용하시려면 해당 서비스 구매를 통해
licenseURL
과 licenseKey
를 획득하고 이를 src/TUILiveKit/utils/beauty.ts
파일에 입력하면 됩니다.주의:
생산 프로젝트에서는
licenseURL
과licenseKey
를 백엔드 서비스 호출을 통해 획득해야 합니다. JavaScript 파일에 직접 입력하여 빠르게 활성화할 수 있지만, licenseURL
및 licenseKey
유출 위험이 크기 때문에 빠른 통합 및 체험 용도로만 적합합니다.// beauty.tsexport const XmagicLicense = {licenseURL: "",licenseKey: "",};
교류 및 피드백
필요한 사항이나 피드백이 있으면 info_rtc@tencent.com로 연락해 주세요.