daikan-international/src/hooks/useTRTC.ts

import consola from 'consola';
import { nextTick, ref } 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 { useI18n } from './useI18n';

let localClient: Client;
let localStream: LocalStream;
const invitedRemoteStreams = ref<RemoteStream[]>([]);
const muteAudioLeader = ref(false);
const muteVideoLeader = ref(false);

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);
    } else {
      rtcStore.setAudioDeviceId('');
    }

    const camerasItems = await TRTC.getCameras();

    camerasItems.forEach((item) => {
      item['value'] = item.deviceId;
    });
    if (camerasItems?.length) {
      rtcStore.setVideoDeviceId(camerasItems[0].deviceId || camerasItems[0].groupId);
    } 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);
  // if (!isSmallStreamSupported) {
  //   alert('You browser does not support opening small streams.');
  // }
};

// interface UseRtcSdkType {
//     createRTCSocket: () => Promise<void>
// }

async function createLocalStream() {
  try {
    const rtcStore = useRtcStore();
    const enableVideo = rtcStore.isLeader && rtcStore.videoDeviceId.length > 0;
    localStream = TRTC.createStream({
      userId: rtcStore.userId,
      audio: true,
      video: enableVideo,
      microphoneId: rtcStore.audioDeviceId,
    });
    //开大小流
    await localClient.enableSmallStream();
    localClient.setSmallStreamProfile({
      width: 160,
      height: 90,
      bitrate: 100,
      frameRate: 15,
    });
    //
    await localStream.initialize();

    // if (rtcStore.audioMuted) {
    //   localStream.muteAudio();
    // }
  } catch (error) {
    console.log(error, 'createStream');
  }
}

async function createRTCSocket(): Promise<void> {
  try {
    const rtcStore = useRtcStore();
    await checkSystemRequirements();
    await checkDevice();
    console.log('createRTCSocket', rtcStore.videoDeviceId);
    await handleJoin();
  } catch (error) {
    consola.error({
      tag: 'createRTCSocket',
      message: error,
    });
  }
}
async function handleJoin() {
  try {
    // let res = await apis.getSign({ userId: store.getters["rtc/userId"] });
    const rtcStore = useRtcStore();
    localClient = TRTC.createClient({
      mode: 'rtc',
      sdkAppId: parseInt(rtcStore.sdkAppId, 10),
      userId: rtcStore.userId,
      userSig: rtcStore.genUserSig,
      useStringRoomId: true,
      enableAutoPlayDialog: false,
    });
    installEventHandlers();

    await localClient.join({ roomId: rtcStore.roomId });
    // store.commit("rtc/setIsJoined", true);
    rtcStore.setIsJoined(true);
    // inviteLink.value = store.commit("rtc/createShareLink");
  } catch (error) {
    console.error(error, 'error-----------');
  }

  await createLocalStream();
  await handlePublish();
  localStream
    .play('local')
    .then(() => {
      consola.info({
        message: '音采源',
        tag: 'rtc:audio',
      });
    })
    .catch((error) => {
      console.log(localStream, error);
    });

  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.publish(localStream);
    // store.commit("rtc/setIsPublished", true);
    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('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`);
  if (event.userId.indexOf('leader') > -1) {
    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`);
  if (event.userId.indexOf('leader') > -1) {
    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();
  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: `RemoteStream removed: [${userId},${remoteStreamId}]`,
    tag: 'rtc:audio',
  });
  const rtcStore = useRtcStore();
  rtcStore.removeRemoteStreams(remoteStreamId);
}

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,
    invitedRemoteStreams,
    client: localClient,
  };
}