agora

.env

@@ -22,4 +22,4 @@ VITE_ROOM_MEMBER=10
 VITE_SHOW_CONSOLE=1
 VITE_SHOW_DEBUGPANEL=1
 VITE_TEST_VERSION =2022120905
-VITE_ENABLE_VIDEO=0
+VITE_ENABLE_VIDEO=1

.env.development

@@ -5,8 +5,8 @@ VITE_APP_CDN_URL=https://4dkk.4dage.com/v4/www/
 # sdk文件地址
 # VITE_APP_SDK_DIR=https://4dkk.4dage.com/v4/sdk/4.9.0
 VITE_APP_SDK_DIR=https://4dkk.4dage.com/v4-test/www/sdk
-# VITE_APP_SOCKET_URL=ws://127.0.0.1:8889
-VITE_APP_SOCKET_URL=wss://testws.4dkankan.com
+VITE_APP_SOCKET_URL=ws://127.0.0.1:8889
+# VITE_APP_SOCKET_URL=wss://testws.4dkankan.com
 # VITE_APP_SOCKET_URL=wss://221.4.210.172:16666
 # 静态资源目录
 VITE_APP_STATIC_DIR=viewer
@@ -24,4 +24,4 @@ VITE_ROOM_MEMBER=10
 VITE_SHOW_CONSOLE=1
 VITE_SHOW_DEBUGPANEL=1
 VITE_TEST_VERSION =2022120905
-VITE_ENABLE_VIDEO=0
+VITE_ENABLE_VIDEO=1

package.json

@@ -18,6 +18,7 @@
     "lint:lint-staged": "lint-staged"
   },
   "dependencies": {
+    "agora-rtc-sdk-ng": "^4.18.2",
     "axios": "^1.1.3",
     "clipboard": "^2.0.11",
     "consola": "^2.15.3",

pnpm-lock.yaml

@@ -5,6 +5,9 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  agora-rtc-sdk-ng:
+    specifier: ^4.18.2
+    version: 4.18.2
   axios:
     specifier: ^1.1.3
     version: 1.1.3
@@ -1743,6 +1746,16 @@ packages:
       indent-string: 4.0.0
     dev: true
 
+  /agora-rtc-sdk-ng@4.18.2:
+    resolution: {integrity: sha512-tvyuXHVL15Eo0lK3wwM3rGPKGPeGYuarAwCs5oyveht1HZO9z3w6vra3d/q3eOCYpvQscCW7P0QNfUIAQTs4RQ==}
+    dependencies:
+      agora-rte-extension: 1.2.3
+    dev: false
+
+  /agora-rte-extension@1.2.3:
+    resolution: {integrity: sha512-k3yNrYVyzJRoQJjaJUktKUI1XRtf8J1XsW8OzYKFqGlS8WQRMsES1+Phj2rfuEriiLObfuyuCimG6KHQCt5tiw==}
+    dev: false
+
   /ajv@6.12.6:
     resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
     dependencies:

src/components/chatRoom/camera.vue

@@ -1,16 +1,13 @@
 <template>
-  <div
-    :id="cameraBoxId"
-    class="camera_box"
-    v-show="
+  <!-- v-show="
       isLeader &&
       isRTCJoined &&
       isPanoramaMode &&
       !muteVideoLeader &&
       hosterhasVideo &&
       globalVideoEnable
-    "
-  >
+    " -->
+  <div :id="cameraBoxId" class="camera_box">
     <!--  -->
     <span class="micBox">
       <i class="speak_mic" v-if="!roomLeader?.IsMuted"></i>
@@ -72,7 +69,7 @@
     width: 1.94rem;
     height: 1.94rem;
     position: fixed;
-    top: 0.69rem;
+    top: 1.29rem;
     left: 0.53rem;
     overflow: hidden;
     z-index: 10000;

src/hooks/useAgora.ts

@@ -0,0 +1,38 @@
+// argora
+import AgoraRTC, { IAgoraRTCClient } from 'agora-rtc-sdk-ng';
+
+export type AgoraClient = IAgoraRTCClient;
+export const createAgoraClient = async (
+  sdkAppId: string,
+  roomId: string,
+  sign: string,
+  userId: string,
+): Promise<IAgoraRTCClient> => {
+  const client: IAgoraRTCClient = AgoraRTC.createClient({ mode: 'rtc', codec: 'vp8' });
+  const uid = await client.join(String(sdkAppId), roomId, sign, userId);
+  console.log('uid', uid);
+
+  client.on('user-published', async (user, mediaType) => {
+    await client.subscribe(user, mediaType);
+    debugger;
+    if (mediaType === 'video') {
+      console.log('subscribe video success', user.videoTrack);
+      const localVideoEl = document.getElementById(`camera_box_${userId}`);
+      if (user.videoTrack && localVideoEl) {
+        debugger;
+        user.videoTrack.play(localVideoEl);
+      }
+      //   user.videoTrack?.play();
+    }
+    if (mediaType === 'audio') {
+      console.log('subscribe audio success');
+      user.audioTrack?.play();
+    }
+  });
+
+  const localAudioTrack = await AgoraRTC.createMicrophoneAudioTrack();
+  const localVideoTrack = await AgoraRTC.createCameraVideoTrack();
+  await client.publish([localAudioTrack, localVideoTrack]);
+
+  return client;
+};

src/hooks/useRoom.ts

@@ -59,6 +59,7 @@ interface getSignType {
   expire: number;
   sdkAppId: number;
   sign: string;
+  operatorType?: number;
 }
 
 function createNewURL(params: roomParamsType): string {

src/hooks/useTRTC copy.ts

@@ -0,0 +1,541 @@
+import consola from 'consola';
+import { computed, nextTick, ref, unref } from 'vue';
+import TRTC from 'trtc-js-sdk';
+import type { LocalStream, Client, RemoteStream } from 'trtc-js-sdk';
+
+import { useRtcStore } from '/@/store/modules/rtc';
+// import Dialog from '/@/components/basic/dialog';
+import AgoraRTC, { IAgoraRTCClient } from 'agora-rtc-sdk-ng';
+import { useI18n } from './useI18n';
+import { useMiniApp } from './useMiniApp';
+import { useRoom } from './useRoom';
+
+let localClient: Client;
+let localStream: LocalStream;
+const invitedRemoteStreams = ref<RemoteStream[]>([]);
+const muteAudioLeader = ref(false);
+const muteVideoLeader = ref(false);
+const { isUsingMiniApp } = useMiniApp();
+const globalVideoEnable = computed(
+  () => Number(import.meta.env.VITE_ENABLE_VIDEO) === 1 && unref(isUsingMiniApp),
+);
+
+export const checkDevice = async () => {
+  try {
+    const rtcStore = useRtcStore();
+    const microphoneItems = await TRTC.getMicrophones();
+    console.log('microphoneItems', microphoneItems);
+    microphoneItems.forEach((item) => {
+      item['value'] = item.deviceId;
+    });
+    if (microphoneItems?.length) {
+      rtcStore.setAudioDeviceId(
+        microphoneItems[0].deviceId || microphoneItems[0].groupId || 'default',
+      );
+    } else {
+      rtcStore.setAudioDeviceId('');
+    }
+
+    const camerasItems = await TRTC.getCameras();
+    console.log('camerasItems', camerasItems);
+    camerasItems.forEach((item) => {
+      item['value'] = item.deviceId;
+    });
+    if (camerasItems?.length) {
+      rtcStore.setVideoDeviceId(camerasItems[0].deviceId || camerasItems[0].groupId || 'default');
+    } else {
+      rtcStore.setVideoDeviceId('');
+    }
+  } catch (error) {
+    console.log('error', error);
+  }
+};
+
+const checkSystemRequirements = async () => {
+  const result = await TRTC.checkSystemRequirements();
+  console.log('result', result);
+  const isSmallStreamSupported = await TRTC.isSmallStreamSupported();
+  console.log('isSmallStreamSupported', isSmallStreamSupported);
+};
+
+// interface UseRtcSdkType {
+//     createRTCSocket: () => Promise<void>
+// }
+
+async function createLocalStream() {
+  try {
+    const rtcStore = useRtcStore();
+
+    const enableVideo =
+      rtcStore.isLeader && rtcStore.videoDeviceId?.length > 0 && unref(globalVideoEnable);
+
+    console.warn('enableVideo', enableVideo, unref(globalVideoEnable));
+    localStream = TRTC.createStream({
+      userId: rtcStore.userId,
+      audio: true,
+      video: enableVideo,
+      cameraId: rtcStore.videoDeviceId,
+      microphoneId: rtcStore.audioDeviceId,
+    });
+    //开大小流
+    const isSmallStreamSupported = TRTC.isSmallStreamSupported();
+    if (isSmallStreamSupported) {
+      await localClient.enableSmallStream();
+      localClient.setSmallStreamProfile({
+        width: 160,
+        height: 90,
+        bitrate: 100,
+        frameRate: 15,
+      });
+    } else {
+      localStream.setVideoProfile('360p');
+    }
+
+    //
+    await localStream.initialize();
+    return Promise.resolve();
+
+    // if (rtcStore.audioMuted) {
+    //   localStream.muteAudio();
+    // }
+  } catch (error) {
+    console.log(error, 'createStream');
+    return Promise.reject(error);
+  }
+}
+
+async function createRTCSocket(): Promise<void> {
+  try {
+    if (!unref(isUsingMiniApp)) {
+      const rtcStore = useRtcStore();
+      const { getSign } = useRoom();
+      // const res = await getSign(rtcStore.userId);
+      const res = await getSign(rtcStore.userId, rtcStore.roomId, rtcStore.role);
+      console.warn('web rtc入口', res);
+      // await checkSystemRequirements();
+      // await checkDevice();
+      // console.log('createRTCSocket', rtcStore.videoDeviceId);
+
+      // await handleJoin();
+    } else {
+      console.log('小程序关闭rtc入口');
+    }
+  } catch (error) {
+    consola.error({
+      tag: 'createRTCSocket',
+      message: error,
+    });
+  }
+}
+async function handleTXJoin(sign: string, sdkAppId: number) {
+  const rtcStore = useRtcStore();
+  try {
+    // console.warn('sign', res);
+    localClient = TRTC.createClient({
+      mode: 'rtc',
+      sdkAppId: sdkAppId || parseInt(rtcStore.sdkAppId, 10),
+      userId: rtcStore.userId,
+      userSig: sign || rtcStore.genUserSig,
+      useStringRoomId: true,
+      enableAutoPlayDialog: false,
+    });
+    installEventHandlers();
+
+    await localClient.join({ roomId: rtcStore.roomId });
+  } catch (error) {
+    console.error(error, 'error-----------');
+  }
+
+  await createLocalStream();
+  await handlePublish();
+  await nextTick();
+  //
+  // setTimeout(() => {
+  const playLocal = () => {
+    const playId = 'camera_box_' + rtcStore.userId;
+    localStream
+      .play(playId)
+      .then(() => {
+        consola.info({
+          message: '本地采集成功！',
+          tag: 'rtc:audio',
+        });
+        rtcStore.setIsRTCJoined(true);
+      })
+      .catch((error) => {
+        consola.info({
+          message: '本地采集失败！' + error,
+          tag: 'rtc:audio',
+        });
+        setTimeout(() => {
+          console.log('再次播放');
+          playLocal();
+        }, 500);
+      });
+  };
+
+  playLocal();
+  // }, 1000);
+
+  // if (!rtcStore.isLeader) {
+  localStream.muteAudio();
+  console.log('参加者默认-muteAudio');
+  // }
+
+  localStream.on('error', (error) => {
+    if (error.getCode() === 0x4043) {
+      // 自动播放受限导致播放失败，此时引导用户点击页面。
+      // 在点击事件的回调函数中，执行 stream.resume();
+      const rtcStore = useRtcStore();
+      const { t } = useI18n();
+      rtcStore.showBaseDialog(
+        {
+          title: t('base.tips'),
+          desc: t('base.audioPermission'),
+          okTxt: t('base.confirm'),
+          closeTxt: t('base.cancel'),
+        },
+        () => {
+          localStream.resume();
+        },
+      );
+    }
+  });
+}
+
+async function handlePublish() {
+  const rtcStore = useRtcStore();
+
+  if (!rtcStore.isJoined) {
+    return;
+  }
+  if (rtcStore.isPublished) {
+    return;
+  }
+  // if (!rtcStore.isLeader) {
+  //   return;
+  // }
+  try {
+    await localClient.unpublish(localStream);
+    await localClient.publish(localStream);
+    rtcStore.setIsPublished(true);
+  } catch (error) {
+    console.error(error, '---------------handlePublish--------------------');
+  }
+}
+
+// async function handleStartShare() {
+//     shareClient = new ShareClient({
+//         sdkAppId: parseInt(store.getters["rtc/sdkAppId"], 10),
+//         userId: `share${store.getters["rtc/userId"]}`,
+//         roomId: store.getters["rtc/roomId"],
+//         secretKey: store.getters["rtc/secretKey"],
+//         useStringRoomId: true,
+//     });
+//     try {
+//         await shareClient.join();
+//         await shareClient.publish();
+//         console.log("Start share screen success");
+//         store.isShared = true;
+//     } catch (error) {
+//         console.error(`Start share error: ${error.message_}`);
+//     }
+// }
+
+async function handleUnpublish() {
+  const rtcStore = useRtcStore();
+  if (!rtcStore.isJoined) {
+    return;
+  }
+  if (!rtcStore.isPublished) {
+    return;
+  }
+  try {
+    await localClient.unpublish(localStream);
+    // store.commit("rtc/setIsPublished", false);
+    rtcStore.setIsPublished(false);
+  } catch (error) {
+    console.error(error, '-----------handleUnpublish--------------');
+  }
+}
+
+async function handleLeave() {
+  const rtcStore = useRtcStore();
+  if (rtcStore.isPublished) {
+    await handleUnpublish();
+  }
+  try {
+    uninstallEventHandlers();
+    localClient && (await localClient.leave());
+    localClient && localClient.destroy();
+    // localClient = null;
+    invitedRemoteStreams.value.forEach((item) => {
+      item.stop();
+    });
+    invitedRemoteStreams.value = [];
+    rtcStore.setVideoDeviceId('');
+    rtcStore.setAudioDeviceId('');
+    // store.commit("rtc/setVideoDeviceId", "");
+    // store.commit("rtc/setAudioDeviceId", "");
+
+    if (localStream) {
+      localStream.stop();
+      localStream.close();
+      // localStream = null;
+      console.log('有执行到这里-------------');
+    }
+  } catch (error) {
+    console.error(error, '-----------handleLeave--------------');
+  }
+}
+
+function installEventHandlers() {
+  if (!localClient) {
+    return;
+  }
+  localClient.on('error', handleError);
+  localClient.on('client-banned', handleBanned);
+  localClient.on('peer-join', handlePeerJoin);
+  localClient.on('peer-leave', handlePeerLeave);
+  localClient.on('stream-added', handleStreamAdded);
+  localClient.on('stream-subscribed', handleStreamSubscribed);
+  localClient.on('stream-removed', handleStreamRemoved);
+  localClient.on('stream-updated', handleStreamUpdated);
+  localClient.on('mute-video', handleMuteVideo);
+  localClient.on('mute-audio', handleMuteAudio);
+  localClient.on('unmute-video', handleUnmuteVideo);
+  localClient.on('unmute-audio', handleUnmuteAudio);
+}
+
+function uninstallEventHandlers() {
+  if (!localClient) {
+    return;
+  }
+  localClient.off('error', handleError);
+  localClient.off('client-banned', handleBanned);
+  localClient.off('peer-join', handlePeerJoin);
+  localClient.off('peer-leave', handlePeerLeave);
+  localClient.off('stream-added', handleStreamAdded);
+  localClient.off('stream-subscribed', handleStreamSubscribed);
+  localClient.off('stream-removed', handleStreamRemoved);
+  localClient.off('stream-updated', handleStreamUpdated);
+  localClient.off('mute-video', handleMuteVideo);
+  localClient.off('mute-audio', handleMuteAudio);
+  localClient.off('unmute-video', handleUnmuteVideo);
+  localClient.off('unmute-audio', handleUnmuteAudio);
+}
+
+function handleMuteVideo(event) {
+  console.log(`[${event.userId}] mute video`);
+  const rtcStore = useRtcStore();
+  const roomLeader = rtcStore.getRoomLeader();
+  if (event.userId === roomLeader?.UserId) {
+    muteVideoLeader.value = true;
+  }
+}
+
+function handleMuteAudio(event) {
+  if (event.userId.indexOf('leader') > -1) {
+    muteAudioLeader.value = true;
+  }
+  console.log(event, `[] mute audio`);
+}
+
+function handleUnmuteVideo(event) {
+  console.log(`[${event.userId}] unmute video`);
+  const rtcStore = useRtcStore();
+  const roomLeader = rtcStore.getRoomLeader();
+  if (event.userId === roomLeader?.UserId) {
+    muteVideoLeader.value = false;
+  }
+}
+
+function handleUnmuteAudio(event) {
+  console.log(`[${event.userId}] unmute audio`);
+  if (event.userId.indexOf('leader') > -1) {
+    muteAudioLeader.value = false;
+  }
+}
+
+function handleError(error) {
+  console.log(`LocalClient error: ${error.message_}`);
+}
+
+function handleBanned(error) {
+  console.log(`Client has been banned for ${error.message_}`);
+}
+
+function handlePeerJoin(event) {
+  const { userId } = event;
+  if (userId !== 'local-screen') {
+    console.log(`Peer Client [${userId}] joined`);
+  }
+}
+
+function handlePeerLeave(event) {
+  const { userId } = event;
+  if (userId !== 'local-screen') {
+    console.log(`[${userId}] leave`);
+  }
+}
+
+function handleStreamAdded(event) {
+  const remoteStream = event.stream;
+  const id = remoteStream.getId();
+  const userId = remoteStream.getUserId();
+  const rtcStore = useRtcStore();
+
+  console.log(remoteStream, '-------------remoteStream');
+
+  if (remoteStream.getUserId() === rtcStore.userId) {
+    // don't need to screen shared by us
+    localClient.unsubscribe(remoteStream).catch((error) => {
+      console.info(`unsubscribe failed: ${error.message_}`);
+    });
+  } else {
+    console.log(`remote stream added: [${userId}] ID: ${id} type: ${remoteStream.getType()}`);
+    localClient.subscribe(remoteStream).catch((error) => {
+      console.info(`subscribe failed: ${error.message_}`);
+    });
+  }
+}
+
+async function handleStreamSubscribed(event) {
+  const remoteStream = event.stream;
+  const rtcStore = useRtcStore();
+  // const { t } = useI18n();
+  // debugger;
+  const remoteUserId = remoteStream.getUserId();
+  const remoteId = remoteStream.getId();
+  if (remoteUserId == rtcStore.userId) {
+    return;
+  }
+
+  if (!rtcStore.isIdInRemoteStream(remoteId)) {
+    consola.info({
+      message: remoteId,
+      tag: 'rtc:audio',
+    });
+    rtcStore.pushRemoteStreams(remoteStream);
+    // debugger
+  }
+  await nextTick();
+  const playRemote = () => {
+    // const playId = 'camera_remote_box_' + rtcStore.userId;
+    const playId = 'cameraRemoteBox';
+    remoteStream
+      .play(playId)
+      .then(() => {
+        consola.info({
+          message: '远端采集成功 ！playId: ' + playId + ' remoteId:' + remoteId,
+          tag: 'rtc:audio',
+        });
+      })
+      .catch((error) => {
+        consola.info({
+          message: '远端采集失败！' + error,
+          tag: 'rtc:audio',
+        });
+        setTimeout(() => {
+          console.log('远端再次播放' + remoteId);
+          playRemote();
+        }, 500);
+      });
+  };
+  playRemote();
+  remoteStream.on('error', (error) => {
+    if (error.getCode() === 0x4043) {
+      // 自动播放受限导致播放失败，此时引导用户点击页面。
+      // 在点击事件的回调函数中，执行 stream.resume();
+      const rtcStore = useRtcStore();
+      const { t } = useI18n();
+      rtcStore.showBaseDialog(
+        {
+          title: t('base.tips'),
+          desc: t('base.audioPermission'),
+          okTxt: t('base.confirm'),
+          closeTxt: t('base.cancel'),
+        },
+        () => {
+          console.log('手机端', rtcStore.remoteStreams);
+          rtcStore.remoteStreams.forEach((item) => {
+            item.resume();
+          });
+          remoteStream.resume();
+        },
+      );
+    }
+  });
+
+  // setTimeout(async () => {
+  //   try {
+  //     consola.info({
+  //       message: '客音源-->' + remoteId,
+  //       tag: 'rtc:audio',
+  //     });
+  //     consola.info({
+  //       message: rtcStore.remoteStreams,
+  //       tag: 'rtc:audio',
+  //     });
+  //     await remoteStream.play(remoteId);
+  //   } catch (error) {}
+  // }, 200);
+}
+
+function handleStreamRemoved(event) {
+  const remoteStream = event.stream;
+  const userId = remoteStream.getUserId();
+  const remoteStreamId = remoteStream.getId();
+  consola.info({
+    message: `远端流删除: [${userId},${remoteStreamId}]`,
+    tag: 'rtc:audio',
+  });
+  const rtcStore = useRtcStore();
+  rtcStore.removeRemoteStreams(remoteStreamId);
+  const node = document.getElementById(`player_` + remoteStreamId);
+  consola.info({
+    message: `远端流删除:` + node,
+    tag: 'rtc:audio',
+  });
+  if (node) {
+    console.log('node', node);
+  }
+}
+
+function handleStreamUpdated(event) {
+  const remoteStream = event.stream;
+  const userId = remoteStream.getUserId();
+  console.log(
+    `RemoteStream updated: [${userId}] audio:${remoteStream.hasAudio()} video:${remoteStream.hasVideo()}`,
+  );
+}
+
+// const switchDevice = async ({ videoId, audioId }) => {
+//   const rtcStore = useRtcStore();
+//   if (!rtcStore.isJoined) {
+//     return;
+//   }
+//   if (videoId) {
+//     try {
+//       await localStream.switchDevice('video', videoId);
+//     } catch (error) {}
+//   }
+//   if (audioId) {
+//     try {
+//       await localStream.switchDevice('audio', audioId);
+//     } catch (error) {}
+//   }
+// };
+
+export function useRtcSdk() {
+  return {
+    createRTCSocket,
+    // handleJoin,
+    handleLeave,
+    localStream,
+    muteVideoLeader,
+    invitedRemoteStreams,
+    client: localClient,
+    globalVideoEnable,
+  };
+}

src/hooks/useTRTC.ts

@@ -2,8 +2,10 @@ import consola from 'consola';
 import { computed, nextTick, ref, unref } from 'vue';
 import TRTC from 'trtc-js-sdk';
 import type { LocalStream, Client, RemoteStream } from 'trtc-js-sdk';
+
 import { useRtcStore } from '/@/store/modules/rtc';
 // import Dialog from '/@/components/basic/dialog';
+import { createAgoraClient, AgoraClient } from './useAgora';
 import { useI18n } from './useI18n';
 import { useMiniApp } from './useMiniApp';
 import { useRoom } from './useRoom';
@@ -15,8 +17,9 @@ const muteAudioLeader = ref(false);
 const muteVideoLeader = ref(false);
 const { isUsingMiniApp } = useMiniApp();
 const globalVideoEnable = computed(
-  () => Number(import.meta.env.VITE_ENABLE_VIDEO) === 1 && unref(isUsingMiniApp),
+  () => Number(import.meta.env.VITE_ENABLE_VIDEO) === 1 && !unref(isUsingMiniApp),
 );
+console.log('globalVideoEnable', globalVideoEnable);
 
 export const checkDevice = async () => {
   try {
@@ -106,10 +109,19 @@ async function createRTCSocket(): Promise<void> {
   try {
     if (!unref(isUsingMiniApp)) {
       const rtcStore = useRtcStore();
-      await checkSystemRequirements();
-      await checkDevice();
-      console.log('createRTCSocket', rtcStore.videoDeviceId);
-      await handleJoin();
+      const { getSign } = useRoom();
+      // const res = await getSign(rtcStore.userId);
+      const res = await getSign(rtcStore.userId, rtcStore.roomId, rtcStore.role);
+      console.warn('web rtc入口', res);
+      const { sign, operatorType, sdkAppId } = res;
+      if (operatorType === 1) {
+        const client = await createAgoraClient(
+          String(sdkAppId),
+          rtcStore.roomId,
+          sign,
+          rtcStore.userId,
+        );
+      }
     } else {
       console.log('小程序关闭rtc入口');
     }
@@ -120,17 +132,15 @@ async function createRTCSocket(): Promise<void> {
     });
   }
 }
-async function handleJoin() {
+async function handleTXJoin(sign: string, sdkAppId: number) {
   const rtcStore = useRtcStore();
   try {
-    const { getSign } = useRoom();
-    const res = await getSign(rtcStore.userId);
-    console.warn('sign', res);
+    // console.warn('sign', res);
     localClient = TRTC.createClient({
       mode: 'rtc',
-      sdkAppId: res.sdkAppId || parseInt(rtcStore.sdkAppId, 10),
+      sdkAppId: sdkAppId || parseInt(rtcStore.sdkAppId, 10),
       userId: rtcStore.userId,
-      userSig: res.sign || rtcStore.genUserSig,
+      userSig: sign || rtcStore.genUserSig,
       useStringRoomId: true,
       enableAutoPlayDialog: false,
     });
@@ -525,7 +535,7 @@ function handleStreamUpdated(event) {
 export function useRtcSdk() {
   return {
     createRTCSocket,
-    handleJoin,
+    // handleJoin,
     handleLeave,
     localStream,
     muteVideoLeader,