Integrate Zoom SDK with React

A quick write up on Zoom SDK integration with React - that takes help from the repos shared by the official Zoom team.

Zoom is a well-known tool for attending meetings and webinars. Since it is widely used, Zoom developers team helps us with sample repos to encourage us quickly integrate Zoom SDk to our applications such as mobile or web.

Step 1: Develop React site

Head to https://developers.zoom.us/docs/meeting-sdk/web/ to see all the sample repos for web apps. Click on "React sample".

You can clone this repo and test it out. I've modified it and uploaded it onto my github account - which you can check it out.

In App.js, make sure you import ZoomMtg and use it:

import { ZoomMtg } from "@zoomus/websdk";

ZoomMtg.setZoomJSLib("https://source.zoom.us/2.13.0/lib", "/av");

  const sdkKey = process.env.REACT_APP_ZOOM_SDK_KEY_PROD;
  const role = 0;
  const leaveUrl = "https://zoom.us";
  const meetingNumber = 99488065055;
  const passWord = "******";
  const userName = "Test User";
  const userEmail = "[e-mail]";

Here I just retrieved the sdkkey from .env file. role 0 stands for attendee and 1 for host. We can specify leaveUrl to the desired site to which user would be taken to, upon the conclusion of the meeting. Here, I've set up a meeting from my Zoom account and mentioned my meeting number. You can replace it with yours. You can also do the same for password, username, user email.

/**
   * @async
   * @function getSignature
   * @param {Event} e
   * @description generates description by hitting the hosted git repo Express server
   * @description replace localhost 4000 with the URL where the Express server runs remotely
   */
  const getSignature = async (event) => {
    try {
      event.preventDefault();

      // hit the remote experss server to retrieve signature
      // meetingNumber and role are must.
      // role 0 means attendee, 1 stands for host
      const responseFromSignatureEndpoint = await fetch(
        "https://zoomsdk-sign-generator-express.onrender.com",
        {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            meetingNumber,
            role,
          }),
        }
      );

      // if signature is retrieved successfully, then attempt to start meeting
      const signatureJSON = await responseFromSignatureEndpoint.json();
      if (signatureJSON) {
        startMeeting(signatureJSON?.signature);
      }
    } catch (error) {
      console.error(error);
    }
  };

I just revamped the getSignature() method that was already there in the cloned repo from zoom developers. Here I made it async because we're gonna perform some async operations such as make an API call to get the signature, which is required to join the meeting.

https://zoomsdk-sign-generator-express.onrender.com

This is the URL in which I hosted the signature generator that is built on Nodejs. we shall come back to it in further steps. You can use your http://localhost:4000 or whichever local address in which your local Node server is running.

I also revamped the startMeeting() method as follows. The code is self explanatory.

/**
   * @function startMeeting
   * @param {String} signature
   * @description starts the zoom meeting
   */
  const startMeeting = (signature = null) => {
    // in the HTML document, whichever div has zmmtg-root as ID, then overwrite its style prop by display : 'block'
    document.getElementById("zmmtg-root").style.display = "block";

    // make init() from zoomSDK
    // pass success and error callbacks for init() and join()
    // all fields are mandatory
    ZoomMtg.init({
      leaveUrl,
      success: (success) => {
        //   console.log("============= Zoom init success",success)
        ZoomMtg.join({
          signature,
          sdkKey,
          meetingNumber,
          passWord,
          userName,
          userEmail,
          // success: (success) => {
          //   console.log("============= Zoom join success",success)
          // },
          // error: (error) => {
          //   console.log("============= Zoom join error", error);
          // }
        });
      },
      // error: (error) => {
      //   console.log("============= Zoom init error", error);
      // }
    });
  };

Finally the entire App.js would look something like this:-

Done. We've completed the React part of it. Now let's do the Node.JS server to serve us the signature.

Step 2: Run a NodeJS server

Head to https://github.com/zoom/meetingsdk-auth-endpoint-sample and clone this repo. This is the officially provided repo. I've modified it and placed it on my github account.

The purpose of this repo is to get meeting number and role to create a signature (JWT based) and return it. This is provided officially by zoom developers.

Only change I've made here is the creation of .env file for process.env.ZOOM_MEETING_SDK_SECRET

Issue the following commands to install the dependencies and start the NodeJS server locally on your machine.

npm i
node index.js

If you wanna host this server online for free in simple steps, you can refer my post here: https://medium.com/@svbala99/set-up-a-simple-express-server-and-deploy-it-for-free-on-render-com-1d770722d235

Step 3: Run React app that fetches signature from this NodeJS server

npm i
npm start

This would install the dependencies and start the server.
Hurray! we are done. You can see the following screens:-

Once the meeting is started by the host, you can join the meeting.

Hope this is useful for somebody who works with Zoom in React webpage. Thank you for your time, see you next time folks! Stay healthy.

React webpage - Github repository : https://github.com/svbala99/react-zoom/
NodeJS server - Github repo : https://github.com/svbala99/zoomsdk-sign-generator-express