Zoom Meeting Custom Ui

[tommy (Tommy Gaessler)]

Hey @aneesh.aneesh83,

Can you share a screenshot of the issue please?

Thanks,
Tommy

[tommy (Tommy Gaessler)]

Hey @elearningevolve,

I am unable to reproduce this issue. Can you send me a github repo so I can reproduce and debug locally?

Thanks,
Tommy

[tommy (Tommy Gaessler)]

Hey @danesh, @SimoneLabianca,

Here are the features we have available currently:

Web - Native SDKs - Zoom Software Development Kit (Zoom SDK)

Right now the Web SDK has limited customization, you can see our reference for basic customization like showing / hiding certain features.

Gallery / multiple panelist view is not supported right now, but this is on our roadmap!

Thanks,
Tommy

[aneesh.aneesh83 (TechHunt)]

As you can see in this screenshot… when the screen sharing started the hosted ppl’s video went blank. It only shows black color.

[tommy (Tommy Gaessler)]

Thanks @aneesh.aneesh83,

We are taking a look to see if this is a bug. (CS-1795)

-Tommy

[ravikumar]

Hi @osulzhenko.
Can you provide steps for how you figure out this issue?

[tommy (Tommy Gaessler)]

Hey @aneesh.aneesh83,

For Webinars, you can only view host or panelist and not other participants. Does the host or panelist/s have their video on during screenshare?

Thanks,
Tommy

[tommy (Tommy Gaessler)]

Hey @ravikumar,

Let us know what issue you are running into so we can assist.

Thanks,
Tommy

[ravikumar]

Hi @tommy,
Thanks for your reply.

I am trying to add <div id="zmmtg-root"> </div> in inner component(react component) where I need to show the meeting. But still meeting has added in the index.html file.

I have added the below URLs in index.html.

<link type="text/css" rel="stylesheet" 
 ref="https://source.zoom.us/1.7.7/css/bootstrap.css" />

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

 <script src="https://source.zoom.us/1.7.7/lib/vendor/jquery.min.js"></script>

Is there any solution to add meeting div in the react component instead of adding in index.html.

[mathankumar.wse (Mathankumar)]

Hi Tommy,

We are also having the same issue.

Even if we try the method you have suggested in the following thread chat/participant panel is broken,

Zoom Meeting Custom Ui

Hey @ninhkhong, Happy to help! Can you clarify? You have 2 external cameras plugged into your computer? What do you mean by big camera, small camera, and partner camera? I am guessing partner camera is video of participant who joined meeting? To re position the floating self view camera screen you can use this css, .suspension-window { transform: translate(-444px, 10px) !important; } To customize the size of the video / Zoom Web UI use the following css (feel free to customize width / …

We are using the latest 1.7.7 SDK. Is there any better way to restrict Zoom UI to part of the screen without having any breakage to zoom functionalities?

[aneesh.aneesh83 (TechHunt)]

@tommy

view host or panelist and not other participants. Does the host or panelist/s have their video on during screenshare?

Thanks for the reply tommy. It was an UI issue… we fixed it…conflicting our bootstrap and css files with the one provided by the zoom sdk sample app…Actually we were implementing the zoom inside an iframe within our application.

[ravifabulous471 (Ravi)]

@tommy

By default zmmtg-root id. is placed insted the body tag.

How can I add it in my component below the specifc div in angular!

Help me with examples I need it in my component.

[tommy (Tommy Gaessler)]

Hey @aneesh.aneesh83,

Happy to hear you figured out the issue!

Thanks,
Tommy

[tommy (Tommy Gaessler)]

Hey @ravifabulous471, @ravikumar, @mathankumar.wse,

Currently the Web SDK is designed to place zmmtg-root to the body tag.

I suggest displaying the Web SDK in this fashion:

Force username when entering meeting using browser Zoom app

Hey @someone, The best way to use the Web SDK in a SPA is to navigate the user to a seperate path or sub domain so it does not interfere with your CSS. Then you can navigate back to your main SPA with the leaveUrl. Thanks, Tommy

We are working on making the Web SDK more customizable in the future. Stay updated here: https://marketplace.zoom.us/docs/changelog

Thanks,
Tommy

[asantech555 (asan)]

@New_Theory

turnItOff = (e) => {
    e.preventDefault()
    zoomMeeting.style.display = 'none'
    zoomMeeting.style.height = '0px'
    zoomMeeting.style.width = '0px'
    zoomMeeting.style.position = 'relative'
    zoomMeeting.style.backgroundColor = 'black'
    zoomMeeting.style.zIndex = '1'
  }

where do we use this code?

[asantech555 (asan)]

Hi bro did you find the solution for this issue.

[hrondor (Šimon)]

Hello, I have read this topic and I just want to ask, if its proper and ok method to hide “zmmtg-root” element outside the body(which is put there automatically) and then to put another “zmmtg-root” element to classic render of some React component. Im just afraid if call/Zoom GUI will show in another component properly and I wont have some problems with functionality.
Because it seems that “zmmtg-root” element outside of body has so many another components inside of it(for example <div id="meeting-app"> etc.) and my component doesnt have them so I cant see any functionality,video etc… Is there some way, how to put all stream components to render function? I know, that I can edit CSS styling of that original component outside of body to place it on position, where I want, but it isnt clean solution as put it under part of some React component.
Thanks for answer!

[adrianogaspar (Adriano)]

In my case I use Vuejs but it is the same because it is a component and I need this div inside the component and not in the body of the page. Is there any way to do this?

[tommy (Tommy Gaessler)]

Hey @asantech555,

Looks like in the main JS/TS component file.

Thanks,
Tommy

[tommy (Tommy Gaessler)]

Hey @adrianogaspar, @hrondor,

There is currently not a built in way to specify where the zmmtg-root will be appended.

You can either hide it from the page via CSS or JS, or checkout my suggestions here for single page apps:

Force username when entering meeting using browser Zoom app

Hey @someone, The best way to use the Web SDK in a SPA is to navigate the user to a seperate path or sub domain so it does not interfere with your CSS. Then you can navigate back to your main SPA with the leaveUrl. Thanks, Tommy

Thanks,
Tommy