From 31eb6a4ba7c802bea56f9f730522f10c627cae8b Mon Sep 17 00:00:00 2001 From: yj <1336058017@qq.com> Date: Wed, 28 Aug 2024 10:58:17 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E4=BC=9A=E8=AE=AE=E7=9B=91=E6=8E=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- preload.js | 12 ++- src/components/JoinSetting/index.tsx | 2 +- src/components/StupWizard/index.tsx | 2 +- src/page/Meeting/index.tsx | 110 ++++++++++++++++----------- src/render.d.ts | 3 +- src/utils/package/agora.ts | 8 +- 6 files changed, 82 insertions(+), 55 deletions(-) diff --git a/preload.js b/preload.js index 22ec5f6..8b40b5d 100644 --- a/preload.js +++ b/preload.js @@ -1,7 +1,7 @@ // // 在 preload 脚本中。 const { default: createAgoraRtcEngine } = require('agora-electron-sdk') const { ipcRenderer } = require('electron') -let rtcEngine = createAgoraRtcEngine() +let rtcEngine; window.electron = { // 设置窗口大小 setMainWindowSize: (config) => { @@ -71,7 +71,15 @@ window.electron = { closeMonitorWindow: () => { ipcRenderer.invoke('closeMonitorWindow') }, - getrtcEngine: () => { + // 获取rtcEngine + getRtcEngine: () => { return rtcEngine }, + // 设置rtcEngine + setRtcEngine: () => { + rtcEngine = createAgoraRtcEngine(); + rtcEngine.initialize({ + appId: 'dcfc466a6ecb4a1f972630065dfb1e75', + }); + }, } diff --git a/src/components/JoinSetting/index.tsx b/src/components/JoinSetting/index.tsx index 08ff77e..7f2d635 100644 --- a/src/components/JoinSetting/index.tsx +++ b/src/components/JoinSetting/index.tsx @@ -150,7 +150,7 @@ const JoinSetting = forwardRef((_props: any, ref: any) => { setJoinRoomSettingForm(list) if (index === 1) { if (list[index].active) { - agora.startPreview('videoPreview', Number(user.account)) + agora.startPreview('videoPreview', Number(user.screenShareId)) } } } else { diff --git a/src/components/StupWizard/index.tsx b/src/components/StupWizard/index.tsx index c3dd6d8..45de259 100644 --- a/src/components/StupWizard/index.tsx +++ b/src/components/StupWizard/index.tsx @@ -166,7 +166,7 @@ const VideoComponents = () => { }) if (setting.videoDeviceId && list.length) { await agora.setVideoDeviceManager(setting.videoDeviceId) - await agora.startPreview('videoPreview', Number(userInfo.account)) + await agora.startPreview('videoPreview', Number(userInfo.screenShareId)) } }) } diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx index 2b13469..e152d43 100644 --- a/src/page/Meeting/index.tsx +++ b/src/page/Meeting/index.tsx @@ -85,13 +85,13 @@ const Meeting: React.FC = () => { active: false, select: false, }, - // { - // title: '会议监控', - // icon: ImageUrl.icon48, - // iconSelect: ImageUrl.icon48Select, - // active: false, - // select: false, - // }, + { + title: '会议监控', + icon: ImageUrl.icon48, + iconSelect: ImageUrl.icon48Select, + active: false, + select: false, + }, { title: '录制', icon: ImageUrl.icon27, @@ -188,48 +188,54 @@ const Meeting: React.FC = () => { agora.init(true) agora.registerEventHandler({ onJoinChannelSuccess: async (info: any, _elapsed: any) => { - if (String(info.localUid).length !== 9) { - await getJoin(state.enableMicr, state.enableCamera) - setTimeout(async () => { - await agora.setupLocalVideo({ - uid: Number(info.localUid), - view: document.getElementById(`video-${info.localUid}`), - channelId: info.channelId, - sourceType: VideoSourceType.VideoSourceCameraPrimary, - }) - getShowUser(); - }, 1000); + if (info.channelId === state.channelId) { + if (String(info.localUid).length !== 9) { + await getJoin(state.enableMicr, state.enableCamera) + setTimeout(async () => { + await agora.setupLocalVideo({ + uid: Number(info.localUid), + view: document.getElementById(`video-${info.localUid}`), + channelId: info.channelId, + sourceType: VideoSourceType.VideoSourceCameraPrimary, + }) + getShowUser(); + }, 1000); + } } }, onUserJoined: async (info: any, remoteUid: any, _elapsed: any) => { - if (String(remoteUid).length === 9) { - setIsShare(remoteUid) - } else { - setTimeout(async () => { - await agora.setupRemoteVideoJoin({ - uid: Number(remoteUid), - view: document.getElementById(`video-${remoteUid}`), - channelId: info.channelId, - }) - }, 1000); + if (info.channelId === state.channelId) { + if (String(remoteUid).length === 9) { + setIsShare(remoteUid) + } else { + setTimeout(async () => { + await agora.setupRemoteVideoJoin({ + uid: Number(remoteUid), + view: document.getElementById(`video-${remoteUid}`), + channelId: info.channelId, + }) + }, 1000); + } } }, onUserOffline: async (info: any, remoteUid: any, _reason: any) => { - if (String(remoteUid).length === 9) { - setIsShare(null) - renderVideo() - } - await agora.setupRemoteVideo({ - uid: Number(remoteUid), - view: null, - channelId: info.channelId, - }); - setCurrentVideoId((res: any) => { - if (Number(res) === remoteUid) { - getShowUser(); + if (info.channelId === state.channelId) { + if (String(remoteUid).length === 9) { + setIsShare(null) + renderVideo() } - return res - }) + await agora.setupRemoteVideo({ + uid: Number(remoteUid), + view: null, + channelId: info.channelId, + }); + setCurrentVideoId((res: any) => { + if (Number(res) === remoteUid) { + getShowUser(); + } + return res + }) + } }, onAudioVolumeIndication: async (speakers: any) => { speakers.forEach((item: any) => { @@ -241,11 +247,15 @@ const Meeting: React.FC = () => { }); } }) - agora.startCameraCapture() + if (state.enableCamera) { + agora.startCameraCapture() + } agora.setJoinChannel({ channelId: state.channelId, uid: userInfo.uid, + screenShareId: userInfo.screenShareId, token: state.token, + tokenA: state.tokenA, }) storage.setItem('noViewChatList', 0) window.addEventListener('customStorageChange', handleCustomStorageChange); @@ -465,6 +475,18 @@ const Meeting: React.FC = () => { pauseOnHover: false, }); break; + // 管理员查看随机用户 + case 'Watch': + if (userInfo.roleId !== '1') { + let userId = item.watchUids.find((uid: any) => uid === userInfo.uid) + if (userId) { + await agora.startCameraCapture() + } else { + await agora.stopCameraCapture(); + } + agora.updateChannelMediaOptionsEx(userId ? true : false) + } + break; } }) return () => { @@ -915,7 +937,7 @@ const Meeting: React.FC = () => { break; case '会议监控': window.electron.oepnWindow({ - url: location.origin + '/#/userVideo' + url: location.origin + `/#/userVideo?channelId=${state.channelId + '1'}&token=${state.tokenA}` }) break; } diff --git a/src/render.d.ts b/src/render.d.ts index 21b4071..928afe2 100644 --- a/src/render.d.ts +++ b/src/render.d.ts @@ -16,8 +16,9 @@ export interface IElectronAPI { quitAndInstall: (callBack: Function) => void; getVersion: () => Promise; oepnWindow: (data: any) => any; + getRtcEngine: () => any; + setRtcEngine: () => any; - getrtcEngine: () => any; closeMonitorWindow: () => void } diff --git a/src/utils/package/agora.ts b/src/utils/package/agora.ts index 0fe2c60..a613d13 100644 --- a/src/utils/package/agora.ts +++ b/src/utils/package/agora.ts @@ -1,5 +1,4 @@ import { - createAgoraRtcEngine, ClientRoleType, VideoSourceType, VideoViewSetupMode, @@ -10,7 +9,6 @@ import { import { GetRoomRtcToken } from "@/api/Home/Index"; import { storage } from '@/utils'; const option: any = { - appId: 'dcfc466a6ecb4a1f972630065dfb1e75', token: '', tokenA: '', channelId: '', @@ -21,10 +19,8 @@ let rtcEngine: any = ''; export const agora = { // 初始化 init: async (bool: boolean = false) => { - rtcEngine = createAgoraRtcEngine(); - await rtcEngine.initialize({ - appId: option.appId, - }); + await window.electron.setRtcEngine() + rtcEngine = window.electron.getRtcEngine() await agora.setDeviceManager(bool) }, // 获取rtcEngine -- 2.40.1 From 4db08762d9dfba2545379f851033752809fbfb0c Mon Sep 17 00:00:00 2001 From: yj <1336058017@qq.com> Date: Wed, 28 Aug 2024 11:12:57 +0800 Subject: [PATCH 2/3] =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/page/Meeting/index.tsx | 148 +++++++++++++++++++------------------ 1 file changed, 76 insertions(+), 72 deletions(-) diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx index e152d43..76b98b9 100644 --- a/src/page/Meeting/index.tsx +++ b/src/page/Meeting/index.tsx @@ -185,78 +185,7 @@ const Meeting: React.FC = () => { } }, 1000) setMeetingMode('StandardMode'); - agora.init(true) - agora.registerEventHandler({ - onJoinChannelSuccess: async (info: any, _elapsed: any) => { - if (info.channelId === state.channelId) { - if (String(info.localUid).length !== 9) { - await getJoin(state.enableMicr, state.enableCamera) - setTimeout(async () => { - await agora.setupLocalVideo({ - uid: Number(info.localUid), - view: document.getElementById(`video-${info.localUid}`), - channelId: info.channelId, - sourceType: VideoSourceType.VideoSourceCameraPrimary, - }) - getShowUser(); - }, 1000); - } - } - }, - onUserJoined: async (info: any, remoteUid: any, _elapsed: any) => { - if (info.channelId === state.channelId) { - if (String(remoteUid).length === 9) { - setIsShare(remoteUid) - } else { - setTimeout(async () => { - await agora.setupRemoteVideoJoin({ - uid: Number(remoteUid), - view: document.getElementById(`video-${remoteUid}`), - channelId: info.channelId, - }) - }, 1000); - } - } - }, - onUserOffline: async (info: any, remoteUid: any, _reason: any) => { - if (info.channelId === state.channelId) { - if (String(remoteUid).length === 9) { - setIsShare(null) - renderVideo() - } - await agora.setupRemoteVideo({ - uid: Number(remoteUid), - view: null, - channelId: info.channelId, - }); - setCurrentVideoId((res: any) => { - if (Number(res) === remoteUid) { - getShowUser(); - } - return res - }) - } - }, - onAudioVolumeIndication: async (speakers: any) => { - speakers.forEach((item: any) => { - let dom = document.getElementById(`micr-${item.uid ? item.uid : userInfo.uid}`); - if (dom) { - const percentage = (item.volume / 255) * 100 - dom.style.width = `${percentage}%` - } - }); - } - }) - if (state.enableCamera) { - agora.startCameraCapture() - } - agora.setJoinChannel({ - channelId: state.channelId, - uid: userInfo.uid, - screenShareId: userInfo.screenShareId, - token: state.token, - tokenA: state.tokenA, - }) + agoraInit() storage.setItem('noViewChatList', 0) window.addEventListener('customStorageChange', handleCustomStorageChange); window.addEventListener('online', handleNetworkChange); @@ -542,6 +471,81 @@ const Meeting: React.FC = () => { return () => clearTimeout(timer); }, [isClicked]); + // 声网初始化 + const agoraInit = async () => { + await agora.init(true) + agora.registerEventHandler({ + onJoinChannelSuccess: async (info: any, _elapsed: any) => { + if (info.channelId === state.channelId) { + if (String(info.localUid).length !== 9) { + await getJoin(state.enableMicr, state.enableCamera) + setTimeout(async () => { + await agora.setupLocalVideo({ + uid: Number(info.localUid), + view: document.getElementById(`video-${info.localUid}`), + channelId: info.channelId, + sourceType: VideoSourceType.VideoSourceCameraPrimary, + }) + getShowUser(); + }, 1000); + } + } + }, + onUserJoined: async (info: any, remoteUid: any, _elapsed: any) => { + if (info.channelId === state.channelId) { + if (String(remoteUid).length === 9) { + setIsShare(remoteUid) + } else { + setTimeout(async () => { + await agora.setupRemoteVideoJoin({ + uid: Number(remoteUid), + view: document.getElementById(`video-${remoteUid}`), + channelId: info.channelId, + }) + }, 1000); + } + } + }, + onUserOffline: async (info: any, remoteUid: any, _reason: any) => { + if (info.channelId === state.channelId) { + if (String(remoteUid).length === 9) { + setIsShare(null) + renderVideo() + } + await agora.setupRemoteVideo({ + uid: Number(remoteUid), + view: null, + channelId: info.channelId, + }); + setCurrentVideoId((res: any) => { + if (Number(res) === remoteUid) { + getShowUser(); + } + return res + }) + } + }, + onAudioVolumeIndication: async (speakers: any) => { + speakers.forEach((item: any) => { + let dom = document.getElementById(`micr-${item.uid ? item.uid : userInfo.uid}`); + if (dom) { + const percentage = (item.volume / 255) * 100 + dom.style.width = `${percentage}%` + } + }); + } + }) + if (state.enableCamera) { + agora.startCameraCapture() + } + agora.setJoinChannel({ + channelId: state.channelId, + uid: userInfo.uid, + screenShareId: userInfo.screenShareId, + token: state.token, + tokenA: state.tokenA, + }) + } // 状态更新 const changeAgoraDevice = () => { setRoomUserList((res: any) => { -- 2.40.1 From 734dc7a41a911fc89aaa6ce0c59fd159a7bed9f3 Mon Sep 17 00:00:00 2001 From: yj <1336058017@qq.com> Date: Wed, 28 Aug 2024 13:37:30 +0800 Subject: [PATCH 3/3] =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- preload.js | 15 +-------------- src/page/Meeting/index.tsx | 2 +- src/render.d.ts | 2 -- src/utils/package/agora.ts | 8 ++++++-- 4 files changed, 8 insertions(+), 19 deletions(-) diff --git a/preload.js b/preload.js index 8b40b5d..5fa46a0 100644 --- a/preload.js +++ b/preload.js @@ -1,7 +1,5 @@ // // 在 preload 脚本中。 -const { default: createAgoraRtcEngine } = require('agora-electron-sdk') const { ipcRenderer } = require('electron') -let rtcEngine; window.electron = { // 设置窗口大小 setMainWindowSize: (config) => { @@ -70,16 +68,5 @@ window.electron = { // 关闭会议监控窗口 closeMonitorWindow: () => { ipcRenderer.invoke('closeMonitorWindow') - }, - // 获取rtcEngine - getRtcEngine: () => { - return rtcEngine - }, - // 设置rtcEngine - setRtcEngine: () => { - rtcEngine = createAgoraRtcEngine(); - rtcEngine.initialize({ - appId: 'dcfc466a6ecb4a1f972630065dfb1e75', - }); - }, + } } diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx index 76b98b9..ae4bf99 100644 --- a/src/page/Meeting/index.tsx +++ b/src/page/Meeting/index.tsx @@ -543,7 +543,7 @@ const Meeting: React.FC = () => { uid: userInfo.uid, screenShareId: userInfo.screenShareId, token: state.token, - tokenA: state.tokenA, + // tokenA: state.tokenA, }) } // 状态更新 diff --git a/src/render.d.ts b/src/render.d.ts index 928afe2..e0a5232 100644 --- a/src/render.d.ts +++ b/src/render.d.ts @@ -16,8 +16,6 @@ export interface IElectronAPI { quitAndInstall: (callBack: Function) => void; getVersion: () => Promise; oepnWindow: (data: any) => any; - getRtcEngine: () => any; - setRtcEngine: () => any; closeMonitorWindow: () => void } diff --git a/src/utils/package/agora.ts b/src/utils/package/agora.ts index a613d13..0fe2c60 100644 --- a/src/utils/package/agora.ts +++ b/src/utils/package/agora.ts @@ -1,4 +1,5 @@ import { + createAgoraRtcEngine, ClientRoleType, VideoSourceType, VideoViewSetupMode, @@ -9,6 +10,7 @@ import { import { GetRoomRtcToken } from "@/api/Home/Index"; import { storage } from '@/utils'; const option: any = { + appId: 'dcfc466a6ecb4a1f972630065dfb1e75', token: '', tokenA: '', channelId: '', @@ -19,8 +21,10 @@ let rtcEngine: any = ''; export const agora = { // 初始化 init: async (bool: boolean = false) => { - await window.electron.setRtcEngine() - rtcEngine = window.electron.getRtcEngine() + rtcEngine = createAgoraRtcEngine(); + await rtcEngine.initialize({ + appId: option.appId, + }); await agora.setDeviceManager(bool) }, // 获取rtcEngine -- 2.40.1