{"id":21319459,"url":"https://github.com/zoom/meetingsdk-react-sample","last_synced_at":"2025-04-12T21:25:04.597Z","repository":{"id":38990676,"uuid":"321445715","full_name":"zoom/meetingsdk-react-sample","owner":"zoom","description":"Use the Zoom Meeting SDK in React","archived":false,"fork":false,"pushed_at":"2025-03-13T21:34:02.000Z","size":6015,"stargazers_count":163,"open_issues_count":2,"forks_count":101,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-04-04T01:07:09.745Z","etag":null,"topics":["sample-app"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zoom.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-12-14T19:03:34.000Z","updated_at":"2025-03-13T21:32:50.000Z","dependencies_parsed_at":"2024-03-12T21:42:46.096Z","dependency_job_id":"129e99bb-69a0-4ab8-9fc6-a1622b4aef92","html_url":"https://github.com/zoom/meetingsdk-react-sample","commit_stats":null,"previous_names":[],"tags_count":46,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zoom%2Fmeetingsdk-react-sample","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zoom%2Fmeetingsdk-react-sample/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zoom%2Fmeetingsdk-react-sample/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zoom%2Fmeetingsdk-react-sample/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zoom","download_url":"https://codeload.github.com/zoom/meetingsdk-react-sample/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248633186,"owners_count":21136823,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["sample-app"],"created_at":"2024-11-21T19:41:59.746Z","updated_at":"2025-04-12T21:25:04.565Z","avatar_url":"https://github.com/zoom.png","language":"TypeScript","readme":"# Zoom Meeting SDK React sample\n\nUse of this sample app is subject to our [Terms of Use](https://explore.zoom.us/en/legal/zoom-api-license-and-tou/).\n\n\nThis repo is a [React](https://reactjs.org/) app generated via [Vite](https://vitejs.dev/) that uses the [Zoom Meeting SDK](https://developers.zoom.us/docs/meeting-sdk/web/) to start and join Zoom meetings and webinars.\n\n![Zoom Meeting SDK Client View](/public/images/meetingsdk-web-client-view.gif)\n\n## Installation\n\nTo get started, clone the repo:\n\n`$ git clone https://github.com/zoom/meetingsdk-react-sample.git`\n\n## Setup\n\n1. Once cloned, navigate to the `meetingsdk-react-sample` directory:\n\n   `$ cd meetingsdk-react-sample`\n\n1. Then install the dependencies:\n\n   `$ npm install`\n\n1. Open the `meetingsdk-react-sample` directory in your code editor.\n\n1. Open the `src/App.tsx` file, and enter values for the variables:\n\n   **NEW:** To use the [Component View](https://developers.zoom.us/docs/meeting-sdk/web/component-view/), replace `App.tsx` with `App-New.tsx`. (The `leaveUrl` is not needed).\n\n   | Variable                   | Description |\n   | -----------------------|-------------|\n   | authEndpoint          | Required, your Meeting SDK auth endpoint that securely generates a Meeting SDK JWT. [Get a Meeting SDK auth endpoint here.](https://github.com/zoom/meetingsdk-sample-signature-node.js) |\n   | 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](https://developers.zoom.us/docs/meeting-sdk/developer-accounts/#get-meeting-sdk-credentials). |\n   | meetingNumber                   | Required, the Zoom Meeting or webinar number. |\n   | passWord                   | Optional, meeting password. Leave as empty string if the meeting does not require a password. |\n   | role                   | Required, `0` to specify participant, `1` to specify host. |\n   | userName                   | Required, a name for the user joining / starting the meeting / webinar. |\n   | userEmail                   | Required for Webinar, optional for Meeting, required for meeting and webinar if [registration is required](https://support.zoom.us/hc/en-us/articles/360054446052-Managing-meeting-and-webinar-registration). The email of the user starting or joining the meeting / webinar. |\n   | registrantToken            | Required if your [meeting](https://developers.zoom.us/docs/meeting-sdk/web/client-view/meetings/#join-meeting-with-registration-required) or [webinar](https://developers.zoom.us/docs/meeting-sdk/web/client-view/webinars/#join-webinar-with-registration-required) requires [registration](https://support.zoom.us/hc/en-us/articles/360054446052-Managing-meeting-and-webinar-registration). |\n   | zakToken            | Required to start meetings or webinars on external Zoom user's behalf, the [authorized Zoom user's ZAK token](https://developers.zoom.us/docs/meeting-sdk/auth/#start-meetings-and-webinars-with-a-zoom-users-zak-token). The ZAK can also be used to join as an [authenticated participant](https://support.zoom.com/hc/en/article?id=zm_kb\u0026sysparm_article=KB0063837). |\n   | leaveUrl                   | Required for Client View, the url the user is taken to once the meeting is over. |\n\n   Example:\n\n   ```js\n   var authEndpoint = 'http://localhost:4000'\n   var sdkKey = 'abc123'\n   var meetingNumber = '123456789'\n   var passWord = ''\n   var role = 0\n   var userName = 'React'\n   var userEmail = ''\n   var registrantToken = ''\n   var zakToken = ''\n   var leaveUrl = 'http://localhost:5173'\n   ```\n\n1. Save `App.tsx`.\n\n1. Run the app:\n\n   `$ npm run dev`\n\n## Usage\n\n1. Navigate to http://localhost:5173 and click \"Join Meeting\".\n\n   ### Client View\n\n   ![Zoom Meeting SDK Client View](/public/images/meetingsdk-web-client-view.gif)\n\n   ### Component View\n\n   ![Zoom Meeting SDK Component View](/public/images/meetingsdk-web-component-view.gif)\n\n   Learn more about [Gallery View requirements](https://developers.zoom.us/docs/meeting-sdk/web/gallery-view/) and [see more product screenshots](https://developers.zoom.us/docs/meeting-sdk/web/gallery-view/#how-views-look-with-and-without-sharedarraybuffer).\n\n## Deployment\n\nThe React Sample App can be easily deployed to [GitHub Pages](#github-pages), or [another static web hosting service](#other-static-web-hosting), like an AWS S3 bucket.\n\n### GitHub Pages\n\n1. Clone this repo and configure the `authEndpoint`.\n\n1. Create a new repo on [GitHub](https://github.com).\n\n1. Add the remote to your project:\n\n   `$ git remote add myorigin GITHUB_URL/GITHUB_USERNAME/GITHUB_REPO_NAME.git`\n\n1. Open the `vite.config.ts` file and add `base: \"/GITHUB_REPO_NAME/\"` in the `defineConfig` helper.\n\n1. Build your project:\n\n   `$ npm run build`\n\n1. Rename the `build` folder to `docs`\n\n1. Git add, commit, and push your project:\n\n   `$ git add -A`\n\n   `$ git commit -m \"deploying to github\"`\n\n   `$ git push myorigin main`\n\n1. On GitHub, in your repo, navigate to the \"settings\" page, scroll down to the \"GitHub Pages\" section, and choose the \"main\" branch and \"/docs\" folder for the source.\n\n1. Now your project will be deployed to https://GITHUB_USERNAME.github.io/GITHUB_REPO_NAME.\n\n### Other Static Web Hosting\n\n1. Build your project:\n\n   `$ npm run build`\n\n1. Deploy the complied `/build` directory to a static web hosting service, like an AWS S3 bucket.\n\n### Advanced Deployment\n\nFor more advanced instructions on deployment, [see the Vite Deployment docs](https://vitejs.dev/guide/build.html#deployment).\n\n## Need help?\n\nIf you're looking for help, try [Developer Support](https://devsupport.zoom.us) or our [Developer Forum](https://devforum.zoom.us). Priority support is also available with [Premier Developer Support](https://explore.zoom.us/docs/en-us/developer-support-plans.html) plans.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzoom%2Fmeetingsdk-react-sample","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzoom%2Fmeetingsdk-react-sample","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzoom%2Fmeetingsdk-react-sample/lists"}