React Hooks

npm install @zoom/videosdk
npm install https://github.com/zoom/videosdk-react/releases/download/v0.0.1/zoom-videosdk-react-0.0.1.tgz

import { 
  useSession, 
  useSessionUsers, 
  VideoPlayerComponent, 
  VideoPlayerContainerComponent 
} from '@zoom/videosdk-react';

function VideoChat() {
  const { isInSession, isLoading, isError } = useSession(
    "session123", 
    "your_jwt_token", 
    "User Name"
  );
  
  const participants = useSessionUsers();
  
  if (isLoading) return <div>Joining session...</div>;
  if (isError) return <div>Error joining session</div>;
  
  return (
    <div>
      {isInSession && (
        <VideoPlayerContainerComponent>
          {participants.map(participant => (
            <VideoPlayerComponent 
              key={participant.userId} 
              user={participant} 
            />
          ))}
        </VideoPlayerContainerComponent>
      )}
    </div>
  );
}

const { isInSession, isLoading, isError, error } = useSession(
  topic,           // Session topic/ID
  token,           // JWT authentication token
  userName,        // Display name
  sessionPassword, // Optional session password
  sessionIdleTimeoutMins, // Optional idle timeout
  {
    disableVideo: false,
    disableAudio: false,
    language: "en-US",
    dependentAssets: "Global",
    waitBeforeJoining: 0,     // Delay before auto-joining
    endSessionOnLeave: false, // End session when host leaves
  }
);

const participants = useSessionUsers();

// participants is an array of Participant objects
participants.map(p => (
  <div key={p.userId}>
    {p.displayName} - {p.bVideoOn ? 'Video On' : 'Video Off'}
  </div>
));

const myself = useMyself();

return (
  <div>
    {myself.userName} - {myself.bVideoOn ? 'Video On' : 'Video Off'}
  </div>
);

const screenshareusers = useScreenShareUsers();

<ScreenShareContainerComponent>
  {screenshareusers.map(userId => (
    <ScreenSharePlayerComponent key={userId} userId={userId} />
  ))}
</ScreenShareContainerComponent>

const { isVideoOn, toggleVideo, setVideo } = useVideoState();

// Toggle video on/off
<button onClick={() => toggleVideo({ fps: 30 })}>
  {isVideoOn ? 'Turn Off Video' : 'Turn On Video'}
</button>

// Set video state explicitly
<button onClick={() => setVideo(true, { fps: 15 })}>
  Enable Video
</button>

const { 
  isAudioMuted, 
  isCapturingAudio, 
  toggleMute, 
  toggleCapture,
  setMute,
  setCapture
} = useAudioState();

// Toggle mute
<button onClick={toggleMute}>
  {isAudioMuted ? 'Unmute' : 'Mute'}
</button>

// Toggle audio capture
<button onClick={toggleCapture}>
  {isCapturingAudio ? 'Stop Audio' : 'Start Audio'}
</button>

const { ScreenshareRef, startScreenshare } = useScreenshare();

return (
  <div>
    <LocalScreenShareComponent ref={ScreenshareRef} />
    <button onClick={() => startScreenshare({ audio: true })}>
      Start Screen Share
    </button>
  </div>
);

<VideoPlayerContainerComponent style={{ width: '100%', height: '400px' }}>
  {participants.map(participant => (
    <VideoPlayerComponent key={participant.userId} user={participant} />
  ))}
</VideoPlayerContainerComponent>

const participants = useSessionUsers();

<VideoPlayerComponent user={participants[0]} />

<ScreenShareContainerComponent style={{ width: '100%', height: '400px' }}>
  {screenshareusers.map(userId => (
    <ScreenSharePlayerComponent key={userId} userId={userId} />
  ))}
</ScreenShareContainerComponent>

<ScreenSharePlayerComponent userId={screenshareusers[0]} />

import React from 'react';
import { 
  useSession, 
  useSessionUsers,
  useMyself,
  useVideoState,
  useAudioState,
  useScreenshare,
  useScreenShareUsers,
  VideoPlayerComponent, 
  VideoPlayerContainerComponent,
  ScreenSharePlayerComponent,
  ScreenShareContainerComponent,
  LocalScreenShareComponent
} from '@zoom/videosdk-react';

interface VideoCallProps {
  topic: string;
  token

import ZoomVideo from '@zoom/videosdk';
import { useSession, useSessionUsers } from '@zoom/videosdk-react';

// Use React hooks for common patterns
const { isInSession } = useSession(topic, token, userName);
const participants = useSessionUsers();

// Access the underlying client for advanced features
const client = ZoomVideo.createClient();
const chatClient = client.getChatClient();
const recordingClient = client.getRecordingClient();

src/
├── components/          # React components
│   ├── VideoPlayerComponent
│   ├── VideoPlayerContainerComponent
│   ├── ScreenSharePlayerComponent
│   ├── ScreenShareContainerComponent
│   └── LocalScreenShareComponent
├── hooks/               # Custom React hooks
│   ├── useSession
│   ├── useSessionUsers
│   ├── useMyself
│   ├── useVideoState
│   ├── useAudioState
│   ├── useScreenshare
│   └── useScreenShareUsers
└── index.ts             # Main exports