I get a black screen when just importing ZoomMtg from @zoomus/websdk

[pvkndux]

Description
Hello Everyone,

I’am using Zoomus/websdk in my app and when I just import ZoomMtg from @zoomus/websdk I get a black screen on my entire application not only the page where I did the import.

I added this in index.html:

<link type="text/css" rel="stylesheet" href="node_modules/@zoomus/websdk/dist/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="node_modules/@zoomus/websdk/dist/css/react-select.css" />
<script src="https://source.zoom.us/1.8.0/lib/vendor/jquery.min.js"></script>

Error
There is no error just black screen.

Which version?
Sdk version 1.8.0 and 1.8.3

Device (please complete the following information):

• Device: PC
• OS: Ubuntu 20.04
• Browser: Chrome and Firefox

Thank you a lot for your help.

[tommy (Tommy Gaessler)]

Hey @pvkndux,

To fix the black screen issue on the Client Web SDK follow the steps outlined below:

1. Make sure the the latest Web SDK version is being used.
2. Upon initial import of the Client Web SDK, there may be just a black screen. This is expected until you join a meeting or webinar. As a solution, you can hide the Client Web SDK by default (example), and then show it when the Start / Join Meeting / Webinar flow has been started (example).
3. If the Web SDK is just a black screen joining / starting Meetings / Webinars is not working, check to see if there are errors in the browser console. If there are errors, fix them. If they cannot be fixed, let us know.

By the way, are you using Angular or React or another frontend framework?

Thanks,
Tommy

[pvkndux]

Hello @tommy,

Thank you a lot for your reply,
I will do your solutions and we’ll be back to you.
I am using React.

Thank you again

[pvkndux]

Hello @tommy,

I tried your solution it works but I don’t know why but my page cannot scroll to the footer,
it is blocked on fixed height.

Do you have an idea ?

Thank you again.

[pvkndux]

Hello @tommy again,

I finally find a solution:
I import my ZoomMtg component only in useEffect of the concern component.

Thank you a lot.

[tommy (Tommy Gaessler)]

Happy to hear you got it sorted out!

Let us know if you have any other questions!

Thanks,
Tommy

[irahul8595 (Rahul)]

Hello @tommy and @pvkndux can you please help me out…my zoom is running good on specific page…but when I switch to another page it is showing black screen on whole window on every page… when i remove "import { ZoomMtg } from “@zoomus/websdk” "
this line then project is working fine all pages are visible but that time zoom is not working… so how to solve this black screen problem.

[tommy (Tommy Gaessler)]

Hey @irahul8595,

Since the original issue in this topic is solved, please create a new topic: #client-web-sdk and fill out the post template so we have enough info to help!

Thanks,
Tommy

[pvkndux]

Hello @irahul8595,

For the black screen problem, the solution I found is to import zoomMtg in your componentDidMount (or useEffet for hooks ) so it concern only the current page.

Let me know if this solve your problem

[tommy (Tommy Gaessler)]

Thanks for sharing @pvkndux!

-Tommy

[pvkndux]

You’re Welcome @tommy

[tommy (Tommy Gaessler)]

Feel free to reach out if you run into any other issues!

-Tommy

[irahul8595 (Rahul)]

Hello @pvkndux ,

I am really very sorry for I was shifted to other urgent project…Thanks for your reply.
I tried to add import zoomMtg in useEffect but i got the error. Please tell me where I is the issue.

[pvkndux]

Hello @irahul8595 ,

For the import use instead const { ZoomMtg } = require('@zoomus/websdk').
Because we cannot use the import statement inside the class or function.

Hope this will help you.

[irahul8595 (Rahul)]

Hello @pvkndux ,

Thank you so much. Its working now.
const { ZoomMtg } = require('@zoomus/websdk').–> This is very helpful, thanks for sharing this.

[pvkndux]

Hello @irahul8595 ,

You’re welcome. I am glad it helped.

[MaxM]

Hey @pvkndux and @irahul8595,

Thank you for the assistance there @pvkndux! I’m glad to hear that resolved your issue @irahul8595. Let us know if you have any other questions.

Thanks,
Max