Description
I am using zoom SDK Client view I managed to get the meeting screen to load but it tells me that both mic and video arent recognized and wont let me join the meeting, it wont event prompt me allow/disallow the use of video/mic.
When i add navigator.mediaDevices.getUserMedia({ audio: true}) to the page manually and give permission the mic is recognized.
This error does not happened in Component view and it allows me to join meeting just fine.
There are other weird errors where i have to display: none for #zmmtg-root.
And when i have cross-origin isolation how comes ZoomMtg.setZoomJSLib('https://source.zoom.us/2.3.5/lib', '/av'); is loading fine…
Browser Console Error
There are few errors:
Uncaught (in promise) - {type: 'VIDEO', evt: 'ERROR', errorCode: 'NOT_CONNECTED', data: undefined} - zoomus-websdk.umd.min.js:2
Uncaught (in promise) - {type: 'AUDIO', evt: 'ERROR', errorCode: 'NOT_CONNECTED', data: undefined} - zoomus-websdk.umd.min.js:2
warning: validateDOMNesting(...): <h1> cannot appear as a descendant of <p>.
Warning: Invalid DOM property playsinline. Did you mean playsInline?
Which Web Meeting SDK version?
@zoomus/websdk - 2.3.5
Meeting SDK Code Snippets
I dont know where is the problematic part so i am pasting my entire implementation.
function ZoomMeeting() {
const search = window.location.search.substring(1);
const {token} = qs.parse(search);
const {
a: url,
b: userName,
c: leaveUrl,
//d: shareUrl,
// e: adminOrOwner,
f: userEmail,
//g: userId,
h: signature
} = JSON.parse(decodeURIComponent(token));
const sectionRef = useRef(null);
console.log('signature', signature);
const meetingNumber = extractMeetingId(url);
const password = extractPassword(url);
console.log('meetingNumber', meetingNumber);
console.log('JSON.parse(decodeURIComponent(token)', JSON.parse(decodeURIComponent(token)))
useEffect(() => {
if (sectionRef.current) {
ZoomMtg.setZoomJSLib('https://source.zoom.us/2.3.5/lib', '/av');
ZoomMtg.preLoadWasm();
ZoomMtg.prepareWebSDK();
ZoomMtg.i18n.load('en-US');
ZoomMtg.i18n.reload('en-US');
const zoomMeeting = document.getElementById('zmmtg-root');
if (zoomMeeting) {
sectionRef.current.appendChild(zoomMeeting);
zoomMeeting.style.display = 'block';
zoomMeeting.style.position = 'relative';
zoomMeeting.style.zIndex = '1005';
zoomMeeting.style.background = 'none';
ZoomMtg.init({
leaveUrl,
success: (success) => {
console.log(success)
ZoomMtg.join({
password, signature, meetingNumber, userName, userEmail,
sdkKey: ZOOM_SDK_KEY,
success: (success) => {
console.log('zoom join success', success);
},
error: (error) => {
errorHandler(error)
console.log(`zoom join error`, error);
}
})
}, error: (error) => {
errorHandler(error)
console.log(`zoom init error`, error);
}
})
ZoomMtg.inMeetingServiceListener('onUserJoin', function (data) {
console.log(`inMeetingServiceListener onUserJoin`, data);
});
ZoomMtg.inMeetingServiceListener('onUserLeave', function (data) {
console.log(`inMeetingServiceListener onUserLeave`, data);
});
ZoomMtg.inMeetingServiceListener('onUserIsInWaitingRoom', function (data) {
console.log(`inMeetingServiceListener onUserIsInWaitingRoom`, data);
});
ZoomMtg.inMeetingServiceListener('onMeetingStatus', function (data) {
console.log(`inMeetingServiceListener onMeetingStatus`, data);
});
}
}
}, [sectionRef.current]);// eslint-disable-line
return (
<ZoomMeetingPageWrap>
<ZoomMeetingWrap ref={sectionRef}/>
<ToastContainer
autoClose={5000}
hideProgressBar
position='top-center'
style={{textAlign: 'center', fontSize: '18px', wordBreak: 'break-word', whiteSpace: 'pre-line'}}
toastStyle={{borderRadius: '8px'}}
/>
</ZoomMeetingPageWrap>
)
}
To Reproduce(If applicable)
Not really sure it just happens.
Screenshots
Wont allow me
Device (please complete the following information):
- Device: PC
- OS: Ubuntu 18.04.6 LTS
- Browser: Chrome
- Version 100.0.4896.127 (Official Build) (64-bit))
Additional info
As per your documentation at: Import SDK
On my site those are not being added upon init.
<!-- added on meeting init -->
<div class="ReactModalPortal"></div>
<div class="ReactModalPortal"></div>
<div class="ReactModalPortal"></div>
<div class="ReactModalPortal"></div>
<div class="global-pop-up-box"></div>
<div class="sharer-controlbar-container sharer-controlbar-container--hidden"></div>
