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([]); 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 // } 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 { 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, }; }