Embed Zoom Meetings in Angular Application

5 min readSep 7, 2020

The Zoom App Marketplace is an open platform that allows third-party developers to build applications and integrations upon Zoom’s video-first unified communications platform. Leverage APIs, Webhooks and SDKs to build custom applications and super-power your business with a powerful collaboration suite.

Zoom Client SDKs allow new and existing applications to integrate Zoom’s full-featured unified communications platform.

https://marketplace.zoom.us/docs/sdk/native-sdks/web/reference

To begin development with Zoom SDKs, each developer requires a Zoom Account along with a Zoom Token and Zoom Access Token (ZAK).

A Zoom Token is the authenticated token derived from the Zoom API.

A Zoom Access Token is a unique identification and authentication token required for your app to host a meeting on behalf of another user.

This app is used to get API keys & API Secrets that can used to create signature, initiate meetings, join meetings etc.

You must require angular application where you want to integrate or embed zoom meetings.

You must also require Web API where you can call Zoom Apis (mentioned below) and send the result back to client.

Open Zoom developer account https://zoom.us/signin. After successful sign in, go to Develop drop down (third option from top right) and select Build App option and then Create JWT app as below:

https://marketplace.zoom.us/develop/create

The Web SDK enables the development of video applications powered by Zoom’s core framework inside an HTML5 web client through a highly optimized Web Assembly module.

As an extension of the Zoom browser client, this SDK is intended for implementations where the end user has a low-bandwidth environment, is behind a network firewall, or has restrictions on their machine which would prevent them from installing the Zoom Desktop or Mobile Clients.

https://marketplace.zoom.us/docs/sdk/native-sdks/web

Install zoom web sdk package as below

npm install @zoomus/websdk

https://www.npmjs.com/package/@zoomus/websdk

Import the assets for zoom web sdk in the angular.json file as:

Import the styles for zoom web sdk in the angular.json file as:

Import the zoom web sdk module at the root level component (app.component.ts) as:

Each request to Start or Join a Meeting / Webinar must be verified by an encrypted signature authorizing the user to enter.

The signature is used in the ZoomMtg.join() method.

apiKey : API key of your acount
apiSecret : API secret of your account
meetingNumber : Meeting Number being joined
role : 1 for meeting host, 0 for participants & joining webinars

Signature generation process is already given (with sample code) in zoom documentation refer below:

https://marketplace.zoom.us/docs/sdk/native-sdks/web/essential/signature

C# Signature code

Before launching and joining a meeting, use ZoomMtg.preLoadWasm() to load Web Assembly files and ZoomMtg.prepareJssdk() to load JavaScript requirements onto the page.

https://marketplace.zoom.us/docs/sdk/native-sdks/web/essential/start-join-meeting

Meetings and Webinars are created in the Web SDK using the ZoomMtg.init() method.

Once created, use the ZoomMtg.join() method to join the Meeting or Webinar. The join method receives an encrypted signature , your API Key , a Meeting number , and any user settings.

Two-way audio & video is currently not supported on Internet Explorer. Loading js_media.js directly on IE will throw an error.

To avoid this, detect an IE browser and load js_media.js so that isSupportAV requires both the config and a Non-IE environment.

Code is given here:

https://marketplace.zoom.us/docs/sdk/native-sdks/web/advanced/join-meeting-ie

Zoom APIs allow developers to request information from the Zoom including but not limited to User details, Meeting reports, Dashboard data, etc. as well as perform actions on the Zoom platform on a user’s behalf, such as, creating a new user or deleting meeting recordings.

https://marketplace.zoom.us/docs/api-reference/zoom-api https://marketplace.zoom.us/docs/api-reference/using-zoom-apis

Every HTTP request made to Zoom API must be authenticated by Zoom. In order to hit any Zoom API, it is required to pass Bearer Access Token (JWT). To generate JWT token follow below steps:

JSON Web Token (JWT) offer a method to generate tokens that provide secure data transmission using a neat and compact JSON object. JWTs contain signed payload that helps establish server to server authentication.

A single JWT consists of three components: Header, Payload & Signature

npm install jsonwebtoken 
const jwt = require(jsonwebtoken'); 
const payload = { iss: this.apiKey, exp: ((new Date()).getTime() + 500) }; const zoomAccessToken = jwt.sign(payload, this.apiSecret);

You can also create JWT token from server side application C#.