MeteorJS Zoom Web SDK

Meeting SDK Web
1

Description
I am trying to integrate Zoom Web SDK to MeteorJS React
I was able to run the sample web app react from zoom.
However when I tried it on the MeteorJS React. I am now getting a
JS Media SDK Not Defined Error

Error
Uncaught ReferenceError: JsMediaSDK_Instance is not defined

Which Web Client SDK version?
“@zoomus/websdk”: “^1.9.1”,

Screenshots

Screenshot from 2021-04-27 15-42-13
Screenshot from 2021-04-27 15-42-13761×672 75.5 KB

Device (please complete the following information):

  • Device: PC
  • OS: Ubuntu 18.04
  • Browser: Chrome
  • Browser Version: Chrome/89.0.4389.90

Additional context

2

Hey @tepx24,

Thank you for reaching out to the Zoom Developer Forum. It was really helpful to see your codebase, I think I was able to spot the issue.

It looks like you are importing the Web SDK both via your package.json file as well as in your main.html file. This means that you are importing the SDK using both the Local Method and the CDN Method.

With any app, you’ll want to choose one method to import the dependencies. When it comes to React apps, we found that it’s easiest to import dependencies using the CDN method. We have an example of this in the Sample React App:

I hope that helps! Let me know if you have any questions.

Thanks,
Max

3

Hi Max,

Thanks for the reply. I followed your suggestion and remove the local/package.json zoom web sdk. I imported the Zoom Web SDK dependencies as CDN. however I am still getting the same JSMediaSDK_not defined error. I have updated the git repo.

4

Hey @tepx24,

Thank you for making that change! Looking at the updated repo, I’m seeing that your public folder still has local Zoom Web SDK files in there. I think your bundler might still be including those files which is causing the conflict we’re seeing here.

When you then prepare dependencies, it is then referring to another instance of the ZoomMtg object:

In our Sample App, it looks like we needed to declare ZoomMtg as a variable when using the CDN Method:

Let me know if that helps.

Thanks,
Max

5

Hi Max,

Thanks for the help.
I have updated the git repo and removed the local zoom files in the public folder. however I am still getting the same JSMediaSDK not defined error. when I try to declare var ZoomMtg. I am getting a Uncaught TypeError: Cannot read property ‘setZoomJSLib’ of undefined

also Im not sure if this is an issue but im getting some console messages about samesite cookies.

Screenshot from 2021-05-05 10-27-52
Screenshot from 2021-05-05 10-27-52624×639 62.7 KB

6

Hey @tepx24,

Thanks for testing that out! I’m not sure what the issue is here, I’ll consult my team to see if they are able to offer any insight and get back to you here.

Thanks,
Max

7

Hey @tepx24 ,

This means that ZoomMtg is not defined in the window of your application.

I am not familiar with MeteorJS, but you will need to define ZoomMtg in your window

Examples using React or Vue sample apps:

OR

Let me know if that helps! :slight_smile:

Thanks,
Tommy

8

Hi Tommy,

Thanks for helping out.

I declared zoom using let ZoomMtg = window.ZoomMtg;

while I can see the I can get connected to the Zoom meeting, the JSMediaSDK still not being loaded
and Im only getting a black screen. which is the JSMediaSDK not defined error.

9

Hey @tepx24 ,

Can you share a screenshot of the new issue? Make sure to include any errors in the browser console.

-Tommy

10

Hi Tommy,

Here is the screenshot of the errors.

Screenshot from 2021-05-12 08-48-01
Screenshot from 2021-05-12 08-48-01785×786 119 KB

11

Hey @tepx24,

Would you be able to update the Git repo with your latest changes? I’m going to investigate this further on my end.

Also, I sent you a PM regarding the repo that is fairly urgent. Please check your messages on the developer forum.

Thanks,
Max

12

Hi Max

I have updated the git repo. I have also did the change about your message regarding the git repo.

Please do investigate.

Very much appreciate the help.

Thanks,
tepx24

13

Thanks @tepx24 ,

Can you add a README.md to your repo with instructions on how to run your application so we can debug it? :slight_smile:

Thanks,
Tommy

1 Like
14

Hi Tommy,

I have updated the repo and added a README.md

Kindly check if you can help me debug it.

Thanks.

15

Hey @tepx24,

Thank you, I’ll look into this further and get back to you tomorrow.

Thanks,
Max

16

Hey @tepx24,

Sorry for the delay, I appreciate your patience. After looking into this and running the app on my end, I wasn’t able to make any changes to get this working.

I’ll work with internal resources to see if we can offer any further advice and then update you here.

Thanks,
Max

17

Hi Max,

Is there any further advice that you can share regarding the issue?

Thanks.

18

Hey @tepx24,

Sorry for the delay there, I appreciate your patience here. I don’t have any tips to share with you so far.

I don’t see anything you’re doing wrong here so my next steps are to build out a MeteorJS application and test this from the ground up myself but I haven’t had a chance to that just yet.

I’ll set another reminder for this and update you as soon as I get the chance.

Thanks,
Max

19

FWIW I’m running into this as well. I am developing an application that is loading ZoomMtg after page load. window.ZoomMtg exists, and when I click the “Join” button, I get the errors. I’m debugging like crazy, but it would help to see the source of the zoom meeting js file.

Why all the reliance on globals?

20

Hey @SigmaNursing,

Unfortunately, I can’t speak to why/how the minified JS is built we unfortunately aren’t able to provide direct source code. If you’re encountering issues, please submit a new forum topic and I’ll follow up with you there.

@tepx24 In my testing, I wasn’t able to get the SDK working with MeteorJS which doesn’t mean it isn’t possible but I didn’t find a way. My apologies for not being of more assistance here.

Thanks,
Max