Angular Integration with JS Web SDK

Hey @waqarmirza572, thanks for posting and using Zoom!

Can you please share your code and steps to reproduce this error so I can help debug?

Thanks,
Tommy

Ok.

Following is my component Code

import { Component, OnInit } from ‘@angular/core’;
import { ZoomMtg } from ‘zoomus-jssdk’;
ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk();

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

meetingNumber: string;
userName: string;

meetConfig = {
apiKey: ‘’,
apiSecret: ‘’,
meetingNumber: this.meetingNumber,
userName: this.userName,
passWord: “”,
leaveUrl: “http://localhost:4200/test”,
role: 0
};

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

constructor() { }

ngOnInit() {
}

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

}

This is My Html Code







<input type=“text” name=“display_name” [(ngModel)]=“userName” placeholder=“Name” class=“form-control” required>


<input type=“text” name=“meeting_number” [(ngModel)]=“meetingNumber” placeholder=“Meeting Number” class=“form-control” required>

<button type=“submit” class=“btn btn-primary” (click)=“callZoom();” id=“join_meeting”>Join



This is my index.Html Code

<!doctype html>

Web Loading ...

Kindly Help me is resolving this issue.

Index.htm code is here

<!doctype html>

Web Loading ...

Hye Tommy, Forget About previous Post i have resolved above error’s. Which i posted. All Console Error’s are fixed now which comes on load. Console is clear now. When now i Enter Meeting Number and Name then

click join button it gives me following error.
{“method”:“join”,“status”:false,“errorCode”:1,“errorMessage”:“Join meeting failed!”,“result”:null}

Image is Attached for your Reference.

Hi @tommy,

As our host don’t know the login credentials,

  • How we can login through . iFrame without user entering Id and Password

  • How we can login on behalf of the user and then iFrame will start the meeting?

Regards,
Kaptan

Hey @kaptan,

If you want to start a meeting without logging in, I would suggest using the Zoom Web SDK.

You can use Zoom User-Level OAuth.

Thanks,
Tommy

Hey @waqarmirza572, glad the issue was resolved :slight_smile:

Does the meeting you are joining require a password? If so make sure it matches in your code.

Thanks,
Tommy

Hi @tommy,

At present we are . using JWT Token method, can we utilize the same for iframe authentication also?

Hey @kaptan,

Unfortunately you cannot use JWT to login to your or a users account.

You can however use JWT to put the Zoom Web SDK into your site.

Thanks,
Tommy

Hi tommy thanx for all your cooperation man.
All issues are now resolved calls are now connecting properly videos sharing are perfectly fine.
I want know from your side how can i customize div
i want to make it draggable where user want to place it on screen he can place . I customize this “zmmtg-root” when i customize this chats div’s are not visible now.
one goes one side other goes other side as show in image. In Short i want to know zmmtg-root div is reponsive or not like bootstrap? kindly help me in this regard. how can i make this reponsive. if possible how can i put this into iframe?
PNG|690x386

Hey @waqarmirza572, happy to hear it is working now! :slight_smile:

As for customizing the styling of the Web SDK we do not recommend this. We are working on a customizable / fully responsive Web SDK to release sometime next year.

You could try embedding a Zoom Web Client start / join url into an iFrame to customize:

Thanks,
Tommy

Hey @tommy thanx again for cooperation, Iframe is working is fine. I embed it into my angular app. When i click on leave meeting it redirects to your home. How can i trigger leave meeting fucntion event on my app so that i am able to close iframe on my page.? Kindly help me in this regard. Thanx in advance.

1 Like

Hey @waqarmirza572, happy to help!

Glad the iFrame is working. :slight_smile: Here are a few ideas to get handle the iFrame redirect after a meeting has ended / participant has left:

Set the post attendee url

Or

Try adding an event handler when someone clicks the end button: https://stackoverflow.com/questions/13214522/iframe-button-click-event.

Or

Listen for the Meeting Ended / Participant Left Webhook and implement code that closes the iFrame on your frontend.

Or

Make a custom button that lives outside the iFrame that ends and closes the meeting.

Or

Detect a redirect in the iFrame and close the iFrame. https://stackoverflow.com/questions/10301193/detect-redirect-in-iframe

Thanks,
Tommy

Hey @tommy thanx man. All Things are now Working fine, meetings are generating connecting and closing properly. Looking Forward for customizable integration without iframe. let me know when it is ready. Thanx again.

1 Like

@waqarmirza572,

Glad we were able to help. We will be sure to let you know when the feature would be available.

2 Likes

Hi @tommy, Show me solution for same origin policy with localhost://4200 or on mydomain when using iframe

Hey @ngoctl,

The same origin policy error is fixed. Make sure you are using https.

Thanks,
Tommy


Hey @tommy
Where button [Start Video] ?

Hey @ngoctl,

I was able to reproduce this. We believe this is a bug and we are working to fix it. JIRA: ZOOM-117488

Thanks for your patience,
Tommy

Hey Arun I am getting the same problem. Could you please tell how did you solve your problem.
Thanks