{"id":21319471,"url":"https://github.com/zoom/videosdk-ui-toolkit-react-sample","last_synced_at":"2026-03-02T06:31:29.715Z","repository":{"id":236359616,"uuid":"787003563","full_name":"zoom/videosdk-ui-toolkit-react-sample","owner":"zoom","description":"Use the Zoom Video SDK UI Toolkit in React","archived":false,"fork":false,"pushed_at":"2026-02-12T17:23:11.000Z","size":310,"stargazers_count":18,"open_issues_count":2,"forks_count":13,"subscribers_count":6,"default_branch":"main","last_synced_at":"2026-03-01T23:26:59.819Z","etag":null,"topics":["sample-app"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zoom.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-04-15T17:52:15.000Z","updated_at":"2026-02-14T03:50:11.000Z","dependencies_parsed_at":null,"dependency_job_id":"89862f9a-22d3-4730-baac-aecc1d699942","html_url":"https://github.com/zoom/videosdk-ui-toolkit-react-sample","commit_stats":null,"previous_names":["zoom/videosdk-ui-toolkit-react-sample"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/zoom/videosdk-ui-toolkit-react-sample","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zoom%2Fvideosdk-ui-toolkit-react-sample","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zoom%2Fvideosdk-ui-toolkit-react-sample/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zoom%2Fvideosdk-ui-toolkit-react-sample/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zoom%2Fvideosdk-ui-toolkit-react-sample/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zoom","download_url":"https://codeload.github.com/zoom/videosdk-ui-toolkit-react-sample/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zoom%2Fvideosdk-ui-toolkit-react-sample/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29994122,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-02T01:47:34.672Z","status":"online","status_checked_at":"2026-03-02T02:00:07.342Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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:42:03.320Z","updated_at":"2026-03-02T06:31:29.682Z","avatar_url":"https://github.com/zoom.png","language":"JavaScript","readme":"# Zoom Video SDK UI Toolkit React sample\n\nUse of this sample app is subject to our [Terms of Use](https://explore.zoom.us/en/video-sdk-terms/).\n\nThis repo is a [React](https://reactjs.org/) app generated via [Vite](https://vitejs.dev/) that uses the [Zoom Video SDK UI toolkit](https://developers.zoom.us/docs/video-sdk/web/) to start and joins sessions.\n\n![Zoom Video SDK](https://github.com/zoom/videosdk-ui-toolkit-web/raw/main/uitoolkitgalleryview.png)\n\n## Installation\n\nTo get started, clone the repo:\n\n`$ git clone https://github.com/zoom/videosdk-ui-toolkit-react-sample.git`\n\n## Setup\n\n1. Once cloned, navigate to the `videosdk-ui-toolkit-react-sample` directory:\n\n   `$ cd videosdk-ui-toolkit-react-sample`\n\n1. Then install the dependencies:\n\n   `$ npm install`\n\n1. Open the `videosdk-ui-toolkit-react-sample` directory in your code editor.\n\n1. Open the `src/App.js` file, and enter values for the variables:\n\n   | Variable                   | Description |\n   | -----------------------|-------------|\n   | authEndpoint          | Required, your Video SDK auth endpoint that securely generates a Video SDK JWT. [Get a Video SDK auth endpoint here.](https://github.com/zoom/videosdk-auth-endpoint-sample) |\n   | config | Your Video SDK [session details](https://developers.zoom.us/docs/video-sdk/web/ui-toolkit/#create-a-configuration-object) and [enabled features](https://developers.zoom.us/docs/video-sdk/web/ui-toolkit/#supported-features). The `videoSDKJWT` will be set from the response of your `authEndpoint`. |\n   | role | Required, `0` to specify participant, `1` to specify host. |\n\n   Example:\n\n   ```js\n   var authEndpoint = \"http://localhost:4000\";\n   var config = {\n      videoSDKJWT: \"\",\n      sessionName: \"SessionA\",\n      userName: \"UserA\",\n      sessionPasscode: \"abc123\",\n      featuresOptions: {\n         virtualBackground: {\n            enable: true,\n            virtualBackgrounds: [\n            {\n               url: \"https://images.unsplash.com/photo-1715490187538-30a365fa05bd?q=80\u0026w=1945\u0026auto=format\u0026fit=crop\",\n            },\n            ],\n         },\n      }\n   };\n   var role = 1;\n   ```\n\n1. Save `App.js`.\n\n1. Run the app:\n\n   `$ npm run dev`\n\n## Usage\n\n1. Navigate to http://localhost:5173 and click \"Join Session\".\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 React Deployment docs](https://create-react-app.dev/docs/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%2Fvideosdk-ui-toolkit-react-sample","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzoom%2Fvideosdk-ui-toolkit-react-sample","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzoom%2Fvideosdk-ui-toolkit-react-sample/lists"}