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 に置き換える必要があります。
 * Tencent Cloud TRTC[コンソール](https://console.cloud.tencent.com/rav )でアプリケーションを作成すると、SDKAppID が表示されます、
 * これは Tencent Cloud が顧客を区別するために使用する一意の識別子です。
 */
export const SDKAppID = 0;

/**
 * サインを計算するための暗号化キー。取得の手順は以下の通りです。
 *
 * step1. Tencent Cloud TRTC[コンソール](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