Using Frameworks

Some front-end web application frameworks, such as Angular, and module loaders, such as RequireJS require additional coding steps to integrate Video SDK.

Using Angular

When using the SDK with Angular, you must run the SDK outside the Angular zone and set up a zone-flags.ts file to disable unnecessary change detection and avoid performance issues.

In the src directory, create a zone-flags.ts file and add the following code:

// disable patching requestAnimationFrame
(window as any).__Zone_disable_requestAnimationFrame = true;
// disable patching specified eventNames
(window as any).__zone_symbol__UNPATCHED_EVENTS = ['message'];

Then, in your angular.json file in the polyfills array, add "src/zone-flags.ts" before zone.js.

"polyfills": [
  "src/zone-flags.ts",
  "zone.js"
]

Also add it to your tsconfig.app.json file in the include array:

"include": [
  "src/**/*.d.ts",
  "src/zone-flags.ts"
]

Finally, in your file where you are calling the init and join functions, run them outside the Angular zone. See the example for details.

Video SDK Angular example

import { Component, NgZone } from '@angular/core';
import ZoomVideo from '@zoom/videosdk';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  client: any = ZoomVideo.createClient();
  stream: any = null;
  // ...
  constructor(private ngZone: NgZone) {
  }
  // ...
  join() {
    this.ngZone.runOutsideAngular(() => {
      this.client.init('en-US').then(() => {
        this.client.join(sessionName, videoSDKJWT, userName, session, sessionPassword).then(() => {
          this.stream = this.client.getMediaStream();
          // ...
        })
      })
    })
  }
  // ...
}

Using AMD mode, RequireJS or named modules

Video SDK for web supports AMD mode with additional configuration. See the following example for details (replace #.#.# with the latest version number). This uses a promise-based approach.

// Config the external lib
requirejs.config({
    paths: {
        WebVideoSDK: "https://source.zoom.us/videosdk/zoom-video-#.#.#.min",
        JsMediaSDK_Instance:
            "https://source.zoom.us/videosdk/#.#.#/lib/js_media.min",
        "disk-file-writer":
            "https://source.zoom.us/videosdk/#.#.#/lib/js_media.min",
    },
});
// Convert the callback approach of requirejs into a promise-based approach.
async function loadZoomVideo() {
    return new Promise((resolve, reject) => {
        requirejs(["WebVideoSDK", "disk-file-writer"], (WebVideoSDK, _) => {
            window.WebVideoSDK = WebVideoSDK;
            const { default: ZoomVideo } = window.WebVideoSDK;
            return new Promise((resolve, reject) => {
                requirejs(["JsMediaSDK_Instance"], (JsMediaSDK_Instance) => {
                    window.JsMediaSDK_Instance = JsMediaSDK_Instance;
                    resolve();
                });
            }).then(() => {
                resolve(ZoomVideo);
            });
        });
    });
}
async function main() {
    const ZoomVideo = await loadZoomVideo();
    const client = ZoomVideo.createClient();
    /// your code here
}

From the developer blog