Here is my code:
import React, { Component } from ‘react’;
import { connect } from ‘react-redux’;
import { lessons, payment } from ‘…/…/…/actions’;
import { ZoomMtg } from ‘@zoomus/websdk’;
import KJUR from ‘jsrsasign’;
import ‘@zoomus/websdk/dist/css/bootstrap.css’;
import ‘@zoomus/websdk/dist/css/react-select.css’;
import ‘./index.css’;
import $ from ‘jquery’;
class Meeting extends Component {
constructor(props) {
super(props);
this.generateSignature = this.generateSignature.bind(this);
this.showZoomDiv = this.showZoomDiv.bind(this);
this.startMeeting = this.startMeeting.bind(this);
this.handleUnload = this.handleUnload.bind(this);
}
showZoomDiv = () => {
document.getElementById(‘zmmtg-root’).style.display = ‘block’;
}
handleUnload = () =>{
console.log(“unload”);
}
componentDidUpdate = () => {
console.log(“comp update”);
}
componentDidMount = () => {
this.showZoomDiv();
ZoomMtg.setZoomJSLib('https://source.zoom.us/2.6.0/lib', '/av');
ZoomMtg.preLoadWasm();
ZoomMtg.prepareWebSDK();
// loads language files, also passes any error messages to the ui
ZoomMtg.i18n.load('en-US');
ZoomMtg.i18n.reload('en-US');
//this.props.getMeetingId().then(result => {
// var id = result.id;
//console.log("meeting id: " + id);
//var password = result.password;
//console.log("meeting password: " + password);
var id = 88367540064; //parseInt(localStorage.getItem("meetingId"));
var sign = 0;
var password = 0;
console.log(id);
var sign = this.generateSignature(id);
this.startMeeting(sign, id, password);
//passcode not required for meeting type 3 recurrent
//});
}
generateSignature = (/sdkKey, sdkSecret,/ meetingNumber/, role/) => {
const iat = Math.round((new Date().getTime() - 30000) / 1000)
const exp = iat + 60 * 60 * 2
const oHeader = { alg: 'HS256', typ: 'JWT' }
const oPayload = {
sdkKey: 'xxxxxx',
mn: meetingNumber,//meetingNumber,
role: 1,
iat: iat,
exp: exp,
appKey: 'xxxxxx',
tokenExp: iat + 60 * 60 * 2
}
const sHeader = JSON.stringify(oHeader)
const sPayload = JSON.stringify(oPayload)
const sdkJWT = KJUR.jws.JWS.sign('HS256', sHeader, sPayload, 'xxxxxx')
return sdkJWT
}
startMeeting = (signature,id , passcode) => {
console.log(“here 2”);
//document.getElementById('zmmtg-root').style.display = 'block';
// setup your signature endpoint here: https://github.com/zoom/meetingsdk-sample-signature-node.js
var signatureEndpoint = 'http://localhost:4000'
// This Sample App has been updated to use SDK App type credentials https://marketplace.zoom.us/docs/guides/build/sdk-app
var sdkKey = 'xxxxxx'
var meetingNumber = id//id
var role = 1
var leaveUrl = 'https://console.skillkidz.com'
var userName = 'Skillkidz_Feby'//localStorage.getItem("userFullName")//'Skillkidz_Feby'
var userEmail = ''
var passWord = passcode
// pass in the registrant's token if your meeting or webinar requires registration. More info here:
// Meetings: https://marketplace.zoom.us/docs/sdk/native-sdks/web/client-view/meetings#join-registered
// Webinars: https://marketplace.zoom.us/docs/sdk/native-sdks/web/client-view/webinars#join-registered
var registrantToken = ''
console.log("here 2 again");
ZoomMtg.init({
leaveUrl: leaveUrl,
success: (success) => {
console.log("here 3");
console.log(success)
ZoomMtg.join({
signature: signature,
meetingNumber: meetingNumber,
userName: userName,
sdkKey: sdkKey,
//userEmail: userEmail,
//passWord: passWord,
tk: registrantToken,
success: (success) => {
console.log("here 4");
console.log(success);
var leaveMeetingButton = document.getElementsByClassName('footer__leave-btn');
leaveMeetingButton[0].onclick = function() {
console.log("leave button clicked");
$('document').ready(function(){
var endMeetingButtons = null
console.log("here window event");
endMeetingButtons = document.getElementsByClassName('leave-meeting-options__btn leave-meeting-options__btn--default');
console.log(endMeetingButtons);
console.log(endMeetingButtons.length);
for (let i = 0; i < endMeetingButtons.length; i++) {
console.log("here: " + i);
endMeetingButtons[i].onclick = function() {
console.log("leave confirm clicked");
window.open('', '_self', ''); window.close();
}
}
});
console.log("left meeting");
}
},
error: (error) => {
console.log("error");
console.log(error)
}
})
},
error: (error) => {
console.log(error)
}
})
}
render() {
return (
)
}
}
const mapStateToProps = state => {
let error = null;
let result = null;
let studentDetails = null;
if(state.groups.errors) {
error = state.groups.errors;
} else if(state.groups.createResult){
result = state.groups.createResult.result;
} else if(state.parent.studentFromParentTable) {
console.log(“student details in redux”);
console.log(state.parent.studentFromParentTable);
studentDetails = state.parent.studentFromParentTable;
}
return {
error,
result,
studentDetails,
};
}
const mapDispatchToProps = dispatch => {
return {
getMeetingId: () => {
return dispatch(lessons.getMeetingId());
},
updatePaymentInfo: (state) => {
return dispatch(payment.updatePaymentInfo(state));
},
loadLessonsOfStudent: (data) => {
return dispatch(lessons.loadLessonsOfStudent(data));
},
markLessonsHappened: (id, status) => {
return dispatch(lessons.markLessonsHappened(id, status));
},
writeActualStartTime: (id) => {
return dispatch(lessons.writeActualStartTime(id));
},
}
}
export default connect (mapStateToProps, mapDispatchToProps) (Meeting);