Query for Web SDK Integration with Angular 7

Hi, Is there any Angular 7 web SDK for zoom meeting integration?
If yes please provide the solution.

Thanks

Hey @gourav,

You can use our Web SDK for this.

Please see this post for instructions,

Thanks,
Tommy

Hey @tommy,

Thanks for your update.
I am following above integrations steps with angular 7, but getting below error.
ERROR in ./node_modules/zoomus-jssdk/dist/zoomus-jssdk.umd.min.js
Module not found: Error: Can’t resolve ‘jQuery’ in ‘/home/gourav/working/bitbucket/ort-client/node_modules/zoomus-jssdk/dist’

I am also following below steps, but again receiving same error.
[When i install zoomus-jssdk for my react app, it gets an jquery error](http://When i install zoomus-jssdk for my react app, it gets an jquery error).

Could you please assist.

Thanks,
Gourav

Hi @gourav,

This may be due to the syntax capitalization of Jquery within our npm package. Please refer to this link When i install zoomus-jssdk for my react app, it gets an jquery error - #9 by xander.dumaine.

Let us know if this adding a webpack alias works for you.

Thanks

You can also try adding the jQuery CDN to your index.html file.

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

Let me know if this works!

1 Like

Hi, @tommy and @michael_p.zoom
i am adding the jQuery CDN to our index.html file.

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

Receiving same error.
ERROR in ./node_modules/zoomus-jssdk/dist/zoomus-jssdk.umd.min.js
Module not found: Error: Can’t resolve ‘jQuery’ in ‘/home/gourav/working/bitbucket/ort-client/node_modules/zoomus-jssdk/dist’

Hey @gourav, I was able to get it working in Angular 7.

Can you confirm you are adding it below your <app-root></app-root> tag in index.html?

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Test</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>

If that does not help, can you send me the link to your code on github or exact steps to reproduce so I can help debug?

Thanks,
Tommy

Hi @tommy ,
I have used below steps.

npm i zoomus-jssdk --save

Add this line below the in your index.html

And then import Zoom into your component file like this,

import { ZoomMtg } from ‘zoomus-jssdk’;

app.component.ts

import { Component, OnInit } from ‘@angular/core’;
import { ZoomMtg } from ‘zoomus-jssdk’;

ZoomMtg.setZoomJSLib(‘https://dmogdx0jrul3u.cloudfront.net/1.4.2/lib’, ‘/av’)
ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk();

@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [’./app.component.css’]
})
export class AppComponent implements OnInit {

meetConfig = {
apiKey: ‘API KEY HERE’,
apiSecret: ‘API SECRET HERE’,
meetingNumber: MEETING ID,
userName: ‘Angular’,
passWord: “”,
leaveUrl: “http://localhost:4200”,
role: 0
};

signature = ZoomMtg.generateSignature({
meetingNumber: this.meetConfig.meetingNumber,
apiKey: this.meetConfig.apiKey,
apiSecret: this.meetConfig.apiSecret,
role: this.meetConfig.role,
success: function(res){
console.log(res.result);
}
});

constructor() {

}

ngOnInit() {
ZoomMtg.init({
leaveUrl: ‘http://localhost:4200’,
isSupportAV: true,
success: (res) => {
ZoomMtg.join({
meetingNumber: this.meetConfig.meetingNumber,
userName: this.meetConfig.userName,
signature: this.signature,
apiKey: this.meetConfig.apiKey,
userEmail: ‘email@gmail.com’,
passWord: this.meetConfig.passWord,
success: (res) => {
console.log(‘join meeting success’);
},
error: (res) => {
console.log(res);
}
});
},
error: (res) => {
console.log(res);
}
});
}
}

index.html
<!doctype html>

MyDreamAp2

Thanks,
Gourav Pal

Hi tommy,
I have followed this post steps: https://devforum.zoom.us/t/error-in-integration-zoom-api-with-angular-6/4830/3

Thanks,
Gourav Pal

Hey @gourav,

Thanks for following the steps. Do you still see the error, or is it working now?

-Tommy

HI @tommy,
It is not working. I receive same error.
ERROR in ./node_modules/zoomus-jssdk/dist/zoomus-jssdk.umd.min.js
Module not found: Error: Can’t resolve ‘jQuery’ in ‘/home/gourav/working/bitbucket/ort-client/node_modules/zoomus-jssdk/dist’

Thanks,
Gourav Pal

Hey @gourav,

I am having trouble reproducing the Can't resolve jQuery error.

Here is my working Angular Zoom Web SDK code.

To run,

$ git clone https://github.com/tommygaessler/zoom-angular.git

$ cd zoom-angular

$ npm install

Add your JWT app credentials and meeting number to the /src/app/app.component.ts file

$ ng serve --open

Let me know if this works for you!

Thanks,
Tommy

How to hide invitation icon, when we use zoom in iframe?
Please suggest.

Hey @gourav,

You can only hide the invitation button using the Web SDK.

Or you can use CSS to hide it, but we do not recommend this.

Thanks,
Tommy

1 Like

You know currently web SDK not supported with angular 7. Because jquery error

Hey @gourav,

Have you tried creating/installing an alias for jQuery in your angular config?

$ npm i jQuery@npm:jquery

Thanks,
Tommy

Hi @tommy,
Thank for your update. According to your last update, join meeting is working in my sample app from given angular code.
Could you please suggest the sample angular code to start a meeting.

Thanks,
Gourav Pal

1 Like

Hey @gourav,

All you have to do to start a meeting via the Web SDK is set role:1 in the meetConfig object.

Duplicate post:

This will allow the user to join the meeting as a host which starts the meeting.

Thanks,
Tommy

@tommy,
I am receiving “zoom.okta.com refused to connect.”, when i am using zoom meeting in iframe.
Please suggest.

Hey @gourav,

Can you please share your iFrame code and a screenshot of the error?

Thanks,
Tommy