Exactly same plus backend is common for both let me give you full code
import * as React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import Modal from '@mui/material/Modal';
import ZoomMtgEmbedded from '../../../../node_modules/@zoomus/websdk/embedded';
const modalBg = {
width: '100%',
height: '100%',
background: '#afafaf',
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
}
const style = {
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: '80%',
height: '80%' ,
bgcolor: 'background.paper',
border: '1px solid #e1e1e1',
borderRadius: '10px',
boxShadow: 24,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
p: 4,
};
const joinMeet = {
background: '#1BA9A0',
color: '#fff',
padding: '6px 20px',
border: '0px',
fontSize: '14px',
borderRadius: '8px',
'&:hover': {
background: '#39c3ba'
}
}
const closeModal = {
position: 'absolute',
top: '20px',
right: '20px',
cursor: 'pointer',
zIndex: '999'
}
export default function ZoomPopup({zoomData, onClose}) {
const [open, setOpen] = React.useState(false);
const handleOpen = () => setOpen(false);
const handleClose = () => setOpen(false);
const client = ZoomMtgEmbedded.createClient();
console.log(client,"client")
// {
// "IsSuccess": true,
// "Data": {
// "uuid": "0wVs2a42TuyLyaeQlKbZUA==",
// "id": 84084250273,
// "host_id": "kJFctaH1QhGg30bbMxs84Q",
// "host_email": "ashishdwivediw@gmail.com",
// "topic": "My Meeting",
// "type": 2,
// "status": "waiting",
// "start_time": "2023-09-26T05:54:58Z",
// "duration": 60,
// "timezone": "America/Los_Angeles",
// "created_at": "2023-09-26T05:54:58Z",
// "start_url": "https://us05web.zoom.us/s/84084250273?zak=eyJ0eXAiOiJKV1QiLCJzdiI6IjAwMDAwMSIsInptX3NrbSI6InptX28ybSIsImFsZyI6IkhTMjU2In0.eyJhdWQiOiJjbGllbnRzbSIsInVpZCI6ImtKRmN0YUgxUWhHZzMwYmJNeHM4NFEiLCJpc3MiOiJ3ZWIiLCJzayI6IjAiLCJzdHkiOjEsIndjZCI6InVzMDUiLCJjbHQiOjAsIm1udW0iOiI4NDA4NDI1MDI3MyIsImV4cCI6MTY5NTcxNDg5OCwiaWF0IjoxNjk1NzA3Njk4LCJhaWQiOiJ6bU9HN1llZlFSU2daMzh0QTltbVlRIiwiY2lkIjoiIn0.dLehlLodECsyFklanhXa-c7MpKTD-RViQKsooeFzGYk",
// "join_url": "https://us05web.zoom.us/j/84084250273?pwd=2RjGRar02yKxanyvSp9nDtBcyh8vz3.1",
// "password": "f0cnE2",
// "h323_password": "727641",
// "pstn_password": "727641",
// "encrypted_password": "2RjGRar02yKxanyvSp9nDtBcyh8vz3.1",
// "settings": {
// "host_video": false,
// "participant_video": false,
// "cn_meeting": false,
// "in_meeting": false,
// "join_before_host": false,
// "jbh_time": 0,
// "mute_upon_entry": false,
// "watermark": false,
// "use_pmi": false,
// "approval_type": 2,
// "audio": "voip",
// "auto_recording": "none",
// "enforce_login": false,
// "enforce_login_domains": "",
// "alternative_hosts": "",
// "alternative_host_update_polls": false,
// "close_registration": false,
// "show_share_button": false,
// "allow_multiple_devices": false,
// "registrants_confirmation_email": true,
// "waiting_room": true,
// "request_permission_to_unmute_participants": false,
// "registrants_email_notification": true,
// "meeting_authentication": false,
// "encryption_type": "enhanced_encryption",
// "approved_or_denied_countries_or_regions": {
// "enable": false
// },
// "breakout_room": {
// "enable": false
// },
// "internal_meeting": false,
// "continuous_meeting_chat": {
// "enable": false,
// "auto_add_invited_external_users": false
// },
// "participant_focused_meeting": false,
// "push_change_to_calendar": false,
// "alternative_hosts_email_notification": true,
// "show_join_info": false,
// "device_testing": false,
// "focus_mode": false,
// "enable_dedicated_group_chat": false,
// "private_meeting": false,
// "email_notification": true,
// "host_save_video_order": false,
// "sign_language_interpretation": {
// "enable": false
// },
// "email_in_attendee_report": false
// },
// "pre_schedule": false
// },
// "message": "Meeting created"
// }
var authEndpoint = `http://localhost:2000/api/v1/zoom/authEndpoint`
var sdkKey = 'QW3Rp7HOTYyBugN5tFYoA'
var meetingNumber = '84084250273'
var passWord = 'f0cnE2'
var role = 1
var userName = 'f'
var userEmail = ''
var registrantToken = ''
var zakToken = ''
function getSignature(e) {
e.preventDefault();
fetch(authEndpoint, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
meetingNumber: meetingNumber,
role: role
})
}).then(res => res.json())
.then(response => {
startMeeting(response.Data)
console.log(response,"aaaaaaaaaa")
}).catch(error => {
console.error(error,"AAAAAA")
})
}
function startMeeting(signature) {
let meetingSDKElement = document.getElementById('meetingSDKElement');
client.init({
assetPath: 'https://source.zoom.us/2.17.0/lib/av',
debug: true,
zoomAppRoot: meetingSDKElement,
language: 'en-US',
customize: {
meetingInfo: ['topic', 'host', 'mn', 'pwd', 'telPwd', 'invite', 'participant', 'dc', 'enctype'],
toolbar: {
buttons: [
{
text: 'Custom Button',
className: 'CustomButton',
onClick: () => {
console.log('custom button');
}
}
]
}
}
});
client.join({
signature: signature,
sdkKey: sdkKey,
meetingNumber: meetingNumber,
password: passWord,
userName: userName,
userEmail: userEmail,
tk: registrantToken,
zak: zakToken
})
console.log(client.init,"meetingSDKElement")
}
return (
<div>
<Button onClick={handleOpen}>Open modal</Button>
{/* <Modal
open={open}
onClose={handleClose}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
> */}
<Box sx={modalBg}>
<Box sx={style}>
<Box sx={closeModal} onClick={onClose}>
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M11 1.75C5.89137 1.75 1.75 5.89137 1.75 11C1.75 16.1086 5.89137 20.25 11 20.25C16.1086 20.25 20.25 16.1086 20.25 11C20.25 5.89137 16.1086 1.75 11 1.75ZM0.25 11C0.25 5.06294 5.06294 0.25 11 0.25C16.9371 0.25 21.75 5.06294 21.75 11C21.75 16.9371 16.9371 21.75 11 21.75C5.06294 21.75 0.25 16.9371 0.25 11ZM7.46967 7.46967C7.76256 7.17678 8.23744 7.17678 8.53033 7.46967L11 9.93934L13.4697 7.46967C13.7626 7.17678 14.2374 7.17678 14.5303 7.46967C14.8232 7.76256 14.8232 8.23744 14.5303 8.53033L12.0607 11L14.5303 13.4697C14.8232 13.7626 14.8232 14.2374 14.5303 14.5303C14.2374 14.8232 13.7626 14.8232 13.4697 14.5303L11 12.0607L8.53033 14.5303C8.23744 14.8232 7.76256 14.8232 7.46967 14.5303C7.17678 14.2374 7.17678 13.7626 7.46967 13.4697L9.93934 11L7.46967 8.53033C7.17678 8.23744 7.17678 7.76256 7.46967 7.46967Z" fill="#222631"/>
</svg>
</Box>
<div id="meetingSDKElement">
{/* Zoom Meeting SDK Component View Rendered Here */}
</div>
<Button sx={joinMeet} onClick={getSignature}>Join Meeting</Button>
</Box>
</Box>
{/* </Modal> */}
</div>
);
}
this component is same for both