Zoom integration with Angular 12 | Zoom Meetings into a website

Zoom integration with Angular 12 applications, Zoom provides the Web SDK with video applications powered by Zoom’s core framework inside an Angular framework. In this article, we will demonstrate how Zoom web SDK can be used in Angular application and how to join Zoom meeting from the custom user interface.

In this Step, we create and use a Zoom JWT App in the zoom marketplace to provide API Secrets and API Key for the Zoom web SDK client.

To create a Zoom JWT App

  1. Sign in to the Zoom Market place click on Develop down menu and choose Build app option.
  2. Choose JWT app type and click on Create button.
  3. On the next page, fill out descriptive and contact information.
  4. Once you’ve accessed your API Key and API Secret and copied over any needed tokens, click Continue.
  5. On the next step, Choose “Activate your App“.

Set up the Zoom integration with Angular

Before starting Zoom integration with Angular, you first need to create an Angular app. For instructions, on How do I create an Angular project?

Once the Angular project is created, Install the Zoom web SDK npm module.

npm install @zoomus/websdk –save

Create a service class using the following command.

ng generate service Zoom

In the ZoomService.ts file, import ZoomMtg and call the preLoadWasm() and prepareJssdk() functions. The following code snippets illustrates how to do generate the meeting signature to authenticate then init, and join the meeting.

import { Injectable } from '@angular/core';
import { ZoomMtg } from '@zoomus/websdk';
import { observable, Observable, of } from 'rxjs';
import { environment } from 'src/environments/environment';
import { SignatureModel, ZoomClientModel } from '../model/zoom.model';

initializeWebSDK(zoomClient: ZoomClientModel): void {

      leaveUrl: environment.leaveUrl,
      isSupportAV: true,
      success: (success: any) => {

          signature: zoomClient.signature,
          meetingNumber: zoomClient.meetingNumber,
          userName: zoomClient.userName,
          apiKey: environment.apiKey,
          userEmail: zoomClient.userEmail,
          passWord: zoomClient.passWord,
          success: (success: any) => {
          error: (error: any) => {
      error: (error: any) => {
  genrateSignature(signatureModel: SignatureModel): Observable<string> {
    let signature = ZoomMtg.generateSignature({
      meetingNumber: signatureModel.meetingNumber,
      apiKey: signatureModel.apiKey,
      apiSecret: signatureModel.apiSecret,
      role: signatureModel.role
    return of(signature)
The following directory must be globally accessible in your url path.
The following changes are required in angular.json file
           "assets": [
                "glob": "**/*",
                "input": "./node_modules/@zoomus/websdk/dist/lib/",
                "output": "./node_modules/@zoomus/websdk/dist/lib/"
            "styles": [
            "scripts": [],
            "allowedCommonJsDependencies": [

Using Zoom Service in Component

To start using our ZoomService within one of StartMeeting components we would first have to import that service and pass the path to that file and then Inject it through the constructor of our component class.

import { Component, OnInit , Inject} from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Subscription } from 'rxjs';
import { SignatureModel, StartMeeingModel, ZoomClientModel } from 'src/app/model/zoom.model';
import { ZoomService } from 'src/app/services/zoom.service';
import { environment } from 'src/environments/environment';

  selector: 'app-start-meeting',
  templateUrl: './start-meeting.component.html',
  styleUrls: ['./start-meeting.component.scss']
export class StartMeetingComponent implements OnInit {

  startMeetingForm: FormGroup;
  subcription: Subscription;
    private zoomService: ZoomService, 
    private fb: FormBuilder) {
    this.subcription = new Subscription();

  ngOnInit(): void {

  ngOnDestroy() {

  onSubmit() {

    if (this.startMeetingForm.valid) {
      let formValues: StartMeeingModel = this.startMeetingForm.value;
      let signaturePaylod: SignatureModel = {
        meetingNumber: formValues.meetingNumber,
        apiKey: environment.apiKey,
        apiSecret: environment.apiSecret,
        role: '0'
      this.subcription.add(this.zoomService.genrateSignature(signaturePaylod).subscribe((signature: string) => {
        this.handleGenrateSignature(signature, formValues);
  private handleGenrateSignature(signature: string, formValues: StartMeeingModel) {
    let meetingPayloads: ZoomClientModel = {
      meetingNumber: formValues.meetingNumber.replace(/\s/g, ""),
      passWord: formValues.passWord,
      signature: signature,
      userEmail: formValues.userEmail,
      userName: formValues.userName
    document.getElementById('zmmtg-root')!.style.display = 'block'
  private initForm() {
    this.startMeetingForm = this.fb.group({
      meetingNumber: ['', [Validators.required]],
      userName: ['', [Validators.required]],
      passWord: ['', [Validators.required]],
      userEmail: ['', [Validators.required]]

Click Join Meeting to join the meeting number specified in src/app/start-meeting.component.

zoom integration with Angular

Related Post

Source code available for download

The source code is available on Stackblitz of the Zoom integration with angular 12 | Zoom Meetings into a website.

Demo Application URL : URL or https://create-localized-datepipe-and-formatting.stackblitz.io 

Scroll to Top