Hi, Is there any Angular 7 web SDK for zoom meeting integration?
If yes please provide the solution.
Thanks
Hi, Is there any Angular 7 web SDK for zoom meeting integration?
If yes please provide the solution.
Thanks
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!
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>
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
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
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.