Skip to content

lewgordon/websdk-sample-angular

 
 

Repository files navigation

You are required to update to version 1.7.4. Please note that WebSDK version 1.7.3 or below will no longer be operational.

Zoom Web SDK Sample Angular

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

Installation

To get started, clone the repo:

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

Setup

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

    $ cd websdk-sample-angular

  2. Then install the dependencies:

    $ npm install

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

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

    Variable Description
    signatureEndpoint Required, the endpoint url that returns a signature. Get a signature endpoint here.
    apiKey Required, your Zoom JWT App API Key. You can get yours here.
    meetingNumber The Zoom Meeting / webinar number.
    role Required, 0 to join the meeting / webinar, 1 to start the meeting.
    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 Optional, the user joining / starting the meeting / webinar.
    passWord Optional, meeting password. Leave as empty string if the meeting does not require a password.

    Example:

    signatureEndpoint = 'http://localhost:4000'
    apiKey = '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.

    Zoom Angular Web SDK

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

    Zoom Angular Web SDK

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 Support?

The first place to look for help is on our Developer Forum, where Zoom Marketplace Developers can ask questions for public answers.

If you can’t find the answer in the Developer Forum or your request requires sensitive information to be relayed, please email us at developersupport@zoom.us.

About

Use the Zoom Web SDK in an Angular App

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 76.1%
  • JavaScript 16.0%
  • CSS 4.4%
  • HTML 3.5%