Integrate Zoom SDK with React

Balamurugan — Tue, 04 Jul 2023 19:59:55 +0000

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 = "svbala99@gmail.com";

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

Communication between React Native web view and React app

Balamurugan — Tue, 04 Jul 2023 19:49:49 +0000

This is one way of data communication between React native web view and react application.

There could me many possible ways for communicating between a react native app's web view and the react application that is hosted separately. I came across such requirement and I'm sharing the solution that I decided to apply here.

First of all, let's have a basic implementation of a react application and reatc native application.

A simple React application:-

In useEffect() of App.js, add an event listener that listens for any native event. It is present within the "window" object of HTML. The addEventListener() method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target. Ref: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
In the listener function that we attach, we get the nativeEvent object, within which we can find the data that is being sent from React native or any external source that is targeted to the HTML document.
To send the message to react native from react, we can use window.ReactNativeWebView.postMessage() method. This doesn't require any additional import or any package to be added. It comes in-built with "window" object of HTML. The window.postMessage() method safely enables cross-origin communication between Window objects; e.g., between a page and a pop-up that it spawned, or between a page and an iframe embedded within it.Ref: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

A simple react native application with web view:-

Create a simple webview from any npm package
To receive messages from the website, attach a method that points to the onMessage = {} property in the webview. In that function we can handle the incoming message.
To send messages to react, we need to set ref to the web view to get the current instance of the referred object using useRef(). Attach it with ref = {webViewRef}
Using webViewRef.current.postMessage(), we can send messages to react website.
If we want to trigger something at the time of componentDidMount(), then we can do it by adding the required method at onLoadEnd() property of webview - that triggers a callback when the webview has loaded a website on it.
We have mentioned the latest version of userAgents. Also had some props enables such as domStorageEnabled, cacheEnabled, javaScriptEnabled, etc for better performance of react native screen that loads webview.
We can also show custom loaders until the site is loaded.

Sharing my Github repository here : https://github.com/svbala99/react-zoom and https://github.com/svbala99/zoomsdk-sign-generator-express

These repositories help you to setup a webview in which you can host a zoom meeting in web view in react native. The second repo is to generate secure signature. It is as dictated by official Zoom.

I hope this could be useful to somebody. Thanks for reading. Will come back with yet another interesting article. Stay healthy, take care!!!

DEV Community: Balamurugan

Integrate Zoom SDK with React

Communication between React Native web view and React app