Zoom Meeting SDK Sample Angular

Use of this sample app is subject to our Terms of Use.

NOTE: This Sample App has been updated to use SDK App type credentials instead of JWT App type credentials.

This repo is an Angular app generated via the Angular CLI that uses the Zoom Meeting SDK to start and join Zoom meetings and webinars.

Installation

To get started, clone the repo:

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

To setup and run the app you will need the Angular CLI.

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:

   NEW: To use the Component View, replace app.component.ts with app-new.component.ts. (The leaveUrl is not needed). Also, remove the Client View CSS styles on lines 27 and 28 in in angular.json.

   Variable	Description
   signatureEndpoint	Required, the endpoint url that returns a signature. Get a signature endpoint here.
   sdkKey	Required, your Zoom SDK App Key. You can get yours here.
   meetingNumber	Required, the Zoom Meeting or webinar number.
   role	Required, 0 to specify participant, 1 to specify host.
   leaveUrl	Required, the url the user is taken to once the meeting is over.
   userName	Required, a name for the user joining / starting the meeting / webinar.
   userEmail	Required for Webinar, optional for Meeting, required for meeting and webinar if registration is required. The email of the user starting or joining the meeting / webinar.
   passWord	Optional, meeting password. Leave as empty string if the meeting does not require a password.
   registrantToken	Required if your meeting or webinar requires registration.

   Example:

   signatureEndpoint = 'http://localhost:4000'
   sdkKey = 'abc123'
   meetingNumber = '123456789'
   role = 0
   leaveUrl = 'http://localhost:4200'
   userName = 'Angular'
   userEmail = ''
   passWord = ''
   registrantToken = ''

5. Save app.component.ts.

6. Run the app:

   $ ng serve --open

Usage

1. Navigate to http://localhost:4200 and click "Join Meeting".

   Client View

   

   Component View

   

Learn more about Gallery View requirements and see more product screenshots.

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 replace the value for "baseHref" with your GitHub repo name surrounded by slashes like this: /GITHUB_REPO_NAME/. Example: "baseHref": "/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.

Advanced Deployment

For more advanced instructions on deployment, see the Angular Deployment docs.

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.