Join Audio Menu dropdown does not work correctly

Meeting SDK Web
1

Description
After clicking the “Join Audio by Computer” button, the bottom left audio menu doesn’t appear correctly.

Normally there would be a mute/unmute button in the bottom left; but instead, the audio menu (normally activated by the caret and is hidden by default) overlaps other elements that should be there. The caret button also does not work.

Screenshot (gif)

zoomaudiobutton
zoomaudiobutton818×651 153 KB

Error
No errors, but the warning messages look relevant:

“Warning: Failed prop type: The prop id is required to make n accessible for users of assistive technologies such as screen readers.”

“Warning: React does not recognize the pullLeft prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase pullleft instead. If you accidentally
passed it from a parent component, remove it from the DOM element.”

“Warning: React does not recognize the Dropdown prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase dropdown instead. If you accidentally passed it from a parent component, remove it from the DOM element.”

“Warning: React does not recognize the noCaret prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase nocaret instead. If you accidentally passed it from a parent component, remove it from the DOM element.”

“Warning: Each child in a list should have a unique “key” prop.”

Which Client Web SDK version?
1.9.1

To Reproduce(If applicable)
I’m using NuxtJS with WebSDK 1.9.1

Device (please complete the following information):
Windows 10, tested on:

Microsoft Edge
Version 89.0.774.50 (Official build) (64-bit)

Google Chrome
Version 89.0.4389.82 (Official Build) (64-bit)

Firefox
86.0.1 (64-bit)

2

Hey @developerlee ,

That is strange! Can you let me know if you are changing any of the Web SDK default styles?

Also, have you included the Web SDK CSS?

Thanks,
Tommy

3

Thanks Tommy, I didn’t have the CSS added correctly in my nuxt config. Doesn’t get rid of the warning messages but the menu does work now. Thanks again :pray:

4

Hey @developerlee,

I’m glad to hear that resolved your issue! When it comes to the errors in the browser console, make sure that you are importing all the dependencies correctly and that you are using only the local method or the CDN method but not both.

If that doesn’t help, we do have a Sample Web App and a Sample Vue.js App that you can use as a reference.

Let me know if that helps.

Thanks,
Max

1 Like
5

Hi @MaxM,

Thanks for your reply. Just a follow up question regarding using a local module vs the CDN:

In my app, I use a dynamic import statement that executes only after a user clicks a button. This is done just so the warning message isn’t affected by some of the CSS changes that occur on import.

So initialization looks something like:

const {ZoomMtg} = await import('@zoomus/websdk');

ZoomMtg.setZoomJSLib('https://source.zoom.us/1.9.1/lib', '/av');
ZoomMtg.preLoadWasm();
ZoomMtg.prepareWebSDK();

The module seems to import fine, but either specifying the dependency library (or not including the statement at all) to point to a local module doesn’t seem to work. I think that it’s unable to resolve the path name, resulting in a 404 not found.

For example, this will result in a 404: ZoomMtg.setZoomJSLib('../node_modules/@zoomus/websdk/dist/lib', '/av');

image

This has probably more to do with how I have things set up in my project rather than an issue with Zoom - but would be able to shed some light on the issue? Have other users experienced this issue and how did they resolve it?

Otherwise the app still works fine even with warnings, or alternatively I can stick to using just the CDN. Thanks.

6

Hey @developerlee,

This is a great question! From what I understand, this has to do with how certain frameworks bundle assets (i.e. webpack). When looking at the Sample Vue.js App, we can see that the CDN method is required:

This is because Vue doesn’t provide good options to include particular dependencies from the node_modules folder in the final build. Therefore, we have to explicitly include them from a CDN. I’m sure this can be done by changing a webpack config but the goal was to keep the sample simple.

When it comes to the Sample Angular App, we can see that the CDN method isn’t required:

This is because Angular provides a method for applications to bundle files from the node_modules folder and using globs:

I hope that clears things up! Let me know if you have any questions.

Thanks,
Max

1 Like
7

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