|
|
@@ -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,
|
|
|
+ };
|
|
|
+}
|
gemercheung