Zoom Video SDK UI Toolkit React sample

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

This repo is a React app generated via Vite that uses the Zoom Video SDK UI toolkit to start and joins sessions.

Installation

To get started, clone the repo:

$ git clone https://github.com/zoom/videosdk-ui-toolkit-react-sample.git

Setup

1. Once cloned, navigate to the videosdk-ui-toolkit-react-sample directory:

   $ cd videosdk-ui-toolkit-react-sample

2. Then install the dependencies:

   $ npm install

3. Open the videosdk-ui-toolkit-react-sample directory in your code editor.

4. Open the src/App.js file, and enter values for the variables:

   Variable	Description
   authEndpoint	Required, your Video SDK auth endpoint that securely generates a Video SDK JWT. Get a Video SDK auth endpoint here.
   config	Your Video SDK session details and enabled features. The videoSDKJWT will be set from the response of your authEndpoint.
   role	Required, 0 to specify participant, 1 to specify host.

   Example:

   var authEndpoint = "http://localhost:4000";
   var config = {
      videoSDKJWT: '',
      sessionName: 'test',
      userName: 'ZoomDev',
      sessionPasscode: '123',
      features: ['preview', 'video', 'audio', 'settings', 'users', 'chat', 'share'],
      options: { init: {}, audio: {}, video: {}, share: {}},
      virtualBackground: {
         allowVirtualBackground: true,
         allowVirtualBackgroundUpload: true,
         virtualBackgrounds: ['https://images.unsplash.com/photo-1715490187538-30a365fa05bd?q=80&w=1945&auto=format&fit=crop']
      }
   };
   var role = 1;

5. Save App.js.

6. Run the app:

   $ npm run dev

Usage

1. Navigate to http://localhost:5173 and click "Join Session".

Deployment

The React 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 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".

4. Build your project:

   $ npm run build

5. Rename the build 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:

   $ npm run build

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

Advanced Deployment

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