Zoom Meeting SDK Web Sample

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

The Zoom Meeting SDK for web embeds Zoom Meeting and Webinar experiences directly in your web application using a highly optimized WebAssembly module. Get started with the @zoom/meetingsdk npm package.

🚀 Quick Start

1. Clone the Repository

git clone https://github.com/zoom/sample-app-web.git
cd sample-app-web

2. Choose Your Implementation

This repository contains three different implementation approaches:

Implementation	Technology	Port	UI	Use Case
Components	React + TypeScript + Vite	3000	Component View	Modern, flexible component-based integration
Local	React + Webpack + NPM	9999	Client View	Traditional client view with npm packages
CDN	Vanilla JS + Webpack + CDN	9999	Client View	Simple CDN-based integration

Navigate to your preferred implementation:

cd Components    # or Local, or CDN

3. Install Dependencies

npm install

Note: For Node.js 16, use npm install --force

4. Set Up Authentication Backend

The Meeting SDK requires a signature from an authentication backend:

git clone https://github.com/zoom/meetingsdk-auth-endpoint-sample --depth 1
cd meetingsdk-auth-endpoint-sample
cp .env.example .env

Edit .env with your credentials:

CLIENT_SECRET=your_client_secret_here
# or
ZOOM_MEETING_SDK_SECRET=your_sdk_secret_here

Start the auth backend:

npm install && npm run start

5. Run the Sample App

npm start

📱 Usage

1. Open your browser:

   • Components: http://localhost:3000
   • Local/CDN: http://localhost:9999

2. Enter your meeting details:

   • Meeting/Webinar number
   • Passcode
   • Role (Host or Attendee)
   • Click "Join"

🎯 Implementation Types

Client View

Full-page meeting experience - Displays the Meeting SDK as a complete interface, providing the same experience as the Zoom Web Client within your web page.

Component View

Flexible component integration - Embed individual meeting components within your existing page layout for custom designs and user experiences.

📚 Additional Resources

• Meeting SDK Documentation
• Gallery View Requirements
• Authentication Guide

🏛️ Zoom for Government (ZFG)

For government applications, you need to apply for a new SDK key at ZFG Marketplace.

Option 1: Use ZFG-specific SDK version

{
  "dependencies": {
    "@zoom/meetingsdk": "3.11.2-zfg"
  }
}

Option 2: Configure ZFG endpoints

Client View:

ZoomMtg.setZoomJSLib("https://source.zoomgov.com/{VERSION}/lib", "/av");
ZoomMtg.init({
   webEndpoint: "www.zoomgov.com",
});

Component View:

const client = ZoomMtgEmbedded.createClient();
client.init({
 assetPath: 'https://source.zoomgov.com/{VERSION}/lib/av',
 webEndpoint: "www.zoomgov.com"
});

💬 Need Help?

• Developer Support - Technical support
• Developer Forum - Community discussions
• Premier Developer Support - Priority support plans