Description
I join the video successfully, left the meeting and then rejoin again. I’m able to rejoin as I can see in other’s zoom client but on my screen I can’t see the embed meeting.
Browser Console Error
Use the attachVideo method to render the video. The renderVideo method is deprecated. See the reference for details.
GL_INVALID_VALUE : glViewport: negative width/height
WebGL: too many errors, no more errors will be reported to the console for this context.
Which Web Meeting SDK version?
meetingsdk": “^3.12.0”
“react”: “^18.2.0”,
“react-dom”: “^18.2.0”,
“react-router-dom”: “^6.16.0”,
Meeting SDK Code Snippets
import React, { useEffect, useRef, useState } from 'react';
import ZoomMtgEmbedded from "@zoom/meetingsdk/embedded";
import * as ReactDOM from 'react-dom/client';
import { getZoomMeetingCredentials, getZoomSignature } from '../services/meetings';
/**
* Component for embedding Zoom meetings
* Based on Zoom Meeting SDK
*/
const ZoomMeetingEmbed = ({
meetingId,
userName = 'Guest User',
userEmail = ''
}) => {
const meetingSDKRef = useRef(null);
const clientRef = useRef(null);
const isInitializedRef = useRef(false);
const [error, setError] = useState(null);
const [loading, setLoading] = useState(true);
// Suppress React key warning from Zoom SDK
useEffect(() => {
// Store original console.error
const originalConsoleError = console.error;
// Replace console.error with filtered version
console.error = (...args) => {
// Don't log React key warnings from the Zoom SDK
if (args[0] && typeof args[0] === 'string' &&
(args[0].includes('Each child in a list should have a unique "key" prop') ||
args[0].includes('Warning: Encountered two children with the same key'))) {
return;
}
originalConsoleError(...args);
};
// Restore original on unmount
return () => {
console.error = originalConsoleError;
};
}, []);
useEffect(() => {
if (!meetingId) {
setError('Meeting ID is required');
setLoading(false);
return;
}
// Patch React DOM createRoot for Zoom SDK
// This handles the warning about importing from "react-dom" instead of "react-dom/client"
if (window.React === undefined) {
window.React = React;
window.ReactDOM = ReactDOM;
}
// Create the Zoom client
if (!clientRef.current) {
try {
clientRef.current = ZoomMtgEmbedded.createClient();
} catch (err) {
console.error('Error creating Zoom client:', err);
setError('Failed to create Zoom client: ' + err.message);
setLoading(false);
return;
}
}
// Initialize the meeting SDK and join the meeting
const initializeAndJoinMeeting = async () => {
setError(null);
setLoading(true);
try {
// Only initialize once
if (!isInitializedRef.current && meetingSDKRef.current) {
console.log('Initializing Zoom Meeting SDK...');
await clientRef.current.init({
zoomAppRoot: meetingSDKRef.current,
language: 'en-US',
patchJsMedia: true,
leaveOnPageUnload: true,
});
isInitializedRef.current = true;
console.log('Zoom Meeting SDK initialized successfully');
}
// Step 1: Get meeting credentials
console.log('Fetching meeting credentials for meeting ID:', meetingId);
const meetingCredentials = await getZoomMeetingCredentials(meetingId);
console.log('Meeting credentials response:', meetingCredentials);
if (!meetingCredentials || !meetingCredentials.meetingNumber) {
throw new Error('Failed to fetch valid meeting credentials');
}
// Step 2: Get signature
console.log('Generating signature for meeting number:', meetingCredentials.meetingNumber);
const signatureResponse = await getZoomSignature(meetingCredentials.meetingNumber, 0);
console.log('Signature response:', signatureResponse);
if (!signatureResponse || !signatureResponse.signature || !signatureResponse.sdkKey) {
throw new Error('Failed to generate meeting signature');
}
// Create join parameters with fetched credentials
const joinParams = {
sdkKey: String(signatureResponse.sdkKey),
signature: String(signatureResponse.signature),
meetingNumber: String(meetingCredentials.meetingNumber),
password: meetingCredentials.password ? String(meetingCredentials.password) : '',
userName: String(userName),
userEmail: userEmail ? String(userEmail) : '',
tk: '',
zak: '',
};
console.log('Joining meeting with params:', {
meetingNumber: joinParams.meetingNumber,
sdkKey: 'Valid',
signature: 'Valid',
password: joinParams.password ? 'Present' : 'Not provided',
userName: joinParams.userName
});
// Join the meeting
// Add a small delay to ensure SDK is fully initialized
setTimeout(async () => {
try {
await clientRef.current.join(joinParams);
console.log('Joined Zoom meeting successfully');
} catch (joinError) {
console.error('Error joining meeting:', joinError);
// setError('Failed to join meeting: ' + joinError.message);
} finally {
setLoading(false);
}
}, 500);
} catch (error) {
console.error('Error in meeting setup:', error);
setError('Failed to set up meeting: ' + error.message);
setLoading(false);
}
};
initializeAndJoinMeeting();
// Cleanup function
return () => {
if (clientRef.current && isInitializedRef.current) {
try {
// Use the correct method to leave the meeting
if (typeof clientRef.current.leaveMeeting === 'function') {
clientRef.current.leaveMeeting();
} else if (typeof clientRef.current.leave === 'function') {
clientRef.current.leave();
} else {
// SDK might offer another method or approach to clean up
console.log('No leave method found on Zoom client, meeting may have already ended');
}
} catch (error) {
console.error('Error leaving Zoom meeting:', error);
}
}
};
}, [meetingId, userName, userEmail]);
return (
<div className="zoom-meeting-container">
{error && (
<div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
<p className="font-bold">Error</p>
<p>{error}</p>
</div>
)}
{loading && (
<div className="flex justify-center items-center py-6">
<svg className="animate-spin h-8 w-8 text-blue-600 mr-3" fill="none" viewBox="0 0 24 24">
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
<span>Connecting to meeting...</span>
</div>
)}
<div
id="zmmtg-root"
ref={meetingSDKRef}
className="w-full h-full min-h-[600px]"
></div>
</div>
);
};
export default ZoomMeetingEmbed;
To Reproduce(If applicable)
Steps to reproduce the behavior:
- Join a meeting as a participant.
- Leave the meeting.
- Now rejoin the meeting
- We are unable to view the embeded meeting video. The page is blank.
Device (please complete the following information):
- Device: Macbook Pro
- OS: Ventura 13.7.4
- Browser: Chrome
- Browser Version: Version 134.0.6998.118 (Official Build) (x86_64)
Additional context
Add any other context about the problem here.