Zoom Web SDK shows Joining Meeting Timeout. Fail to join the meeting

Format Your New Topic as Follows:

Meeting SDK Type and Version
Share the Meeting SDK type and version you’re working with to give relevant context.

Zoom Web SDK 2.9.7 (latest)

Description

I am trying to implement CDN Client View in Zoom Web SDK. I am using Flask as backend.

Here is my code:

<html>
<body>
<script src="https://source.zoom.us/2.9.7/lib/vendor/react.min.js"></script>
<script src="https://source.zoom.us/2.9.7/lib/vendor/react-dom.min.js"></script>
<script src="https://source.zoom.us/2.9.7/lib/vendor/redux.min.js"></script>
<script src="https://source.zoom.us/2.9.7/lib/vendor/redux-thunk.min.js"></script>
<script src="https://source.zoom.us/2.9.7/lib/vendor/lodash.min.js"></script>

<!-- CDN for client view -->
<script src="https://source.zoom.us/zoom-meeting-2.9.7.min.js"></script>

<head>
  <link type="text/css" rel="stylesheet" href="https://source.zoom.us/2.9.5/css/bootstrap.css" />
  <link type="text/css" rel="stylesheet" href="https://source.zoom.us/2.9.5/css/react-select.css" />
</head>

<script>
ZoomMtg.setZoomJSLib('https://source.zoom.us/2.9.7/lib', '/av')
// loads dependent assets
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')

const sdkKey = "xxxxxxx";
const userName = sessionStorage.getItem("N");
const meetingNumber = sessionStorage.getItem("ID");
const passWord = sessionStorage.getItem("Pass");
const leaveUrl = "http://localhost:5050/videolist";
console.log(meetingNumber)
console.log(passWord)

//const KJUR = require('jsrsasign')
// https://www.npmjs.com/package/jsrsasign

const signature = "{{ signature }}"
console.log(signature)
ZoomMtg.init({
  leaveUrl: leaveUrl, // https://example.com/thanks-for-joining
  success: (success) => {
    console.log('Success init')
    ZoomMtg.join({
      sdkKey: sdkKey,
      signature: signature, // role in SDK signature needs to be 0
      meetingNumber: meetingNumber,
      passWord: passWord,
      userName: userName,
      userEmail: "xxxxxx", //Actual Email ID was given
      success: (success) => {
        console.log('Success join')
        console.log(success)
      },
      error: (error) => {
        console.log("A" + error + " B " + error.message)
        console.log(sdkKey)
        console.log(signature)
        console.log(meetingNumber)
        console.log(passWord)
        console.log(userName)
        
      }
    })
  },
  error: (error) => {
    console.log(error)
  }
})
</script>
</body>
</html>

Below is my Flask code:

@app.route('/meeting/<IDP>', methods=['GET'])
def meet(IDP):
    ID = IDP[:IDP.index(' ')]
    payload = {'sdkKey': SDK_KEY, "meetingNumber": ID, "role": 0, "user": IDP[IDP.index(' ')+1:], "iat": time.strftime("%d %b %y %H:%M:%S",time.gmtime())}
    encoded = jwt.encode({"some": payload}, SECRET, algorithm="HS256")
    return render_template('meeting.html', signature = encoded)

Error?

ZoomMtg.init is working fine, but ZoomMtg.join always fails. It shows “Joining Meeting Timeout. Fail to join the meeting

fail to join

This is what I got in console:

Troubleshooting Routes

I have tried implementing all the solutions I could get from web.

How To Reproduce

It always shows this error.

here are more details for of the meeting sdk signature

if you can’t find a solution to your problem, you should try the example on github

@samudraganguly002017 Hope you will be fine.

Your shared code is not inside <body></body> tag. Please correct that first.

According to the first link that you provided, I have made the following changes:

@app.route('/meeting/<IDP>', methods=['GET'])
def meet(IDP):
    ID = IDP[:IDP.index(' ')]
    t = time.gmtime()
    s = time.time() + 4 * 3600
    f = time.gmtime(s)
    payload = {'sdkKey': SDK_KEY, "mn": ID, "role": 0, "iat": time.strftime("%H:%M:%S",time.gmtime()), "exp": time.strftime("%H:%M:%S",f), "tokenexp": time.strftime("%H:%M:%S",f)}
    encoded = jwt.encode({"some": payload}, SDK_SECRET, algorithm="HS256")
    return render_template('meeting.html', signature = encoded)

Still, I am getting the same error. I cannot understand where I made the mistake.

@freelancer.nak Hi Naeem, I have put the code inside the <body></body> tag. Still getting the same error.

have you tried the github example (CDN version)?

so you can test if your Meeting SDK app works correctly

No, not yet. I will.

Here are the sessions regarding WebSDK Integrations

Hi, this is to let you all know that I have finally succeeded in implementing the SDK. The time was creating the problem. Please find the correct code below.

@app.route('/meeting/<IDP>', methods=['GET'])
def meet(IDP):
    ID = IDP[:IDP.index(' ')]
    payload = {'sdkKey': SDK_KEY, "mn": ID, "role": 0, "iat": int(time.time()), "exp": int(time.time())+4*3600, "tokenexp": int(time.time())+4*3600}
    encoded = jwt.encode(payload, SDK_SECRET, algorithm="HS256")
    return render_template('meeting.html', signature = encoded)

But, I am facing another problem.

I want to remove the details that can be found in the top left corner of the meeting.

Is it possible to remove this option? If yes, please help me.

I have solved it too. Setting meetingInfo: [] in ZoomMtg.init did the trick.

There is something I want to know. Although, I am using timestamp, and it is extremely rare that two people will have the exact same timestamp, what if two people have the same timestamp and hence, same signature? Will that be a problem?