Video Live Integration

// src/router/index.ts
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
import HomeView from '../views/HomeView.vue';

const routes: Array<RouteRecordRaw> = [
  { // The default page of your application, which contains a button to trigger the opening of the TUILiveKit main window
    path: '/',
    name: 'home',
    component: HomeView
  },
  // ********************************** TUILiveKit required code start ********************************** //
  { // TUILiveKit main window page
    path: '/tui-live-kit-main',
    name: 'tui-live-kit-main',
    component: () => import(/* webpackChunkName: "TUILiveKitMain" */ '../views/TUILiveKitMain.vue')
  },
  { // TUILiveKit sub-window page
    path: '/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;

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

// vue.config.js
const { 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 *********************************** //
});

// basic-info-config.js
/**
 * Tencent Cloud SDKAppID, which should be replaced with user's SDKAppID.
 * Enter Tencent Cloud TRTC [Console] (https://console.trtc.io/) 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.trtc.io/),
 * 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 = '';

// main.ts
import { createApp } from 'vue';
// *********************************** TUILiveKit required code start *********************************** //
import { createPinia } from 'pinia';
import "./TUILiveKit/assets/theme.css";
// *********************************** 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');

// src/global.d.ts
export {}
declare global {
  interface Window {
// *********************************** TUILiveKit required code start *********************************** //
    ipcRenderer: any;
    nativeWindowHandle: Uint8Array;
    mainWindowPort: MessagePort | null;
  }
// *********************************** TUILiveKit required code end *********************************** //
}

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 required code start *********************************** //
    "vue/multi-word-component-names": process.env.NODE_ENV === 'production' ? 'warn' : 'off',
// *********************************** TUILiveKit required code end *********************************** //
  }
}

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