Hello, I have an application for online lessons, which has a embedded zoom meeting web sdk.
I need that at certain moments the main view of the zoom conference is hidden and a pip floating window appears, in which user can see the speaker or screen sharing.
Now pip only appears if host has enabled screen sharing, whiteboard, etc.
Screenshot when student/user sees the zoom:
Screenshot when the user sees the main screen of the lesson (where the user solves assignments, etc.):
I need pip to appear to show the current speaker as well. Otherwise, users don’t always realize that the meeting is already in progress (like in the screenshot below).
The screenshot is when the user sees the main screen of the lesson, but host doesn’t share the screen:
Screenshot when the user sees the zoom, but host doesn’t share the screen:
I’m also wondering what is the correct way to minimize zoom in pip mode for zoom web sdk?
Before I needed to display the pip window, the main view of zoom (id zmmtg-root) was simply set to opacity 0. But now this won’t work because the pip window (.ReactModalPortal) also falls under opacity.
I achieved the display that I got on the 2nd screenshot by taking all the elements that need to be hidden and setting them to “display: none”. And in order to get rid of the black background zmmtg-root (background color: transparent did not work for some reason) I set height to 0:
final zoomElements = html.window.document.querySelectorAll(
'.video-share-layout, .footer, .footer--hidden, .footer__inner, .meeting-info-container, .meeting-on-hold',
);
final zr = html.window.document.getElementById('zmmtg-root');
for (final element in zoomElements) {
element.style.display =
currentView == SessionView.CLASSROOM ? 'none' : 'block';
}
zr?.style.height = currentView == SessionView.CLASSROOM ? '0' : '100%';
zr?.style.pointerEvents = currentView == SessionView.CLASSROOM ? 'none' : 'auto';
But this is very inconvenient and unreliable, I hope there is a better way to do it.
Which Web Meeting SDK version?
3.1.6
Device (please complete the following information):
- OS: Windows 10
- Browser: Chrome
- Browser Version: 21.0.6167.161 (Official Build) (x64)
