I am using Zoom web sdk 2.0.1, Angular 12 and the basic example for embedding Zoom meeting into a page. Joining the meeting works except
- there is no display on the page prior to joining the meeting. The
<!-- For Component View -->
<div id="meetingSDKElement">
<!-- Zoom Meeting SDK Component View Rendered Here -->
</div>
displays nothing initially.
- Once the meeting has been joined, the Zoom component is shown in a small popup window
- The complete html
<div class="data-container">
<div fxLayout="column" fxLayoutAlign="start center">
<span class="page-title">Virtual Dome</span>
<!-- For Component View -->
<div id="meetingSDKElement">
<!-- Zoom Meeting SDK Component View Rendered Here -->
</div>
<button mat-flat-button color="primary" (click)="getSignature()">JOIN VIA ZOOM</button>
</div>
</div>
- The complete component
import {Component, Inject, OnInit} from '@angular/core';
import ZoomMtgEmbedded from '@zoomus/websdk/embedded';
import {HttpClient} from '@angular/common/http';
import {DOCUMENT} from '@angular/common';
import {Constants} from '../shared/constants';
import {BackendService} from '../services/backend.service';
@Component({
selector: 'app-zoom',
templateUrl: './zoom.component.html',
styleUrls: ['./zoom.component.scss']
})
export class ZoomComponent implements OnInit {
userName = 'Mike Robinson';
userEmail = 'mrobinson@othenos.com';
password = '1gMsNU';
client = ZoomMtgEmbedded.createClient();
constructor(private backendService: BackendService,
public httpClient: HttpClient,
@Inject(DOCUMENT) document: any) {
}
ngOnInit() {
let meetingSDKElement = document.getElementById('meetingSDKElement')!;
this.client.init({
debug: true,
zoomAppRoot: meetingSDKElement,
language: 'en-US',
customize: {
meetingInfo: ['topic', 'host', 'mn', 'pwd', 'telPwd', 'invite', 'participant', 'dc', 'enctype'],
toolbar: {
buttons: [
{
text: 'Custom Button',
className: 'CustomButton',
onClick: () => {
console.log('custom button');
this.getSignature();
}
}
]
}
}
});
}
getSignature() {
this.backendService.getZoomSignature()
.subscribe((result) => {
const signature = result as String;
console.log("state operation status " + signature);
if (signature != null && signature.length > 0) {
this.startMeeting(signature)
}
}
)
}
startMeeting(signature: any) {
this.client.join({
apiKey: Constants.ZOOM_API_KEY,
signature: signature,
meetingNumber: Constants.ZOOM_MEETING_ID,
password: this.password,
userName: this.userName,
userEmail: this.userEmail
})
}
}
There are other errors that occur once the meeting is joined, but those are for another time.