diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx index fac31aa..c898864 100644 --- a/src/page/Meeting/index.tsx +++ b/src/page/Meeting/index.tsx @@ -174,6 +174,7 @@ const Meeting: React.FC = () => { } }); const [isVideoFullScreen, setIsVideoFullScreen] = useState(false) + const [observer, setObserver] = useState() let userInfo = JSON.parse(storage.getItem('user') as string) const msgTips = '您不是管理员或发言人,无法开启此功能!' useEffect(() => { @@ -583,6 +584,33 @@ const Meeting: React.FC = () => { return () => clearTimeout(timer); }, [isClicked]); + 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) => { + entries.forEach(async (entry) => { + if (entry.target.id !== user.uid) { + await agora.muteRemoteVideoStreamEx(Number(entry.target.id), !entry.isIntersecting) + } + }); + await agora.muteRemoteVideoStreamEx(Number(currentVideoId), false) + }, { threshold: 0.1, root: document.getElementById('videoView') }); + setObserver(observerObject) + elements.forEach(element => { + observerObject.observe(element); + }); + } + return () => { + elements.forEach(element => { + observer?.unobserve(element); + }); + observer?.disconnect(); + } + }, [roomUserList, currentVideoId]); + // 声网初始化 const agoraInit = async () => { await agora.init(true) @@ -1510,7 +1538,7 @@ const Meeting: React.FC = () => { {roomUserList.map((item: any, index: number) => { return (index <= 19 && item.isRoom && item.isAdmin ?
{ if (String(isShare) === item.screenShareId) { diff --git a/src/utils/package/agora.ts b/src/utils/package/agora.ts index 48097d5..a4a7c45 100644 --- a/src/utils/package/agora.ts +++ b/src/utils/package/agora.ts @@ -295,6 +295,10 @@ export const agora = { await agora.stopCameraCapture(); await rtcEngine.leaveChannelEx({ channelId: option.channelId + 'a', localUid: Number('1' + option.screenShareId) }) }, + // 停止/恢复接收指定的视频流。 + muteRemoteVideoStreamEx: async (uid: number, mute: boolean) => { + await rtcEngine.muteRemoteVideoStreamEx(uid, mute, { channelId: option.channelId, localUid: Number(option.uid) }) + }, // 取消或恢复订阅指定远端用户的音频流 muteRemoteVideoStream: async (uid: number, mute: boolean) => { rtcEngine.muteRemoteVideoStream(uid, mute)