Angular Integration with JS Web SDK

Hi Tommy,

We are able to see the video of participants now.
However, it’s in a speaker view.

We would like to use gallery view, does JS SDK supports Gallery View?
Is there a work around or roadmap for supporting the same?
Appreciate your support.

Regards
Arun

Hey @dumparun,

Glad you are able to see participants now :slight_smile:

Unfortunately the Web Client or SDK does not support Gallery View. We will work on adding this in the future.

Here are the current requirements for Gallery View.

Thanks,
Tommy

Thanks Tommy,

Any tentative timeline you are looking for this feature to be available?

Hey @dumparun,

I don’t have anything super specific, but sometime next year.

You can track our releases here to be notified when it’s available.

Thanks,
Tommy

Hey @tommy,

Till few days back Webclient was working fine inside iFrame, but recently it stops working and we are receiving

Refused to display

Hey @kaptan,

We are working on fixing this, apologies and thanks for your patience.

Duplicate posts:

Thanks,
Tommy

Hey @kaptan,

We will have this (/wc path) fixed in a release coming this weekend.

Thanks again for your patience.

-Tommy

Hi @tommy,

Now the x-frame issue is not there, thanks for updates.

But now when we are trying to start meeting using start URL which contains ZAK, In iFrame its redirecting to login page.

Earlier below configurations was working

We have implemented zoom webclient in iframe with https://zoom.us/wc/ Is there a way to start a meeting by passing the zak and prefer like , https://zoom.us/wc/{{meetingId}}/start?zak={{zak}}&prefer=0 ? currently the user is being redirected to login page.

1 Like

Hey @kaptan,

The host user must be logged in now to start the meeting.

You have 2 options:

  1. Sign into your Zoom account in the iFrame to start the meeting.

Or

  1. If you are already signed in to your Zoom account on your browser, then embedding the start_url in the iFrame will start the meeting as expected without having to sing in (again).

Thanks,
Tommy

Hi @tommy,

Below is our scenario

We have group of users out of them one user is admin, when all users join the meeting they need to wait until admin/host joins.

Admin is not aware of its zoom credentials, as we are managing the meetings behind the scene.

Based on above scenario how we can meet our requirement.

2 options suggested by you will not meet our requirement.

Please suggest…

Regards,
Kaptan

Hey @kaptan,

Make sure your join before Admin/host settings is turned off, you can do this when you create the meeting via the API request body settings > join_before_host, or the host / account settings:

Thanks,
Tommy

Hi @tommy,

Already did this setting, but admin wants to join, but iFrame not allowing Admin to join and its redirecting to login page, we already have ZAK.

Regards,
Kaptan

Oh I see, @kaptan.

The host now has to login or be logged in to start the meeting via iFrame.

Thanks,
Tommy

Hye tommy hope so you r doing Well i am integrating zoom in angular application
i getting this error and appplication stucks.

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