Use the Zoom Meeting SDK in React
Use of this sample app is subject to our Terms of Use.
This repo is a React app generated via Create React App that uses the Zoom Meeting SDK to start and join Zoom meetings and webinars.
To get started, clone the repo:
$ git clone https://github.com/zoom/meetingsdk-react-sample.git
Once cloned, navigate to the meetingsdk-react-sample
directory:
$ cd meetingsdk-react-sample
Then install the dependencies:
$ npm install
Open the meetingsdk-react-sample
directory in your code editor.
Open the src/App.js
file, and enter values for the variables:
NEW: To use the Component View, replace App.js
with App-New.js
. (The leaveUrl
is not needed). Also, uncomment the Component View CSS tags and comment out the Client View CSS in public/index.html
.
Variable | Description |
---|---|
authEndpoint | Required, your Meeting SDK auth endpoint that securely generates a Meeting SDK JWT. Get a Meeting SDK auth endpoint here. |
sdkKey | Required, your Zoom Meeting SDK Key or Client ID for Meeting SDK app type's created after February 11, 2023. You can get yours here. |
meetingNumber | Required, the Zoom Meeting or webinar number. |
passWord | Optional, meeting password. Leave as empty string if the meeting does not require a password. |
role | Required, 0 to specify participant, 1 to specify host. |
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. |
registrantToken | Required if your meeting or webinar requires registration. |
zakToken | Required to start meetings or webinars on external Zoom user's behalf, the authorized Zoom user's ZAK token. |
leaveUrl | Required for Client View, the url the user is taken to once the meeting is over. |
Example:
var authEndpoint = 'http://localhost:4000'
var sdkKey = 'abc123'
var meetingNumber = '123456789'
var passWord = ''
var role = 0
var userName = 'React'
var userEmail = ''
var registrantToken = ''
var zakToken = ''
var leaveUrl = 'http://localhost:3000'
Save App.js
.
Run the app:
$ npm start
Navigate to http://localhost:3000 and click "Join Meeting".
Learn more about Gallery View requirements and see more product screenshots.
The React Sample App can be easily deployed to GitHub Pages, or another static web hosting service, like an AWS S3 bucket.
Create a repo on GitHub.
Add the remote to your project:
$ git remote add origin GITHUB_URL/GITHUB_USERNAME/GITHUB_REPO_NAME.git
Open the package.json
file and on line 5 replace the homepage value ""
with your GitHub repo name with a slash in front like this: "/GITHUB_REPO_NAME"
.
Build your project:
$ npm run build
Rename the build
folder to docs
Git add, commit, and push your project:
$ git add -A
$ git commit -m "deploying to github"
$ git push origin master
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.
Now your project will be deployed to https://GITHUB_USERNAME.github.io/GITHUB_REPO_NAME.
Build your project:
$ npm run build
Deploy the complied /build
directory to a static web hosting service, like an AWS S3 bucket.
For more advanced instructions on deployment, see the React Deployment docs.
If you're looking for help, try Developer Support or our Developer Forum. Priority support is also available with Premier Developer Support plans.