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 (RequireJS, Dojo, Almond, curl.js). Only the SDK itself needs to be registered in your loader config. Internal dependencies are resolved automatically.

Replace #.#.# with the latest version number.

requirejs.config({
    paths: {
        WebVideoSDK: "https://source.zoom.us/videosdk/zoom-video-#.#.#.min",
    },
});
function loadZoomVideo() {
    return new Promise((resolve, reject) => {
        requirejs(
            ["WebVideoSDK"],
            (WebVideoSDK) => {
                const { default: ZoomVideo } = WebVideoSDK;
                resolve(ZoomVideo);
            },
            reject,
        );
    });
}
async function main() {
    const ZoomVideo = await loadZoomVideo();
    const client = ZoomVideo.createClient();
    // your code here
}

From the developer blog