Improved React support for Video SDK

We're excited to announce improved React support for Video SDK with a new React library that makes building video chat applications with Zoom Video SDK easier than ever. This community project provides custom hooks and React components that handle the complexity of video session management, letting you focus on building great user experiences.

Building video applications with @zoom/videosdk is powerful but, integration with React requires you to write glue code to manage the application state. The new React library abstracts away the complexity while maintaining full interoperability with the core Video SDK. You can use as much or as little of it as you need - it's designed to be flexible and extensible.

Quick start

Getting started is easy, here's how to build a complete video chat application:

Installation

npm install @zoom/videosdk @zoom/videosdk-react

Video chat implementation

import { useSession, useSessionUsers, VideoPlayerComponent, VideoPlayerContainerComponent, useVideoState, useAudioState } from '@zoom/videosdk-react';
function VideoChat() {
  const { isInSession, isLoading, isError } = useSession("my-session", "your_jwt_token", "UserName");
  const { isVideoOn, toggleVideo } = useVideoState();
  const { isAudioMuted, toggleMute } = useAudioState();
  const participants = useSessionUsers();
  if (isLoading) return Joining session...;
  return (
      {isInSession && (
        <VideoPlayerContainerComponent>
          {participants.map(participant => (
            <VideoPlayerComponent key={participant.userId} user={participant} />
          ))}
        </VideoPlayerContainerComponent>
        <div>
      )}
    </div>
  );
}

With that, your video chat app is ready! You can find demo apps on GitHub for React using Vite and with Next.js.

Hooks

The library provides several custom hooks for managing the video session and media states:

  • useSession: join a video session with automatic error handling and loading states
  • useMyself: access the local user's state
  • useVideoState & useAudioState: access & modify video and audio states
  • useSessionUsers: access the state of session participants, updates automatically when participants join or leave
  • useScreenshare: enables screen sharing functionality

Components

The library includes pre-built components that abstract the video rendering logic:

  • VideoPlayerContainerComponent: Wrapper for all video players
  • VideoPlayerComponent: Renders individual participant videos given a user object
  • ScreenShareContainerComponent: Wrapper for screen share
  • ScreenSharePlayerComponent: Renders screen share streams given a userId

Get started today

Ready to build your video chat application? Here's what you need:

  1. A Zoom Video SDK account and JWT token
  2. React 18+ application
  3. Install the packages: npm install @zoom/videosdk @zoom/videosdk-react

Check out our GitHub repository for the complete documentation, examples, and contribution guidelines. You can also read through this blog to get started with a Next.js video chat application in full depth. We can't wait to see what you build!