集成 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 请您参考 步骤一 
      sdkAppId: 0,
      // 用户在您业务中的唯一标示 Id
      userId: '',
      // 本地开发调试可在 https://console.tencentcloud.com/trtc/usersigtool 页面快速生成 userSig, 注意 userSig 与 userId 为一一对应关系
      userSig: '',
      // 用户在您业务中使用的昵称
      userName: '',
      // 用户在您业务中使用的头像链接
      userAvatar: '',
      // 用户用于屏幕分享的唯一 Id，要求 shareUserId = `share_${userId}`, 无屏幕分享功能需求可不传入
      shareUserId: '',
      // 请您参考本文 步骤一 > 第三步 并使用 sdkAppId 及 shareUserId 签发 shareUserSig 
      shareUserSig: '',
  })
   // 默认执行创建房间，实际接入可按需求择机执行 handleCreateRoom 方法
  await handleCreateRoom();
 })

 // 主持人创建房间，该方法只在创建房间时调用
 async function handleCreateRoom() {
  // roomId 为用户进入的房间号, 要求 roomId 类型为 number
  // roomMode 包含'FreeSpeech'(自由发言模式) 和'ApplySpeech'(举手发言模式) 两种模式，默认为'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

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;
     `,
   }
 ),
 ]
 // ...
});

npm run dev