Embed zoom meeting on angularjs application

Meeting SDK Web
1

Hello,

I would like to embed a zoom meeting inside my angularjs web application. I have been following the CDN sample-app-web example.

I have added scripts:

<script src="https://source.zoom.us/1.5.0/lib/vendor/react.min.js"></script>
<script src="https://source.zoom.us/1.5.0/lib/vendor/react-dom.min.js"></script>
<script src="https://source.zoom.us/1.5.0/lib/vendor/redux.min.js"></script>
<script src="https://source.zoom.us/1.5.0/lib/vendor/redux-thunk.min.js"></script>
<script src="https://source.zoom.us/1.5.0/lib/vendor/jquery.min.js"></script>
<script src="https://source.zoom.us/1.5.0/lib/vendor/lodash.min.js"></script>

<script src="https://source.zoom.us/zoom-meeting-1.5.0.min.js"></script>

I have placed the following div on my page:

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

I have created the following angularjs directive:

.directive ('zoom', function(){
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {

      console.log('checkSystemRequirements');
      console.log(JSON.stringify(ZoomMtg.checkSystemRequirements()));
      
      ZoomMtg.preLoadWasm();
      ZoomMtg.prepareJssdk();
      
      const API_KEY = '***';
      const API_SECRET = '***';
      
      const meetConfig = {
          apiKey: API_KEY,
          apiSecret: API_SECRET,
          meetingNumber:,
          userName: '',
          passWord: '',
          leaveUrl: 'https://zoom.us',
          role: 0
      };
  
      ZoomMtg.generateSignature({
          meetingNumber: meetConfig.meetingNumber,
          apiKey: meetConfig.apiKey,
          apiSecret: meetConfig.apiSecret,
          role: meetConfig.role,
          success(res) {
              console.log('signature', res.result);
              ZoomMtg.init({
                  leaveUrl: 'http://www.zoom.us',
                  success() {
                      ZoomMtg.join(
                          {
                              meetingNumber: meetConfig.meetingNumber,
                              userName: meetConfig.userName,
                              signature: res.result,
                              apiKey: meetConfig.apiKey,
                              userEmail: 'email@gmail.com',
                              passWord: meetConfig.passWord,
                              success() {
                                  console.log('join meeting success');
                              },
                              error(res) {
                                  console.log(res);
                              }
                          }
                      );
                  },
                  error(res) {
                      console.log(res);
                  }
              });
          }
      });
      
    }
  }

And I have added css:

#zmmtg-root, .meeting-client, .meeting-client-inner {
  width: 30vh;
  height: 50vh;
  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;
}

Problem:
the styles produced by webSDK are attached to the body of my application, and they are conflicting with my css class. How can I avoid that?

Thank you,
Alessandro

2

Hey @alessandro.feliziani,

Thanks for the detailed post.

We don’t suggest overwriting/changing the Web SDK CSS.

Thanks,
Tommy

3

Hi Tommy,

I have a .footer class that is being overwritten by WebSDK. Also my fonts are being overwritten. I guess I’m doing something wrong. Or is it supposed that WebSDK is placing new styles in the head of my webapp?

css
css.png388×708 7.07 KB

You wrote in " Zoom Meeting Custom Ui" that we can customize css classes that are generated. So I have added some classes to my stylesheet:
#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;
}

Is that wrong?

Also, inspecting my DOM, I noticed that I have two zmmtg-root DIVs: one added by me (where I would like the meeting to be embedded) and another one created by WebSDK. How can I avoid that?

zmmgt1
zmmgt1.png891×241 11 KB

zmmgt2

4

Hey @alessandro.feliziani,

I would suggest changing the class name to something like .my-app-footer so the Web SDK does not overwrite it.

To fix the font issue, try adding !important; to your font declartion in your css or do this to change all the fonts (even the Web SDK fonts)

* {
  font-family: fontfamilyhere;
}

It is not wrong, we just do not recommend it.

You could try adding this css to prevent the second div from displaying:

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

Let me know if that helps!

Thanks,
Tommy

5

Hi Tommy,

thank you for your suggestions.

This is how WebSDK is going to work, also on future releases? I would not expect that I have to change my css to solve conflicts, and that WebSDK is adding styles to the body of my page. It’s a bit invasive from my point of view… can zoom stylesheet just be included as a CDN resource, so that I can have a better control on it?

I look forward for integrating zoom into my platform, but at the current stage it seems too muck risky.

Thank you for your support.

6

Hey @alessandro.feliziani,

Thanks for your feedback.

We will have a No-UI Zoom SDK that can be customizable in the future, most likely early next year.

You can follow our release log here.

Thanks,
Tommy