Zoom Meeting SDK with Angular

Tommy Gaessler
Zoom Developer Blog
2 min readApr 21, 2020

Easily Embed Zoom Meetings in your Angular App

Installation

To get started, clone the meetingsdk sample angular repo:

$ git clone https://github.com/zoom/meetingsdk-sample-angular.git

Setup

1. Once cloned, navigate to the meetingsdk-sample-angular directory:

$ cd meetingsdk-sample-angular

2. Then install the dependencies:

$ npm install

3. Open the meetingsdk-sample-angular directory in your code editor.

4. Open the src/app/app.component.ts file, and enter values for the variables:

Example:

 signatureEndpoint = 'http://localhost:4000'
sdkKey = 'xu3asdfaJPaA_RJW2–9l5_HAaLA'
meetingNumber = 123456789
role = 0
leaveUrl = 'http://localhost:4200'
userName = 'Angular'
userEmail = ''
password =

5. Save app.component.ts.

6. Run the app:

$ ng serve — open

Usage

1. Navigate to http://localhost:4200.

2. Click Join Meeting to join the meeting number specified in src/app/app.component.ts.

Deployment

The Angular Sample App can be easily deployed to GitHub Pages, or another static web hosting service, like an AWS S3 bucket.

GitHub Pages

1. Create a repo on GitHub.

2. Add the remote to your project:

$ git remote add origin GITHUB_URL/GITHUB_USERNAME/GITHUB_REPO_NAME.git

3. Open the angular.json file and on line 48 replace / with your GitHub repo name surrounded by slashes like this: /GITHUB_REPO_NAME/.

4. Build your project:

$ ng build — prod

5. Git add, commit, and push your project:

$ git add -A$ git commit -m "deploying to github"$ git push origin master

6. On GitHub, in your repo, navigate to the settings page, scroll down to the GitHub Pages section, and choose the master branch /docs folder for the source.

7. Now your project will be deployed to https://GITHUB_USERNAME.github.io/GITHUB_REPO_NAME.

Other Static Web Hosting

1. Build your project:

$ ng build — prod

2. Deploy the complied /docs directory to a static web hosting service, like an AWS S3 bucket.

Need help?

If you’re looking for help, try Developer Support or our Developer Forum. Priority support is also available with Premier Developer Support plans.

--

--

Tommy Gaessler
Zoom Developer Blog

Senior Developer Advocate and Software Engineer at Zoom