Zoom Meeting Custom Ui

Meeting SDK Web
1

When I integrated the Zoom in ReactJS, it attached to body. Is there anyway to set zoom into a div.

4 Likes
2

Hey @khanh.nguyen,

Yes there is a way to put the Meeting UI into a div.

The Zoom Meeting UI is not atcually attached to the body. The css makes it seem that way because of the following styles:

#zmmtg-root {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: black;
}

The Zoom Meeting UI will be rendered in the tag with the zmmtg-root id. You can place this anywhere in your project. You can also customize the css classes that are generated as well.

<div id="zmmtg-root"></div>

Let me know if this helps!

Thanks,
Tommy

3 Likes
3

Hey Tommy,

Thanks for you answer,
We already apply your suggest, it worked but I still have some concerns:

  1. I develop our application by React. When I integrated zoom, it had 3 cameras when I opened zoom (1 my big camera, 1 my small camera and 1 my partner camera). Can you please to guide me how to disable my big camera?
    Here is my capture
    51%20PM
    Screen Shot 2019-08-01 at 1.35.51 PM.jpg2168×1860 689 KB
  2. I would like to know how to customize camera size based on their parent html element (div size…)

Thank a lot,
Ninh

4

Hey @ninhkhong,

Happy to help!

  1. 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;
}
  1. To customize the size of the video / Zoom Web UI use the following css (feel free to customize width / height sizing)
#zmmtg-root, .meeting-client, .meeting-client-inner {
  width: 1000px;
  height: 500px;
  position: relative;
}

#wc-footer {
  bottom: auto !important;
  width: 1000px !important;
}

#dialog-join {
  width: 1000px !important;
}

#sv-active-video, .active-main, #sv-active-speaker-view, .main-layout {
  height: 500px !important;
  width: 1000px !important;
}

.suspension-window {
  transform: translate(-444px, 10px) !important;
}

#dialog-invite {
  display: none;
}

Here is what that sizing looks like

42%20AM
Screen Shot 2019-08-01 at 10.52.42 AM.jpg2032×1169 539 KB

Let me know if this helps!

Thanks,
Tommy

4 Likes
5

Thanks for your help @tommy

Khanh

1 Like
6

You are welcome! Let us know if you have any other questions!

-Tommy

7

This may also help, using the iFrame method.

-Tommy

8

Hi everyone, i facing the same issue - i have Reactjs app, and i want to integrate zoom meeting to one of my pages (React component), but SDK put <div id="zmmtg-root"></div> into <body> tag and i can’t figure out how to get it work inside my component. I have already try to put <div id="zmmtg-root"></div> in my React Component but it does’t work.

9

Hey @osulzhenko,

Can you provide steps to reproduce, or a Github repo?

What is not working? Is there an error message?

Thanks,
Tommy

11

Hi @tommy , thank you for quick response

i find out the source of my issue, i was initialising
ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk();
in js code, but instead i need to put this in componentDidMount() hook of my React component.

2 Likes
12

Hey @osulzhenko,

I am glad you found the issue, thanks for posting the solution!

-Tommy

13

This should be added to the documentation. I had to hunt through forums to find this.

3 Likes
14

Thanks for the feedback @xander.dumaine, we are in the process of re-writing our SDK docs and we will be sure to include this.

-Tommy

2 Likes
15

Hi @tommy, the previous suggestion to call the ZoomMtg.*() calls after the DOM has been loaded, componentDidMount(), didn’t solve the issue for us. We’re seeing the element <div id="zmmtg-root"></div> getting created as soon as the zoomus-jssdk library is imported (as is <div id="aria-notify-area"></div>). Here’s our code using hooks (useEffect here has same effect as componentDidMount):

import React, { useEffect } from 'react';
import { ZoomMtg } from 'zoomus-jssdk';

console.log('A #zmmtg-root element has already been appended in the body');

const ZoomContainer = function() {
  useEffect(() => {
    ZoomMtg.preLoadWasm();
    ZoomMtg.prepareJssdk();
    console.log('document now has two #zmmtg-root elements, SDK has attached itself to one created by React');
  }, []);

  return (
    <div id="zmmtg-root">
    
    </div>
  );
};
16

@sdenardi

I believe it is currently unavoidable to have <div #zmmtg-root> appended to body with the use of this sdk. As you’ve mentioned, the sdk will at least be properly attached to another div with the id. I suspect this is due to the depth first nature of querySelector or getElementById.

You can visually “clean up” the other div with

body > #zmmtg-root {
  display: none;
}
17

@edward That’s my current workaround, and yeah the fact that it does attach to the div we create is just a fortunate side-effect of the library.

18

@edward & @sdenardi - yes, this is currently correct. #zmmtg-root appends into the body on import, and needs to be hidden on load. Hiding it in this way should not influence .init() or .join() from overlaying the page when the meeting starts.

Considerations for future readers: If you’re loading another root element (like in React), you’ll need to manage/manipulate the DOM outside of the app. And make sure to include required css files in index.html, not within the app.

We’re working on improving support/usage for module importing and SPAs.

2 Likes
20

This seems to be working for React:

const zoomMeeting = document.getElementById("zmmtg-root")

// onClick handlers:

 const turnItOn = (e) => {
    e.preventDefault()
    zoomMeeting.style.display = 'flex'
    zoomMeeting.style.height = '100%'
    zoomMeeting.style.width = '100%'
    zoomMeeting.style.position = 'fixed'
    zoomMeeting.style.zIndex = '1'
    zoomMeeting.style.backgroundColor = 'black'
  }

  const 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'
  }

And when the app loads, I set #zmmtg-root “flex: none”, so it doesn’t show on load.

One strange behavior I encountered was that in React/Create-React-App, when importing { ZoomMtg } from ‘@zoomus/websdk’ the Zoom inline styles knocked out vertical scrolling everywhere in my app. Fix was to explicitly set global scrolling:

 html {
  overflow: scroll;
}
21

Hey @New_Theory, thanks for sharing this!

Just letting you know we are working on a fully customizable Web SDK that will not override styles on your app. We are releasing it sometime next year so keep an eye on our changelog.

Thanks,
Tommy

1 Like
22

Great, thx @tommy! I’ll keep an eye on the changelog.

1 Like