TUIRoom (Electron)の統合

cd electron-vite-vue
npm install
npm run dev

<template>
 <room ref="TUIRoomRef"></room>
</template>

<script setup lang="ts">
 import { ref, onMounted } from 'vue';
 // TUIRoomコンポーネントをインポートします。インポートパスが正しいかどうかよく確認してください
 import Room from './TUIRoom/index.vue';
 // TUIRoomコンポーネント要素を取得し、TUIRoomコンポーネントの呼び出しメソッドに用います
 const TUIRoomRef = ref();

  onMounted(async () => {
  // TUIRoomコンポーネントを初期化します
  // キャスターはルームを作成する前にTUIRoomコンポーネントを初期化する必要があります
  // 一般メンバーは入室前にTUIRoomコンポーネントを初期化する必要があります
  await TUIRoomRef.value.init({
      // sdkAppIdを取得します。ステップ1をご参照ください 
      sdkAppId: 0,
      業務// ユーザーの業務における固有の表示IDです
      userId: '',
      // ローカル開発デバッグの場合はhttps://console.tencentcloud.com/trtc/usersigtoolページでuserSigをすぐに発行できます。userSigとuserIdは対になる関係であることに注意してください
      userSig: '',
      // ユーザーが業務で使用するニックネーム
      userName: '',
      // ユーザーが業務で使用するプロフィール画像リンク
      userAvatar: '',
      // ユーザーが画面共有に用いる固有のIdであり、shareUserId = `share_${userId}`である必要があります。画面共有機能が必要なければ渡さなくても結構です
      shareUserId: '',
      // 本文ステップ1 > 第3段階を参照し、sdkAppIdとshareUserIdを使用してshareUserSigを発行してください 
      shareUserSig: '',
  })
   // デフォルトではルーム作成が実行されます。実際の統合では必要に応じ、タイミングを見てhandleCreateRoomメソッドを実行することができます
  await handleCreateRoom();
 })

 // キャスターがルームを作成します。このメソッドはルーム作成時にのみ呼び出します
 async function handleCreateRoom() {
  // roomIdはユーザーが入室するルームナンバーです。roomIdのタイプはnumberである必要があります
  // roomModeには'FreeSpeech'(自由発言モード) と'ApplySpeech'(挙手発言モード)の2種類があります。デフォルトでは'FreeSpeech'です。現在は自由発言モードのみサポートされていますのでご注意ください
  // roomParamはユーザーの入室時のデフォルト動作(デフォルトでマイクをオンにするかどうか、デフォルトでカメラをオンにするかどうか、デフォルトのメディアデバイスId)を指定するものです
  const roomId = 123456;
  const roomMode = 'FreeSpeech';
  const roomParam = {
      isOpenCamera: true,
      isOpenMicrophone: true,
  }
  await TUIRoomRef.value.createRoom(roomId, roomMode, roomParam);
 }

 // 一般メンバーが入室します。このメソッドは一般メンバーが作成済みのルームに入室する際にのみ呼び出します
 async function handleEnterRoom() {
  // roomIdはユーザーが入室するルームナンバーです。roomIdのタイプはnumberである必要があります
  // roomParamはユーザーの入室時のデフォルト動作(デフォルトでマイクをオンにするかどうか、デフォルトでカメラをオンにするかどうか、デフォルトのメディアデバイスId)を指定するものです
  const roomId = 123456;
  const roomParam = {
      isOpenCamera: true,
      isOpenMicrophone: true,
  }
  await TUIRoomRef.value.enterRoom(roomId, roomParam);
 }
</script>

<style>
html, body {
 width: 100%;
 height: 100%;
 margin: 0;
}

#app {
 width: 100%;
 height: 100%;
}
</style>

npm install sass typescript unplugin-auto-import unplugin-vue-components -S -D

npm install element-plus events mitt pinia trtc-electron-sdk tim-js-sdk tsignaling -S

// src/main.tsファイル
import { createPinia } from 'pinia';

const app = createApp(App);
// Piniaの登録
createApp(App)
  .use(createPinia())
  .mount('#app')
  .$nextTick(window.removeLoading)

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
const path = require('path');

export default defineConfig({
    // ...
    plugins: [
        AutoImport({
            resolvers: [ElementPlusResolver()],
        }),
        Components({
            resolvers: [ElementPlusResolver({
                importStyle: 'sass',
            })],
        }),
    ],
    css: {
    preprocessorOptions: {
    scss: {
        additionalData: `
          @use '${path.resolve(__dirname, 'src/TUIRoom/assets/style/element.scss')}' as *;
        `,
      },
    },
  },
});

// src/main.ts
import 'element-plus/theme-chalk/el-message.css'
import 'element-plus/theme-chalk/el-message-box.css'

// vite.config.ts

export default defineConfig({
 // ...
 plugins: [
 resolve(
   {
     "trtc-electron-sdk": `
       const TRTCCloud = require("trtc-electron-sdk");
       const TRTCParams = TRTCCloud.TRTCParams;
       const TRTCAppScene = TRTCCloud.TRTCAppScene;
       const TRTCVideoStreamType = TRTCCloud.TRTCVideoStreamType;
       const TRTCScreenCaptureSourceType = TRTCCloud.TRTCScreenCaptureSourceType;
       const TRTCVideoEncParam = TRTCCloud.TRTCVideoEncParam;
       const Rect = TRTCCloud.Rect;
       const TRTCAudioQuality = TRTCCloud.TRTCAudioQuality;
       const TRTCScreenCaptureSourceInfo = TRTCCloud.TRTCScreenCaptureSourceInfo;
       const TRTCDeviceInfo = TRTCCloud.TRTCDeviceInfo;
       const TRTCVideoQosPreference = TRTCCloud.TRTCVideoQosPreference;
       const TRTCQualityInfo = TRTCCloud.TRTCQualityInfo;
       const TRTCStatistics = TRTCCloud.TRTCStatistics;
       const TRTCVolumeInfo = TRTCCloud.TRTCVolumeInfo;
       const TRTCDeviceType = TRTCCloud.TRTCDeviceType;
       const TRTCDeviceState = TRTCCloud.TRTCDeviceState;
       const TRTCBeautyStyle = TRTCCloud.TRTCBeautyStyle;
       const TRTCVideoResolution = TRTCCloud.TRTCVideoResolution;
       const TRTCVideoResolutionMode = TRTCCloud.TRTCVideoResolutionMode;
       const TRTCVideoMirrorType = TRTCCloud.TRTCVideoMirrorType;
       const TRTCVideoRotation = TRTCCloud.TRTCVideoRotation;
       const TRTCVideoFillMode = TRTCCloud.TRTCVideoFillMode;
       export { 
         TRTCParams,
         TRTCAppScene,
         TRTCVideoStreamType,
         TRTCScreenCaptureSourceType,
         TRTCVideoEncParam,
         Rect,
         TRTCAudioQuality,
         TRTCScreenCaptureSourceInfo,
         TRTCDeviceInfo,
         TRTCVideoQosPreference,
         TRTCQualityInfo,
         TRTCStatistics,
         TRTCVolumeInfo,
         TRTCDeviceType,
         TRTCDeviceState,
         TRTCBeautyStyle,
         TRTCVideoResolution,
         TRTCVideoResolutionMode,
         TRTCVideoMirrorType,
         TRTCVideoRotation,
         TRTCVideoFillMode,
       };
       export default TRTCCloud.default;
     `,
   }
 ),
 ]
 // ...
});

// env.d.ts

declare module 'tsignaling/tsignaling-js' {
  import TSignaling from 'tsignaling/tsignaling-js';
  export default TSignaling;
}

declare module 'tim-js-sdk' {
  import TIM from 'tim-js-sdk';
  export default TIM;
}


// vite.config.ts

export default defineConfig({
    // ...
    build: {
        rollupOptions: {
          output: {
              format: 'es'
          }
        }
    },
});

npm run dev