jeverduzco / meetingsdk-sample-vuejs

Use the Zoom Meeting SDK in a Vue.js App

Zoom Meeting SDK Sample Vue.js 2

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

This repo is a Vue.js 2 app generated via the Vue 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-vuejs.git

Setup

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

   $ cd meetingsdk-sample-vuejs

2. Then install the dependencies:

   $ yarn install

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

4. Open the src/components/HelloWorld.vue 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:8080'
   userName = 'Vue.js'
   userEmail = ''
   password = ''

5. Save HelloWorld.vue.

6. Run the app:

   $ yarn serve

Usage

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

   

2. Click "Join Meeting" to join the meeting number specified in src/components/HelloWorld.vue.

   

Deployment

The Vue.js 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 vue.config.js file and on line 3 replace /GITHUB_REPO_NAME/ with your GitHub repo name surrounded by slashes like this: /GITHUB_REPO_NAME/.

4. Build your project:

   $ yarn build

5. Rename the dist folder to docs

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

   $ git add -A

   $ git commit -m "deploying to github"

   $ git push origin master

7. 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.

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

Other Static Web Hosting

1. Build your project:

   $ yarn build

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

Advanced Deployment

For more advanced instructions on deployment, see the Vue.js 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.