Description
I’m using Web SDK to embed the zoom meeting into my Single Page Application.
I need to be able to leave the meeting from my web application.
I’ve read this post: How to leaveMeeting by an external button - #2 by tommy
But don’t know how to call the leaveMeeting function in the scope of the Init and Join, so I need some help with that.
I’m starting with sample-app-web from Github and I’m able to join from my web application using an embedded iframe like this:
index.html
<div> <iframe id="iframe_content" class="responsive-iframe" src="">></iframe> </div>
index.js openning meeting.html in iframe instead of a new tab:
const signature = ZoomMtg.generateSignature({
meetingNumber: meetingConfig.mn,
apiKey: API_KEY,
apiSecret: API_SECRET,
role: meetingConfig.role,
success: function(res) {
console.log(res.result);
meetingConfig.signature = res.result;
meetingConfig.apiKey = API_KEY;
const joinUrl = “/meeting.html?” + testTool.serialize(meetingConfig);
console.log(joinUrl);
//window.open(joinUrl, “_blank”); Commented this and added the line below
document.getElementById(‘iframe_content’).src = joinUrl;
},
In order to leave the meeting I added a leave button to the toolbar in index.html:
<button type="button" link="" onclick="window.leaveMeeting('#leave_meeting')" class="btn btn-primary" id="leave_meeting">Leave</button>
Added the leave function to index.js:
window.leaveMeeting = function(element) {
console.log(“Entering ‘Leave Meeting’ function”);
const meetingConfig = testTool.getMeetingConfig();
if (!meetingConfig.mn || !meetingConfig.name) {
alert(“Meeting number or username is empty”);
return false;
}
ZoomMtg.init({
leaveUrl: meetingConfig.leaveUrl,
webEndpoint: meetingConfig.webEndpoint,
success: function() {
const result = ZoomMtg.leaveMeeting({
success: function(res) {
console.log(“Leave Meeting successful!”);
},
error: function(res) {
console.log(“Leave Meeting failed with error:”, res);
}
});
},
error: function(res) {
console.log(“Init on Leave Meeting failed with error:”, res);
},
});
};
Hitting the Leave button gives me the error below:
Error
zoomus-websdk.umd.min.js:2 Uncaught TypeError: Cannot read property ‘0’ of null
at A (zoomus-websdk.umd.min.js:2)
at redux.min.js:1
at a (redux.min.js:1)
at redux-thunk.min.js:1
at Object.zmg_initMeetingConfig (redux.min.js:1)
at a.value (zoomus-websdk.umd.min.js:2)
at x (zoomus-websdk.umd.min.js:2)
at Object.init (zoomus-websdk.umd.min.js:2)
at window.leaveMeeting (index.js:157)
at HTMLButtonElement.onclick ((index):118)
Which Client Web SDK version?
1.9.0
Device (please complete the following information):
- Device: Desktop
- OS: Windows 10
- Browser: Chrome
- Browser Version 88.0.4324.146
Additional context
I didn’t use the angular sample because I’m not familiar with angular and the web app I’m writing is already using ExpressJS for websocket communication, so not sure if they will clash.