Component View, Host can't create new meeting after "End Meeting for All"

Meeting SDK Web
1

Continuing the discussion from Can't rejoin a webinar using Component View in React App:

Description
My Zoom Component View WebSDK, can successfully create & join meetings. Upon Creating a meeting and leaving by clicking “End Meeting for All”, the host is able to continue to create meetings from Zoom’s API, but Joining the newly created meeting does not possible by the host on the webpage. The Component View window Disappears, and EmbededClient on connection-change event ‘Connected’ is never triggered; Despite no error from the joining process.

Upon leaving any meeting in Component view it throws issue 1; 4 times.
When creating a second meeting after “End Meeting for All”, no error is throw, but no meeting is joined.
If a join is attempted again, issue 2 is thrown;

Browser Console Error

Which Web Meeting SDK version?
v2.6.0
v2.9.5
v2.9.7

Meeting SDK Code Snippets

How I’m importing zoom’s libraries:

 <script src="https://source.zoom.us/2.9.5/lib/vendor/react.min.js"></script>
  <script src="https://source.zoom.us/2.9.5/lib/vendor/react-dom.min.js"></script>
  <script src="https://source.zoom.us/2.9.5/lib/vendor/redux.min.js"></script>
  <script src="https://source.zoom.us/2.9.5/lib/vendor/redux-thunk.min.js"></script>
  <script src="https://source.zoom.us/2.9.5/lib/vendor/lodash.min.js"></script>
  <script src="https://source.zoom.us/2.9.5/zoom-meeting-embedded-2.9.5.min.js"></script>

How I am joining the meeting (after creating it from Zoom’s API)

    function JoinMeeting(data) {

      options = {
        sdkKey: data.sdkKey,
        signature: data.signature,
        meetingNumber: data.id,
        password: data.pass,
        userName: data.userName,
        userEmail: data.userEmail,
        tk: data.registrantToken,
        error: () => { console.log('error') }
      };

      console.log(options);
      client.join(options);
    }

To Reproduce(If applicable)
Steps to reproduce the behavior:

  1. Create meeting with Zoom’s API
  2. Join meeting as host
  3. leave with “End Meeting for All”
  4. Repeat steps 1 & 2

Troubleshooting Routes
The troubleshooting attempt types you’ve already exhausted, including testing with the appropriate sample app (found on Zoom · GitHub).

Device (please complete the following information):

  • Device: Desktop
  • OS: Windows 10
  • Browser: Chrome & FireFox
  • Browser Version: Chrome - Version 110.0.5481.104 (Official Build) (64-bit)

Additional context
When joining I also get the error:
Failed to load resource: the server responded with a status of 404 (Not Found)
https://rwcdv2.dv.zoom.us/wc/ping/88234295875?ts=1677108565613&auth=b1-MUZcGqswTB3AhycXCU9U8qcAe8uO18AcX-JBtyew&rwcToken=SyDEt0q-qn_S9UqUn_x5n4fkIeDAol9WiJhOslKqpwg&dmz=1

Aswell as never having the Error & Success Callbacks for Client.join() trigger.

These have seemed to be less consequential as the client joins either way.

2

Hi @abarras ,

have you tried this sample app?

3

That is where my project started. I have also restarted once more with the sample app’s code.

I’ve made slight modifications,

  • Oauth

  • Contacting server for Zoom’s API (for creating and returning the meeting password to the client)

  • Simplified signature process for testing (see below)

Signature process:

    function MakeSignature() {

      const iat = Math.round(new Date().getTime() / 1000) - 30;
      const exp = iat + 60 * 60 * 2

      const oHeader = {
        alg: 'HS256',
        typ: 'JWT'
      }

      const oPayload = {
        sdkKey: '*********',
        mn: meetingNumber,
        role: role,
        iat: iat,
        exp: exp,
        appKey: '*****************',
        tokenExp: iat + 60 * 60 * 2
      }

      const sHeader = JSON.stringify(oHeader)
      const sPayload = JSON.stringify(oPayload)
      const signature = KJUR.jws.JWS.sign('HS256', sHeader, sPayload, '*****************')

      return signature;
    }

The sdk & app key has of course been replaced.

All to similar effect with the same problem.

5

Hey

If it is any help my solution was to create a custom end webinar button and use client.leaveMeeting instead of client.endMeeting . I still see the same issue on 2.9.7 if I use client.endMeeting . I hide the zoom component end meeting button.

6

Thanks Jason.

It feels a little hack-y but it might be the closest solution I’ve come across.
Through doing this I found it nessesary to use some creative CSS, differing for both Guests & Hosts, which requires me switching out the style sheet depending on the state of the SDK.

An example: (host.css)

button[class^='zmwebsdk-makeStyles-danger'], button[class*=' zmwebsdk-makeStyles-danger']{
    visibility: hidden;
}

button[class^='zmwebsdk-makeStyles-default'], button[class*=' zmwebsdk-makeStyles-default']{
    margin-top: -15px;
}

.zmwebsdk-MuiPaper-root.zmwebsdk-makeStyles-paper-65.zmwebsdk-MuiPaper-elevation1.zmwebsdk-MuiPaper-rounded{
    height: 50px;
}

Result:
image

Is there a more elegant way to keep its default method to leave, while removing the endMeeting button?
What was your process?

7

Yeah it’s a bit hacky for sure but its the only thing I could come up with to avoid a refresh. I removed the red button altogether so users will need to use the custom button. That was ok for my use case but maybe you need to show the red hangup button for leaving meetings

this removes the red button for me

div[class^='zmwebsdk-makeStyles-container'] {
  display: none !important;
}

and then when i initialize zoom i add the custom button

 toolbar: {
   buttons: [
     {
        text: 'End Lesson',
        onClick:  client.leaveMeeting
      },
    ],
}
8

Thanks for the suggestion, I implementing a similar solution to you.

In the meantime I’ve also found a work around for the issue, for those who might still need the functionality of “End Meeting for All” without shutting down the Component SDK’s ability to start meetings.

Using Zoom’s API with Oauth, You can List the user’s ongoing live meetings, and update their state to ended. (essentially “End Meeting for All”)

https://marketplace.zoom.us/docs/api-reference/zoom-api/methods/#operation/meetings
https://marketplace.zoom.us/docs/api-reference/zoom-api/methods/#operation/meetingStatus

Through implementing the custom buttons and adequate usage of their API, you can essentially recreate the functionality without the issues, from my tests thus far.

More work on the developer, but its something.

9

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