Prebuilt Video UI

┌─────────────────────────────────────────────────────────────┐
│ Your Web Application                                        │
│                                                             │
│  ┌──────────────────────────────────────────────────────┐  │
│  │  Your Frontend (React/Vue/Angular/Vanilla JS)        │  │
│  │                                                        │  │
│  │  ┌──────────────────────────────────────────────┐    │  │
│  │  │  Zoom UI Toolkit                              │    │  │
│  │  │  ┌────────────────────────────────────────┐  │    │  │
│  │  │  │  Pre-built UI Components               │  │    │  │
│  │  │  │  • Video Grid/Gallery                  │  │    │  │
│  │  │  │  • Control Bar                         │  │    │  │
│  │  │  │  • Chat Panel                          │  │    │  │
│  │  │  │  • Participants List                   │  │    │  │
│  │  │  │  • Settings Panel                      │  │    │  │
│  │  │  └────────────────────────────────────────┘  │    │  │
│  │  │                                                │    │  │
│  │  │  ┌────────────────────────────────────────┐  │    │  │
│  │  │  │  Zoom Video SDK (Underlying Engine)   │  │    │  │
│  │  │  │  • WebRTC                              │  │    │  │
│  │  │  │  • Media Processing                    │  │    │  │
│  │  │  │  • Session Management                  │  │    │  │
│  │  │  └────────────────────────────────────────┘  │    │  │
│  │  └──────────────────────────────────────────────┘    │  │
│  └──────────────────────────────────────────────────────┘  │
│                                                             │
│  ┌──────────────────────────────────────────────────────┐  │
│  │  Your Backend (Node.js/Python/Any)                   │  │
│  │  ┌────────────────────────────────────────────────┐  │  │
│  │  │  JWT Generation Endpoint                        │  │  │
│  │  │  • Uses Video SDK Secret (NEVER expose!)        │  │  │
│  │  │  • Generates session tokens                     │  │  │
│  │  └────────────────────────────────────────────────┘  │  │
│  └──────────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────┘

npm install @zoom/videosdk-zoom-ui-toolkit
npm install react@18 react-dom@18  # Required peer dependency

// Backend: api/zoom-token/route.ts
import { KJUR } from 'jsrsasign';

export async function POST(request) {
  const { sessionName, role, userName } = await request.json();
  
  const payload = {
    app_key: process.env.ZOOM_VIDEO_SDK_KEY,
    role_type: role, // 0 = participant, 1 = host
    tpc: sessionName,
    version: 1,
    iat: Math.floor(Date.now() / 1000),
    exp: Math.floor(Date.now() / 1000) + 7200 // 2 hours
  };
  
  const token = KJUR.jws.JWS.sign(
    'HS256',
    JSON.stringify({ alg: 'HS256', typ: 'JWT' }),
    JSON.stringify(payload),
    process.env.ZOOM_VIDEO_SDK_SECRET
  );
  
  return Response.json({ signature: token });
}

'use client';
import { useEffect, useRef } from 'react';

export default function VideoSession({ sessionName, userName }) {
  const containerRef = useRef<HTMLDivElement>(null);
  const uitoolkitRef = useRef<any>(null);

  useEffect(() => {
    let mounted = true;

    const init = async () => {
      // Fetch JWT from your backend
      const response = await fetch('/api/zoom-token', {
        method: 'POST',
        body: JSON.stringify({ sessionName, userName, role: 1 })
      });
      const { signature } = await response.json();

      // Import UI Toolkit
      const uitoolkitModule = await import('@zoom/videosdk-zoom-ui-toolkit');
      const uitoolkit = uitoolkitModule.default;
      uitoolkitRef.current = uitoolkit;
      
      // @ts-ignore
      await import('@zoom/videosdk-ui-toolkit/dist/videosdk-zoom-ui-toolkit.css');

      if (!mounted || !containerRef.current) return;

      // Configure session
      const config = {
        videoSDKJWT: signature,
        sessionName,
        userName,
        featuresOptions: {
          video: { enable: true },
          audio: { enable: true },
          share: { enable: true },
          chat: { enable: true },
          users: { enable: true },
          settings: { enable: true }
        }
      };

      // Join session
      uitoolkit.joinSession(containerRef.current, config);
      
      uitoolkit.onSessionJoined(() => console.log('Joined'));
      uitoolkit.onSessionClosed(() => console.log('Closed'));
    };

    init();

    return () => {
      mounted = false;
      if (uitoolkitRef.current && containerRef.current) {
        uitoolkitRef.current.closeSession(containerRef.current);
        uitoolkitRef.current.destroy();
      }
    };
  }, [sessionName, userName]);

  return <div ref={containerRef} style={{ width: '100%', height: '100vh' }} />;
}

const config = {
  // ... other config
  featuresOptions: {
    preview: { enable: true },        // Pre-join device check
    video: { enable: true },
    audio: { enable: true },
    share: { enable: true },
    chat: { enable: true },
    users: { enable: true },
    settings: { enable: true },
    virtualBackground: {
      enable: true,
      virtualBackgrounds: [
        { url: '/bg1.jpg', displayName: 'Office' }
      ]
    },
    recording: { enable: false },     // Requires paid plan
    caption: { enable: false },       // Requires paid plan
    theme: {
      enable: true,
      defaultTheme: 'dark'            // 'light' | 'dark' | 'blue' | 'green'
    }
  }
};

// Single call gets you complete video UI
uitoolkit.joinSession(container, config);

// Show individual pieces where you want
uitoolkit.joinSession(container, config);
uitoolkit.showControlsComponent(controlsContainer);
uitoolkit.showChatComponent(chatContainer);
uitoolkit.showUsersComponent(usersContainer);