I am experiencing an issue with the @zoomus/websdk/embedded while embedding Zoom meetings on a web page using React and TypeScript. The problem occurs when attempting to rejoin a meeting. Specifically, after ending a meeting and trying to join another meeting (or rejoining the same meeting), the meeting does start, but the zoom meeting window does not display in its intended position. Instead, it moves to the top of the page somewhere but does appear when we search it in inspect element. I have attached a screenshot for reference that zoom meeting window appear second time somewhere at the top of page.
This issue wont appear only when the page is refreshed after the each meeting ends. But we have a scenario that we cant refresh the page once the meeting ends.
Any insights or suggestions to resolve this issue would be greatly appreciated.
Versions:
“@zoomus/websdk”: “^2.18.2”,
“react”: “^18.2.0”,
Code Snippet:
import ZoomMtgEmbedded from '@zoomus/websdk/embedded'
//we call getSignature API of our backend and fetch signatures by use client side sdk
const getSignature = (joinInPerson: boolean) => {
setLoading(true);
getZoomMeeting(user?._doc._id, user?.token, joinInPerson).then((res: any) => {
if (res) {
setMeetingInfo(res)
}
}).catch(err => {
setLoading(false);
})
}
useEffect(() => {
const fetchHtmlContent = async () => {
if (meetingInfo) {
try {
const client = ZoomMtgEmbedded.createClient()
let meetingSDKElement = document.getElementById('meetingSDKElement') as HTMLElement;
await client.init({ zoomAppRoot: meetingSDKElement, language: 'en-US', customize: { video: { isResizable: true, viewSizes: { default: { width: 700, height: 100 } } } } }).catch(err => {
setLoading(false);
}).then(async (res) => {
setLoading(false);
await client.join({
sdkKey: process.env.ZOOM_SDK_KEY,
signature: meetingInfo.signature, // role in SDK signature needs to be 1
meetingNumber: meetingInfo.meeting_number,
password: meetingInfo.pass,
userName: user?._doc.name ?? "",
success: (success: any) => {
console.log('--> Success Joining zoom', success);
},
error: (error: any) => {
console.log('--> Error Joining zoom', error);
},
})
})
} catch (err) {
console.log(err);
}
}
}
fetchHtmlContent();
}, [meetingInfo]);
return(
<div id="meetingSDKElement">
</div>
);