DOCSEARCHbyAlgolia
Submit Docs

Zoom Meeting SDK React Sample

repository·master·Indexed 41 days ago

https://github.com/zoom/meetingsdk-react-sample

A React application template generated via Vite that demonstrates how to integrate the Zoom Meeting SDK to start and join Zoom meetings and webinars. Includes implementation details for ZoomMtg.init and ZoomMtg.join, signature generation via an authEndpoint, and deployment guides for GitHub Pages and static web hosting.

Tokens
1.9K
Snippets
6
Records
6
Agent score
2%

What's inside Zoom Meeting SDK React Sample

  1. Deploy to GitHub Pages

    master

    Follow these steps to deploy the React sample app to GitHub Pages:

    1. Configure your authEndpoint in the source code.
    2. Create a new repository on GitHub.
    3. Add the remote to your local project:
      $ git remote add myorigin GITHUB_URL/GITHUB_USERNAME/GITHUB_REPO_NAME.git
    4. Open vite.config.ts and add base: "/GITHUB_REPO_NAME/" inside the defineConfig helper.
    5. Build the project:
      $ npm run build
    6. Rename the build folder to docs.
    7. Push your changes:
      $ git add -A
$ git commit -m "deploying to github"
$ git push myorigin main
    8. In your GitHub repository settings, navigate to GitHub Pages, select the main branch and the /docs folder as the source.
    # Example deployment commands
$ npm run build
$ mv build docs
$ git add -A
$ git commit -m "deploying to github"
$ git push myorigin main

  2. Install and Setup the Zoom Meeting SDK React Sample

    master

    To run the sample application locally, clone the repository, install dependencies, and configure your meeting credentials in src/App.tsx.

    Installation

    $ git clone https://github.com/zoom/meetingsdk-react-sample.git
$ cd meetingsdk-react-sample
$ npm install

    Configuration

    Open src/App.tsx and update the following variables with your Zoom credentials.

    Note: If you want to use the Component View instead of the Client View, replace App.tsx with App-New.tsx (the leaveUrl variable is not required for Component View).

    VariableDescription
    authEndpointRequired. Your Meeting SDK auth endpoint that securely generates a Meeting SDK JWT.
    meetingNumberRequired. The Zoom Meeting or webinar number.
    passWordOptional. Meeting password. Use an empty string if not required.
    roleRequired. 0 for participant, 1 for host.
    userNameRequired. Name of the user joining/starting the meeting.
    userEmailRequired for Webinar; optional for Meeting (unless registration is required).
    registrantTokenRequired if the meeting/webinar requires registration.
    zakTokenRequired to start meetings/webinars on behalf of an external Zoom user or to join as an authenticated participant.
    leaveUrlRequired for Client View. The URL the user is redirected to after the meeting ends.

    Running the App

    After saving your changes to App.tsx, start the development server:

    $ npm run dev

    Navigate to http://localhost:5173 in your browser and click "Join Meeting".

    var authEndpoint = 'http://localhost:4000'
var meetingNumber = '123456789'
var passWord = ''
var role = 0
var userName = 'React'
var userEmail = ''
var registrantToken = ''
var zakToken = ''
var leaveUrl = 'http://localhost:5173'

  4. Join a Zoom meeting using ZoomMtg.init and ZoomMtg.join

    master

    The meeting lifecycle in this sample follows a two-step process: initializing the SDK and then joining the meeting.

    1. Initialize the SDK: Call ZoomMtg.init() with configuration options. You must provide a success callback where the actual joining logic resides.
    2. Join the meeting: Inside the success callback of init, call ZoomMtg.join() using the signature obtained from your authentication server.

    Note: Ensure ZoomMtg.preLoadWasm() and ZoomMtg.prepareWebSDK() are called at the application entry point before attempting to initialize the SDK.

    // 1. Prepare the SDK
ZoomMtg.preLoadWasm();
ZoomMtg.prepareWebSDK();

// 2. Initialize and Join
ZoomMtg.init({
  leaveUrl: "http://localhost:5173",
  patchJsMedia: true,
  leaveOnPageUnload: true,
  success: (success) => {
    ZoomMtg.join({
      signature: signature,
      meetingNumber: meetingNumber,
      passWord: passWord,
      userName: userName,
      userEmail: userEmail,
      tk: registrantToken,
      zak: zakToken,
      success: (joinSuccess) => console.log(joinSuccess),
      error: (joinError) => console.log(joinError),
    });
  },
  error: (initError) => console.log(initError),
});

  5. Configure meeting parameters in App.tsx

    master

    To use this sample, you must configure the meeting credentials and authentication details within the App component. The following variables are required to successfully join a meeting:

    • authEndpoint: The URL of your backend service used to generate the meeting signature (e.g., http://localhost:4000).
    • meetingNumber: The ID of the Zoom meeting.
    • passWord: The meeting password.
    • role: The user role (e.g., 0 for attendee).
    • userName: The display name for the user.
    • userEmail: The user's email address.
    • leaveUrl: The URL to redirect to when the user leaves the meeting.

    Optional tokens for advanced authentication include registrantToken and zakToken.

    const authEndpoint = "http://localhost:4000";
const meetingNumber = "";
const passWord = "";
const role = 0;
const userName = "React";
const userEmail = "";
const registrantToken = "";
const zakToken = "";
const leaveUrl = "http://localhost:5173";

  6. Generate a meeting signature via authEndpoint

    master

    To join a meeting, you must first fetch a signature from your authentication server. The sample implements getSignature by sending a POST request to the authEndpoint with the following JSON body:

    • meetingNumber: The meeting ID.
    • role: The user role.
    • videoWebRtcMode: Set to 1 for WebRTC mode.

    The server response must contain a signature field which is then passed to the startMeeting function.

    const getSignature = async () => {
  try {
    const req = await fetch(authEndpoint, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        meetingNumber: meetingNumber,
        role: role,
        videoWebRtcMode: 1,
      }),
    });
    const res = await req.json();
    const signature = res.signature as string;
    startMeeting(signature);
  } catch (e) {
    console.log(e);
  }
};