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
/**
 * 腾讯云 SDKAppID，需要替换为您自己账号下的 SDKAppID。
 * 进入腾讯云实时音视频[控制台](https://console.cloud.tencent.com/rav ) 创建应用，即可看到 SDKAppID，
 * 它是腾讯云用于区分客户的唯一标识。
 */
export const SDKAppID = 0;

/**
 * 计算签名用的加密密钥，获取步骤如下：
 *
 * step1. 进入腾讯云实时音视频[控制台](https://console.cloud.tencent.com/rav )，如果还没有应用就创建一个，
 * step2. 单击“应用配置”进入基础配置页面，并进一步找到“帐号体系集成”部分。
 * step3. 点击“查看密钥”按钮，就可以看到计算 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 {}
declare 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