Video Live Integration

// src/router/index.ts
import { 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;

{
  "scripts": {
    "prestart": "node ./scripts/prestart.js"
  }
}

// vue.config.js
const { 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 관련 코드 종료 *********************************** //
});

// 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 = '';

// main.ts
import { 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');

// src/global.d.ts
export {}
global 선언 {
  interface Window {
// *********************************** TUILiveKit 관련 코드 시작 *********************************** //
    ipcRenderer: any;
    nativeWindowHandle: Uint8Array;
    mainWindowPort: MessagePort | null;
  }
// *********************************** TUILiveKit 관련 코드 종료 *********************************** //
}

npm run serve

// .eslintrc.js
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',
// *********************************** TUILiveKit 관련 코드 시작 *********************************** //
    "vue/multi-word-component-names": process.env.NODE_ENV === 'production' ? 'warn' : 'off',
// *********************************** TUILiveKit 관련 코드 종료 *********************************** //
  }
}

npm run start

{
  "scripts": {
    "build:win64": "electron-builder --win --x64",
    "pack:win64": "npm run build && npm run build:win64"
  }
}

npm run pack:win64

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