update

.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

.env.home.test

@@ -23,4 +23,4 @@ VITE_ROOM_MEMBER=5
 VITE_SHOW_CONSOLE=1
 VITE_SHOW_DEBUGPANEL=1
 VITE_TEST_VERSION =20230111
-VITE_ENABLE_VIDEO=0
+VITE_ENABLE_VIDEO=1

src/components/chatRoom/camera.vue

@@ -1,13 +1,16 @@
 <template>
-  <!-- v-show="
+  <div
+    :id="cameraBoxId"
+    class="camera_box"
+    v-show="
       isLeader &&
       isRTCJoined &&
       isPanoramaMode &&
-      !muteVideoLeader &&
       hosterhasVideo &&
-      globalVideoEnable
-    " -->
-  <div :id="cameraBoxId" class="camera_box">
+      globalVideoEnable &&
+      !muteVideoLeader
+    "
+  >
     <!--  -->
     <span class="micBox">
       <i class="speak_mic" v-if="!roomLeader?.IsMuted"></i>
@@ -15,6 +18,7 @@
     </span>
   </div>
   <!-- :id="cameraRemoteBoxId" -->
+  <!-- muteVideoLeader：{{ muteVideoLeader }} -->
   <div
     id="cameraRemoteBox"
     class="camera_box"
@@ -24,7 +28,6 @@
       roomLeader &&
       isPanoramaMode &&
       !muteVideoLeader &&
-      remoteStreams.length > 0 &&
       globalVideoEnable
     "
   >
@@ -35,15 +38,14 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { computed, onMounted, unref, watch } from 'vue';
+  import { computed, onMounted } from 'vue';
   import { useAppStore } from '/@/store/modules/app';
   import { useRtcSdk } from '/@/hooks/useTRTC';
   import { useRtcStore } from '/@/store/modules/rtc';
 
   const rtcStore = useRtcStore();
   const appStore = useAppStore();
-  // const destination = computed(() => (rtcStore.isLeader ? '.local' : '.remote'));
-  // const isPublished = computed(() => rtcStore.isPublished);
+
   const isRTCJoined = computed(() => rtcStore.isRTCJoined);
   const isLeader = computed(() => rtcStore.isLeader);
   const roomLeader = computed(() => rtcStore.getRoomLeader());
@@ -51,25 +53,18 @@
   // const cameraRemoteBoxId = computed(() => 'camera_remote_box_' + rtcStore.userId);
   const isPanoramaMode = computed(() => appStore.mode === 'panorama');
   const { muteVideoLeader, globalVideoEnable } = useRtcSdk();
-  const hosterhasVideo = computed(() => rtcStore.videoDeviceId?.length > 0);
-  const remoteStreams = computed(() => rtcStore.remoteStreams);
-  console.log('hosterhasVideo', unref(hosterhasVideo));
-  onMounted(() => {
-    watch(
-      () => remoteStreams,
-      (val) => {
-        console.log('远流:', unref(val));
-      },
-      { deep: true, immediate: true },
-    );
-  });
+  const hosterhasVideo = computed(() => rtcStore.isHasCamera);
+
+  // const remoteStreams = computed(() => rtcStore.remoteStreams);
+  // console.log('hosterhasVideo', unref(hosterhasVideo));
+  onMounted(() => {});
 </script>
 <style lang="scss">
   .camera_box {
     width: 1.94rem;
     height: 1.94rem;
     position: fixed;
-    top: 1.29rem;
+    top: 1.59rem;
     left: 0.53rem;
     overflow: hidden;
     z-index: 10000;

src/components/chatRoom/controls/actions.ts

@@ -308,12 +308,11 @@ const handleUserMuted = (UserId?: string, muted?: boolean) => {
     // console.log('audio::status', UserId, muted);
     setTimeout(() => {
       console.log('被禁人状态-->', UserId, muted);
-      const { localStream } = useRtcSdk();
+      const { unMutedAudio, mutedAudio } = useRtcSdk();
       if (muted) {
-        console.log('被禁人状态-->', localStream);
-        localStream && localStream.muteAudio();
+        mutedAudio();
       } else {
-        localStream && localStream.unmuteAudio();
+        unMutedAudio();
       }
     }, 500);
   }

src/components/chatRoom/index.vue

@@ -256,7 +256,7 @@
   const selfRoomStatus = computed(() => rtcStore.getSelfRoomStatus());
   const audioMuted = computed(() => unref(selfRoomStatus)?.IsMuted);
   const { globalVideoEnable } = useRtcSdk();
-  const hosterhasVideo = computed(() => rtcStore.videoDeviceId?.length > 0);
+  const hosterhasVideo = computed(() => rtcStore.isHasCamera);
   const { isUsingMiniApp } = useMiniApp();
   const { muteVideoLeader } = useRtcSdk();
   let roomCounter = ref(-1);
@@ -330,8 +330,8 @@
 
     const socket = createSocket();
     initSocketEvent(socket);
-    const { createRTCSocket } = useRtcSdk();
-    await createRTCSocket();
+    const { initRtcSDK } = useRtcSdk();
+    initRtcSDK();
     callback && callback();
   };
   console.log('initParams', rtcStore.userId);
@@ -528,7 +528,7 @@
   };
 
   const handleNoMute = () => {
-    const { localStream } = useRtcSdk();
+    const { unMutedAudio } = useRtcSdk();
     const { socket } = useSocket();
     // console.log('localStream', localStream);
     console.log('开启MIC');
@@ -537,22 +537,23 @@
       muted: false,
       userId: rtcStore.userId,
     });
-    localStream && localStream.resume();
+    // localStream && localStream.resume();
+    unMutedAudio();
     rtcStore.unmute();
-    localStream && localStream.unmuteAudio();
+    // localStream && localStream.unmuteAudio();
   };
   const handleMute = () => {
-    const { localStream } = useRtcSdk();
+    const { mutedAudio } = useRtcSdk();
     const { socket } = useSocket();
     socket.emit('action', {
       type: 'users-muted',
       muted: true,
       userId: rtcStore.userId,
     });
-    console.log('localStream', localStream);
+
     console.log('关闭MIC');
     rtcStore.mute();
-    localStream && localStream.muteAudio();
+    mutedAudio();
   };
 
   const handleCloseRoom = async () => {
@@ -608,7 +609,7 @@
     changeScene(unref(scene));
   };
   const handleHideCamera = () => {
-    const { localStream, muteVideoLeader } = useRtcSdk();
+    const { muteVideo, muteVideoLeader } = useRtcSdk();
     const { socket } = useSocket();
     muteVideoLeader.value = true;
     socket.emit('action', {
@@ -618,10 +619,10 @@
         userId: rtcStore.userId,
       },
     });
-    localStream && localStream.muteVideo();
+    muteVideo();
   };
   const handleShowCamera = () => {
-    const { localStream, muteVideoLeader } = useRtcSdk();
+    const { muteVideoLeader, unMuteVideo } = useRtcSdk();
     const { socket } = useSocket();
     if (!unref(isUsingMiniApp)) {
       socket.emit('action', {
@@ -631,7 +632,8 @@
           userId: rtcStore.userId,
         },
       });
-      localStream && localStream.unmuteVideo();
+      // localStream && localStream.unmuteVideo();
+      unMuteVideo();
       muteVideoLeader.value = false;
     }
   };
@@ -639,8 +641,8 @@
     showPasswordDialog.value = false;
     const socket = createSocket();
     initSocketEvent(socket);
-    const { createRTCSocket } = useRtcSdk();
-    await createRTCSocket();
+    const { initRtcSDK } = useRtcSdk();
+    initRtcSDK();
     appStore.setPasswordConfirm(true);
   };
   const handleDetail = () => {

src/hooks/useAgora.ts

@@ -1,38 +1,104 @@
 // argora
-import AgoraRTC, { IAgoraRTCClient } from 'agora-rtc-sdk-ng';
-
+import AgoraRTC, { IAgoraRTCClient, ILocalAudioTrack, ILocalVideoTrack } from 'agora-rtc-sdk-ng';
+import { useRtcStore } from '/@/store/modules/rtc';
 export type AgoraClient = IAgoraRTCClient;
+export { ILocalAudioTrack, ILocalVideoTrack } from 'agora-rtc-sdk-ng';
+import { useRtcSdk } from './useTRTC';
+
+export let localAudioTrack: ILocalAudioTrack;
+export let localVideoTrack: ILocalVideoTrack;
 export const createAgoraClient = async (
   sdkAppId: string,
   roomId: string,
   sign: string,
   userId: string,
 ): Promise<IAgoraRTCClient> => {
-  const client: IAgoraRTCClient = AgoraRTC.createClient({ mode: 'rtc', codec: 'vp8' });
+  const rtcStore = useRtcStore();
+  const { muteVideoLeader } = useRtcSdk();
+  const client: IAgoraRTCClient = AgoraRTC.createClient({ mode: 'rtc', codec: 'vp9' });
   const uid = await client.join(String(sdkAppId), roomId, sign, userId);
-  console.log('uid', uid);
+  console.log('client', uid, client);
 
+  client.on('volume-indicator', function (result) {
+    result.forEach(function (volume, index) {
+      console.warn(`${index} UID ${volume.uid} Level ${volume.level}`);
+    });
+  });
+  client.on('exception', (error) => {
+    console.error(error);
+  });
+  client.on('user-joined', (user) => {
+    console.log('userJoin', user);
+  });
+  client.on('user-info-updated', (user) => {
+    console.log('userJoin', user);
+  });
+  client.on('user-unpublished', async (user, mediaType) => {
+    if (mediaType === 'audio') {
+      console.error('unpublished', user);
+    }
+    if (mediaType === 'video') {
+      // console.error('unpublished', user);
+      //暂时只有leader有video
+      muteVideoLeader.value = true;
+    }
+  });
   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);
+      console.error('subscribe video success', user);
+      const remoteVideoEl = document.getElementById(`cameraRemoteBox`);
+      if (user.videoTrack && remoteVideoEl) {
+        // remoteVideoEl.style.display = 'block';
+        console.warn('video play');
+        user.videoTrack.play(remoteVideoEl);
+        muteVideoLeader.value = false;
       }
-      //   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]);
+  const isHasCamera = (await AgoraRTC.getCameras()).length > 0;
+  localAudioTrack = await AgoraRTC.createMicrophoneAudioTrack();
+  localVideoTrack = await AgoraRTC.createCameraVideoTrack();
+  const localVideoEl = document.getElementById(`camera_box_${userId}`);
+  //
+  if (rtcStore.role === 'leader') {
+    console.warn('isHasCamera', isHasCamera);
 
+    if (isHasCamera) {
+      rtcStore.setHasCamera();
+      if (localVideoEl) {
+        localVideoTrack.play(localVideoEl);
+      }
+      await client.publish([localAudioTrack, localVideoTrack]);
+    } else {
+      await client.publish([localAudioTrack]);
+    }
+  } else {
+    await client.publish([localAudioTrack]);
+  }
+  localAudioTrack.setMuted(true);
+  rtcStore.setIsRTCJoined(true);
   return client;
 };
+export const muteVideo = () => {
+  //通用开音方法
+  localVideoTrack.setMuted(true);
+};
+export const unMuteVideo = () => {
+  localVideoTrack.setMuted(false);
+};
+
+export const mutedAudio = () => {
+  //通用禁音方法
+  console.error('mutedAudio');
+  localAudioTrack.setMuted(true);
+};
+export const unMutedAudio = () => {
+  //通用开音方法
+  console.error('unMutedAudio');
+  localAudioTrack.setMuted(false);
+};

src/hooks/useRoom.ts

@@ -177,7 +177,7 @@ export const getSign = async (
   channelName: string,
   roleId: string,
 ): Promise<getSignType> => {
-  let role = 0;
+  let role = 2;
   if (roleId === 'leader') {
     role = 1;
   }

src/hooks/useTRTC.ts

@@ -1,126 +1,66 @@
 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 { computed, ref, unref } from 'vue';
+// import TRTC from 'trtc-js-sdk';
+import type { Client } 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 {
+  createAgoraClient,
+  AgoraClient,
+  unMutedAudio as argoraUnMutedAudio,
+  mutedAudio as argoraMutedAudio,
+  unMuteVideo as argoraUnMuteVideo,
+  muteVideo as argoraMuteVideo,
+} from './useAgora';
+// 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);
+let localClient: Client | AgoraClient;
+// let localAudio: ILocalAudioTrack | LocalStream;
+const sdkType = ref(0);
+
+// const muteAudioLeader = ref(false);
 const muteVideoLeader = ref(false);
 const { isUsingMiniApp } = useMiniApp();
 const globalVideoEnable = computed(
   () => Number(import.meta.env.VITE_ENABLE_VIDEO) === 1 && !unref(isUsingMiniApp),
 );
-console.log('globalVideoEnable', globalVideoEnable);
-
-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);
-};
+//rtc- 腾讯云与声网结合
+// console.log('getCameras', await AgoraRTC.getCameras());
 
-// interface UseRtcSdkType {
-//     createRTCSocket: () => Promise<void>
-// }
+// const isInitRTC = computed(() => useRtcStore().isInitRTC);
 
-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 initRtcSDK(): Promise<void> {
+  // debugger;
+  createRTCSocket();
+  // watchEffect(() => {
+  //   if (isInitRTC.value) {
+  //
+  //   }
+  // });
 }
 
 async function createRTCSocket(): Promise<void> {
   try {
     if (!unref(isUsingMiniApp)) {
-      const rtcStore = useRtcStore();
       const { getSign } = useRoom();
+      const rtcStore = useRtcStore();
       // 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(
+      sdkType.value = Number(operatorType);
+      if (Number(operatorType) === 1) {
+        localClient = await createAgoraClient(
           String(sdkAppId),
           rtcStore.roomId,
           sign,
           rtcStore.userId,
         );
+      } else if (operatorType === 0) {
+        //腾讯云
       }
     } else {
       console.log('小程序关闭rtc入口');
@@ -132,414 +72,47 @@ async function createRTCSocket(): Promise<void> {
     });
   }
 }
-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_}`);
-    });
+const handleLeave = () => {
+  //通用离开方法
+  localClient.leave();
+};
+const mutedAudio = () => {
+  //通用禁音方法
+  if (sdkType.value === 1) {
+    argoraMutedAudio();
   }
-}
-
-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;
+  //通用离开方法
+};
+const unMutedAudio = () => {
+  //通用开音方法
+  if (sdkType.value === 1) {
+    argoraUnMutedAudio();
   }
-
-  if (!rtcStore.isIdInRemoteStream(remoteId)) {
-    consola.info({
-      message: remoteId,
-      tag: 'rtc:audio',
-    });
-    rtcStore.pushRemoteStreams(remoteStream);
-    // debugger
+};
+const muteVideo = () => {
+  //通用开音方法
+  if (sdkType.value === 1) {
+    argoraMuteVideo();
   }
-  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);
+  muteVideoLeader.value = true;
+};
+const unMuteVideo = () => {
+  //通用开音方法
+  if (sdkType.value === 1) {
+    argoraUnMuteVideo();
   }
-}
-
-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) {}
-//   }
-// };
+  muteVideoLeader.value = false;
+};
 
 export function useRtcSdk() {
   return {
-    createRTCSocket,
-    // handleJoin,
+    initRtcSDK,
     handleLeave,
-    localStream,
+    mutedAudio,
+    unMutedAudio,
+    muteVideo,
+    unMuteVideo,
     muteVideoLeader,
-    invitedRemoteStreams,
     client: localClient,
     globalVideoEnable,
   };

src/store/modules/rtc.ts

@@ -14,10 +14,6 @@ interface RtcState {
   role: 'leader' | 'customer';
   secretKey: string;
   userSig: string;
-  audioDeviceId: string;
-  videoDeviceId: string;
-  cameraList: MediaDeviceInfo[];
-  microphoneList: MediaDeviceInfo[];
   logs: any[];
   isJoined: boolean;
   isRTCJoined: boolean;
@@ -25,7 +21,6 @@ interface RtcState {
   assistant: boolean;
   isShared: boolean;
   remoteStreams: RemoteStream[];
-  // invitedRemoteStreams: any[],
   avatar: Nullable<string>;
   nickname: string;
   mode: string;
@@ -39,11 +34,7 @@ interface RtcState {
   baseDiaLogCallback?: () => void;
   connectStatus: number;
   isHosterOnline: boolean;
-}
-
-interface DeviceListParams {
-  cameraItems: MediaDeviceInfo[];
-  microphoneItems: MediaDeviceInfo[];
+  hasCamera: boolean; //
 }
 
 export interface ChatContentType {
@@ -122,19 +113,15 @@ export const useRtcStore = defineStore({
     roomId: '',
     role: 'customer',
     secretKey: '7500f8938c46c5d3c64621ae7826905eec9723bf218fbcf121242e056a4ee14f',
-    userSig:
-      'eJwtzcsOgjAQBdB-6RaDU2jLI3EhsrHRBdGNK2Po0IyvNAWJxvjvEmA5597c*bLj7hD26FnOohDYYrzJ4LOjhkZ*tejPd7wY9EJwnsV8brXmdnGODMu5AEggExBNSUcPHFQpnkopIJkU34784ApECjBvkB1e8MLJfWyLOAis06Wut4b0tVdL77RVTb35dGXby6o6rVfs9wdhLDRy',
-    audioDeviceId: '',
-    videoDeviceId: '',
-    cameraList: [],
-    microphoneList: [],
+    userSig: '',
+    // userSig:
+    //   'eJwtzcsOgjAQBdB-6RaDU2jLI3EhsrHRBdGNK2Po0IyvNAWJxvjvEmA5597c*bLj7hD26FnOohDYYrzJ4LOjhkZ*tejPd7wY9EJwnsV8brXmdnGODMu5AEggExBNSUcPHFQpnkopIJkU34784ApECjBvkB1e8MLJfWyLOAis06Wut4b0tVdL77RVTb35dGXby6o6rVfs9wdhLDRy',
     logs: [],
     isJoined: false,
     isRTCJoined: false,
     isPublished: false,
     isShared: false,
     remoteStreams: [],
-    // invitedRemoteStreams: [],
     avatar: null,
     mode: '',
     chatList: [],
@@ -147,6 +134,7 @@ export const useRtcStore = defineStore({
     connectStatus: 0,
     isHosterOnline: true,
     assistant: false,
+    hasCamera: false,
   }),
   persist: [
     {
@@ -159,6 +147,9 @@ export const useRtcStore = defineStore({
     },
   ],
   getters: {
+    isHasCamera(): boolean {
+      return this.hasCamera;
+    },
     checkUserInMemberList() {
       return (userId: string) => this.memberList.find((item) => item.UserId === userId);
     },
@@ -247,19 +238,6 @@ export const useRtcStore = defineStore({
       this.role = payload;
     },
 
-    setDeviceList(payload: DeviceListParams) {
-      this.cameraList = payload.cameraItems;
-      this.microphoneList = payload.microphoneItems;
-    },
-
-    setVideoDeviceId(payload: string) {
-      this.videoDeviceId = payload;
-    },
-
-    setAudioDeviceId(payload: string) {
-      this.audioDeviceId = payload;
-    },
-
     setIsJoined(payload: boolean) {
       this.isJoined = payload;
       console.log('setIsJoined', payload);
@@ -356,5 +334,8 @@ export const useRtcStore = defineStore({
     setHosterOnline(status: boolean) {
       this.isHosterOnline = status;
     },
+    setHasCamera() {
+      this.hasCamera = true;
+    },
   },
 });