How to call the leaveMeeting in the scope of the Init and Join functions

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.

Hey @rui.m.lourenco ,

Happy to help! :slight_smile:

Can you try moving the leaveMeeting function to inside the ZoomMtg.join success callback?

Let me know if that resolves the issue for you! :slight_smile:

Thanks,
Tommy

Thank you.

so if I do the following I can join the meeting and leave the meeting as soon as the join is successful.
meeting.js:

ZoomMtg.join({
            meetingNumber: meetingConfig.meetingNumber,
            userName: meetingConfig.userName,
            signature: signature,
            apiKey: meetingConfig.apiKey,
            userEmail: meetingConfig.userEmail,
            passWord: meetingConfig.passWord,
            success: function(res) {
                console.log("join meeting success");
                console.log("get attendeelist");
                ZoomMtg.getAttendeeslist({});
                ZoomMtg.getCurrentUser({
                    success: function(res) {
                        console.log("success getCurrentUser", res.result.currentUser);
                    },
                });
                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(res);
            },
        });

But when I add it as a function so that I can call it later from the button. Like this:

meeting.js:

ZoomMtg.join({
            meetingNumber: meetingConfig.meetingNumber,
            userName: meetingConfig.userName,
            signature: signature,
            apiKey: meetingConfig.apiKey,
            userEmail: meetingConfig.userEmail,
            passWord: meetingConfig.passWord,
            success: function(res) {
                console.log("join meeting success");
                console.log("get attendeelist");
                ZoomMtg.getAttendeeslist({});
                ZoomMtg.getCurrentUser({
                    success: function(res) {
                        console.log("success getCurrentUser", res.result.currentUser);
                    },
                });
                window.leaveMeeting = function(element) {
                    console.log("Entering 'Leave Meeting' 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(res);
            },
        });

I get the error below:

(index):118 Uncaught TypeError: window.leaveMeeting is not a function
at HTMLButtonElement.onclick ((index):118)

Hey @rui.m.lourenco,

Thank you for providing additional details. At first glance, it seems that when creating a function on the DomWindow object, the change doesn’t persist to the scope where you’re calling the function. Instead of setting a function on the DomWindow object, you may want to create a function that is global to that file.

Let me know if that helps.

Thanks,
Max

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.