diff --git a/src/page/Meeting/index.module.scss b/src/page/Meeting/index.module.scss index 4b7c01c..a829bfc 100644 --- a/src/page/Meeting/index.module.scss +++ b/src/page/Meeting/index.module.scss @@ -105,17 +105,47 @@ top: 0; z-index: 3000; - .meetingAbsoluteLoading { - background: black; + .meetingAbsoluteVideoView { position: absolute; - left: 0; - top: 0; + z-index: 1; width: 100%; height: 100%; - display: flex; - justify-content: center; - align-items: center; - z-index: 1; + left: 0; + top: 0; + + >div { + height: 160px; + position: relative; + + .meetingAbsoluteUser { + position: absolute; + left: 0; + bottom: 0; + font-size: 13px; + color: #EEEEEE; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + background-color: rgba(0, 0, 0, 0.62); + z-index: 1; + padding: 2px 4px; + box-sizing: border-box; + width: 100%; + } + + .meetingAbsoluteLoading { + background: black; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + z-index: 1; + } + } } .meetingAbsoluteText { @@ -234,7 +264,6 @@ #videoView { position: relative; - border: 1px red solid; } .standardModeIcon { diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx index 672ea5d..3832336 100644 --- a/src/page/Meeting/index.tsx +++ b/src/page/Meeting/index.tsx @@ -1164,13 +1164,25 @@ const Meeting: React.FC = () => { useEffect(() => { if (isScreenCapture) { - agora.setupLocalVideo({ - uid: Number(user.uid), - view: document.getElementById(`meetingAbsoluteVideo`) as HTMLElement, - channelId: state.channelId, - sourceType: VideoSourceType.VideoSourceCameraPrimary, - type: true - }) + roomUserList + .filter((item: any) => item.isRoom && item.isAdmin).forEach(async (item: any) => { + if (user.uid === item.uid) { + await agora.setupLocalVideo({ + uid: Number(user.uid), + view: document.getElementById(`meetingAbsoluteVideo`) as HTMLElement, + channelId: state.channelId, + sourceType: VideoSourceType.VideoSourceCameraPrimary, + type: true + }) + } else { + await agora.setupRemoteVideoJoin({ + uid: Number(item.uid), + view: document.getElementById(`meeting-absolute-video-${item.uid}`), + channelId: state.channelId, + renderMode: RenderModeType.RenderModeHidden, + }) + } + }); } }, [isScreenCapture]); @@ -1283,26 +1295,27 @@ const Meeting: React.FC = () => { }, [applyUserList]); useEffect(() => { - const elements = document.querySelectorAll('.intersectionObserver-view'); - if (elements.length && currentVideoId) { - elements.forEach(element => { - observer?.unobserve(element); - }); - const observerObject = new IntersectionObserver(async (entries: IntersectionObserverEntry[], _observer: IntersectionObserver) => { - setIsScreenCapture((bool: boolean) => { - entries.forEach(async (entry) => { - if (entry.target.id !== user.uid) { - await agora.muteRemoteVideoStreamEx(Number(entry.target.id), bool ? true : !entry.isIntersecting) + const className = isScreenCapture ? '.intersectionAbsoluteObserver-view' : '.intersectionObserver-view'; + const rootId = isScreenCapture ? 'meetingAbsoluteVideoView' : 'videoView'; + const rootElement = document.getElementById(rootId); + const elements = document.querySelectorAll(className); + elements.forEach(element => { + observer?.unobserve(element); + }); + observer?.disconnect(); + if (elements.length && currentVideoId && rootElement) { + const observerObject = new IntersectionObserver( + (entries: IntersectionObserverEntry[]) => { + entries.forEach(entry => { + const dataUid = (entry.target as HTMLElement).getAttribute('data-uid'); + if (dataUid !== user.uid) { + agora.muteRemoteVideoStreamEx(Number(dataUid), !entry.isIntersecting); } }); - return bool - }) - setIsScreenCapture((bool: boolean) => { - agora.muteRemoteVideoStreamEx(Number(currentVideoId), bool) - return bool - }) - }, { threshold: 0, root: document.getElementById('videoView') }); - setObserver(observerObject) + }, + { threshold: 0, root: rootElement } + ); + setObserver(observerObject); elements.forEach(element => { observerObject.observe(element); }); @@ -1334,7 +1347,7 @@ const Meeting: React.FC = () => { }); observer?.disconnect(); } - }, [roomUserList, currentVideoId, footerList]); + }, [roomUserList, currentVideoId, footerList, isScreenCapture]); // 声网初始化 const agoraInit = async () => { @@ -1397,6 +1410,17 @@ const Meeting: React.FC = () => { return res }) }, 1000); + setIsScreenCapture(bool => { + if (bool) { + agora.setupRemoteVideoJoin({ + uid: Number(remoteUid), + view: document.getElementById(`meeting-absolute-video-${remoteUid}`), + channelId: connection.channelId, + renderMode: RenderModeType.RenderModeHidden, + }) + } + return bool + }) } } }, @@ -2140,6 +2164,7 @@ const Meeting: React.FC = () => { const isOpen = await getKeyOpenChildWindow('shareScreenWindow') setIsScreenCapture(true) if (!isOpen) { + setIsExpand(false) window.electron.createChildWindow('show') setKeyOpenChildWindow('shareScreenWindow', true) window.electron.setMainWindowSize({ @@ -2206,6 +2231,9 @@ const Meeting: React.FC = () => { // 停止共享 const stopScreenCapture = async (): Promise => { await agora.destroyRendererByView(`meetingAbsoluteVideo`) + roomUserList.forEach(async (item: any) => { + await agora.destroyRendererByConfig(Number(item.uid), state.channelId) + }); const footerListTemplate = [...footerList] await agora.leaveChannelEx(userInfo.screenShareId) agora.stopScreenCapture() @@ -2699,18 +2727,39 @@ const Meeting: React.FC = () => { } setIsNetworkQuality(false) }}> - {isScreenCapture ?
+ {isScreenCapture ?
{currentSpeakUser.length ? '正在说话:' + currentSpeakUser.join(';') : '正在说话:'}
- {footerList[0][1].active ?
- -
: null} +
item.isRoom).length > 4 && isExpand ? 'auto' : 'hidden' }}> +
+ {footerList[0][1].active ?
+ +
: null} + {!footerList[0][1].active && isExpand ?
{user.userName}
: null} +
+ {roomUserList + .filter((item: any) => item.isRoom && item.isAdmin && item.uid !== user.uid) + .map((item: any) => ( +
+ {item.enableCamera && isExpand ?
{item.userName}
: null} + {item.enableCamera ? null :
+ +
} +
+ ))} +
{ setIsExpand(!isExpand) window.electron.setChildWindow({ - height: isExpand ? 160 : 40, + height: !isExpand ? 4 * 160 + 15 : 160, key: 'main' }) - }}>{isExpand ? '展开' : '收起'}
+ }}>{isExpand ? '收起' : '查看参会者'}
: null} {contextMenu ?
{
{roomUserList.map((item: any, index: number) => { return (item.isRoom && item.isAdmin ?
{