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

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.

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

1 Like

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

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.

Hello @tommy again,

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

Thank you a lot.

1 Like

Happy to hear you got it sorted out! :slight_smile:

Let us know if you have any other questions!

Thanks,
Tommy

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.

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! :slight_smile:

Thanks,
Tommy

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

1 Like

Thanks for sharing @pvkndux! :slight_smile:

-Tommy

You’re Welcome @tommy :wink:

1 Like

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

-Tommy

1 Like