ZOOm-JSSDK error

I’m working with angular and integrated zoom ,it is working in local but in production is not working.
I have imported zoom-jssdk module into project.
Reason: zoom-jssdk error my assumption.

How can I resolve this problem?

Hey @goalstreets

Thanks for reaching out!

Can you give me more details? Specifically how to reproduce your issue so I can debug on my end?

Try reproducing it here, I’ve installed the zoomus-jssdk into it https://stackblitz.com/edit/angular-q5maje

Thanks,
Tommy

I have installed zoom-jssdk it is working in local but not in production due to this app not getting loaded

Error in /turbo_modules/zoomus-jssdk@1.4.2/dist/zoomus-jssdk.umd.min.js (37:45859)
$ is not defined
this is the error jquery module is already installed

import { ZoomMtg } from ‘zoomus-jssdk’;
import { Injectable } from ‘@angular/core’;

@Injectable()
export class zoomService {

constructor() {

let dynamicScripts = ‘https://source.zoom.us/zoom-meeting-1.3.8.min.js’;
for (var i = 0; i < dynamicScripts .length; i++) {
let node = document.createElement(‘script’);
node.src = dynamicScripts [i];
node.type = ‘text/javascript’;
node.async = false;
node.charset = ‘utf-8’;
document.getElementsByTagName(‘head’)[0].appendChild(node);
}
}
API_KEY:any=‘xxxxxx’;
API_SECRET:any=‘xxxx’;

zoomJoinmeeting(url,meetingId,emailid) {
    ZoomMtg.setZoomJSLib('https://dmogdx0jrul3u.cloudfront.net/1.3.7/lib', '/av');
    document.getElementById('zmmtg-root').style.display="block"
    debugger;
    ZoomMtg.preLoadWasm();
    ZoomMtg.prepareJssdk();  

    const meetConfig = {
        'apiKey': this.API_KEY,
        'apiSecret': this.API_SECRET,
        'meetingNumber': meetingId,
        'userName': emailid,
        'leaveUrl': url,
        'role': 0
    };
    var signature = ZoomMtg.generateSignature({
        meetingNumber: meetConfig.meetingNumber,
        apiKey: meetConfig.apiKey,
        apiSecret: meetConfig.apiSecret,
        role: meetConfig.role,
        success: function(res) {
            console.log(res.result);
        }
    });
            ZoomMtg.init({
                leaveUrl: 'mainschedule',
                isSupportAV: true,
                success() { 
                    ZoomMtg.join({
                            meetingNumber: meetConfig.meetingNumber,
                            userName: meetConfig.userName,
                            signature: signature,
                            apiKey: meetConfig.apiKey,
                            userEmail: meetConfig.userName,
                    
                            success() {
                                console.log('join meeting success');
                            },
                            error(res) {
                                console.log("hai",res);
                            }
                        });
                },
                error(res) {
                    console.log('hi',res);
                }
            });

}
// console.log(‘checkSystemRequirements’);
// console.log(JSON.stringify(ZoomMtg.checkSystemRequirements()))
}

this is my service file

@tommy getting this error in https://stackblitz.com/edit/angular-q5maje?file=package.json

Hey @goalstreets!

Thanks for sending me this info, I was able to reproduce the issue!

Can you try adding this line after your <app-root></app-root> in index.html
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

I know you said you already imported jquery, but try adding it to your index.html and let me know if that works.

Here is my index.html file

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularZoomDebug</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</body>
</html>

And here is my component where I am using Zoom

import { Component } from '@angular/core';
import { ZoomMtg } from 'zoomus-jssdk';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-zoom-debug';

  constructor() {
    console.log(ZoomMtg.checkSystemRequirements())
  }
}

Let me know if this fixed it, if not we can try something else!

@tommy it is not working.
same error

Hey @goalstreets,

Do you have this pushed to a github repo so I could clone it and debug on my end?

Hi,

We implemented given suggestion and able to resolve to some extent. Now the issue is when it is geting loaded, dynamically few code is getting generated including styles, which is affecting our portal styles.

I have attached the code that is getting generated dynamically. Please help us in how to handle this or change this so that zoom windows shouldn’t affect and also our pages shouldn’t affect.

Thanks in advance

Swarnalatha

Hi @goalstreets,

Can you send us the code logic related to zoom, which is having issues? You can either push it to a github repo or you can email us it at developersupport@zoom.us

Let me know if you have questions.

Thanks

Hi,

I have attached the project . When we are publishing this, we are getting screen with black screen , with background as black color.

Also, dynamically code with styles is getting generated. For reference, I have attached dynamically generated code.

Please let us the process how to modify or manage the generated code. We need the solution on high priority.

Thanks in advance

Swarnalatha

Hi,

I have attached the project . When we are publishing this, we are getting screen with black screen , with background as black color.

Also, dynamically code with styles is getting generated. For reference, I have attached dynamically generated code.

Please let us the process how to modify or manage the generated code. We need the solution on high priority.

Thanks in advance

Swarnalatha

zoom.rar

@goalstreets, I am looking at this, and will update you on it shortly.

Thanks

I run with your demo, and see the block page background because of generating those two codes and use the whole page when invoking checkSystemRequirements().
Zoom websdk use window.innerWidth, window.innerHeight, it uses the entire page, SPA(simple page application), you can redirect to dependent component page use Websdk. In the feature. We plan to let customer Websdk page size instead use the whole page.

Hi,

The issue is still exists. Please can we have chat and resolve the issue as emails through is taking much turn around time.

We are paying the amounts for the plan from last 3 months and till now we couldn’t deploy in the server and using the services.

We are loosing the business. I request to you to come in the chat and will work together and resolve the issue.

We will be available any time.

Thanks in advance

Swarnalatha

direct message to me jack.yang@zoom.us use zoom client, My work time is GMT+8,