DEV Community: Zoom

Troubleshooting Zoom Meeting SDK signature validation

just-zoomit — Thu, 01 Jun 2023 01:35:41 +0000

In this guide, we’ll cover common issues you may run into when generating a signature for the Zoom Meeting SDK.

The Zoom Meeting SDK uses a JSON Web Token (JWT) signature to authorize the SDK and validate your client’s requests to start or join a meeting.

Documentation on this is available here: Meeting SDK Authorization .

We also have a sample signature application which can be used as a good starting point: Sample Meeting SDK Signature App - Node JS

If the signature provided is invalid, the SDK will most commonly respond with one of the following error messages:

Signature is invalid
Invalid SDK App Keys

Invalid signature tokens

Signature tokens may be invalid if they are missing expected formats or fields. If you have an invalid signature, verify the following:

The token has all required fields.
Values in the token are correct
The token exp date matches the expected rules.

Timestamps and expired tokens

Zoom uses Unix Epoch time to determine the creation and expiration time of the token.

The Meeting SDK expects a minimum JWT exp date of 1800 seconds (30 mins) greater than iat value and a maximum value of 48 hours greater than the iat value.

When checking timestamps and expiration, ensure the following:

iat value is the current time.
iat value is long format, not a string.
tokenExp or exp should be in Unix Epoch time.
exp value is greater than tokenExp.

Ensure your server clock has not drifted, and verify the token’s validity period. Epochconverter provides an easy-to-use interface for getting the current date and time in epoch format and future dates.

Example Meeting SDK JWT payloads

The header for the Meeting SDK JWT will be the same across all platforms; however, the payload properties for Mobile/Desktop and Web are slightly different. See examples below:

Web SDK signature payload

For the Web Meeting SDK, include the sdkKey, mn, role, iat, exp, and tokenExp properties. The values for exp and tokenExp will be the same.



{

  "sdkKey": SDK_KEY,

  "mn": MEETING_NUMBER,

  "role": ROLE,

  "iat": 1646937553,

  "exp": 1646944753,

  "tokenExp": 1646944753

}

Mobile/Desktop SDK signature payloads

For apps built using a mobile or desktop Meeting SDK (iOS, Android, macOS, Windows, Electron), include the appKey, exp, and tokenExp properties. The values for exp and tokenExp will be the same.



{

  "appKey": SDK_KEY,

  "iat": 1646937553,

  "exp": 1646944753,

  "tokenExp": 1646944753

}

Web and Mobile/Desktop signatures

For a signature generation function that works across web, mobile, and desktop platforms, include the appKey, sdkKey, exp, tokenExp, mn, and role properties. The values for appKey and sdkKey will be the same, and the values for exp and tokenExp will be the same.



{

  "appKey": SDK_KEY,

  "sdkKey": SDK_KEY,

  "mn": MEETING_NUMBER,

  "role": ROLE,

  "iat": 1646937553,

  "exp": 1646944753,

  "tokenExp": 1646944753

}

Steps to troubleshoot

Reproduce with the sample Node.js app
If you are generating a signature in your application and still getting an invalid signature error, the best first step is to test your credentials with the sample app. For a low-effort way to test manually, take the generated signature from the sample app and enter the signature property value for the SDK. This helps to compare your signature and isolate whether your function is generating the signature correctly.
Verify with JWT.io

JWT.io provides an excellent tool to decode and debug a JSON Web Token. You can use this tool to verify your token’s structure or build a token using a header and payload.

The header includes the signing algorithm and the token type. The payload section describes the authorization granted. It contains the token’s claims, the information passed about the user, and any metadata required.

If signature validation is failing, use JWT.io to decode the signature and verify its format and property values. Here is a demo of what that looks like :

While JWT.io is a great tool for decoding the signature and verifying its format and property values, it's also useful to know how to manually generate an SDK JWT with JWT.io. The video below provides a step-by-step walkthrough of how to do this when starting with the macOS Meeting SDK. In the walkthrough, the SDK JWT used to authorize the SDK is manually generated to rule out any issues with SDK JWT authentication.

Common SDK JWT Validation Issues:

If none of the above works, here are common issues we’ve seen:

Make sure you’re using a Meeting SDK app type, not OAuth or server-to-server OAuth.
If you’re using Math.round() in JavaScript, verify that you’re not returning a timestamp 10-30 seconds greater than your intended value.
Verify the local time on your computer is auto-syncing the system time correctly. It is recommended to generate the signature on the server side, in UTC / GMT to avoid timezone/time sync issues, and also to keep your Client Secret, Secret!
Verify the JSON header or payload uses curly quotes instead of straight quotes.
Verify tokenExp is larger than exp
Verify timestamps are in Unix epoch format and satisfy the following:

Conclusion

In this article, we discussed the process of troubleshooting and resolving Zoom Meeting SDK JWT signature validation issues. We covered how to manually encode and decode SDK JWT, along with methods to validate the signature JSON headers or payload. You can apply this process to other similar situations where you have leveraged JWT with your application. Keep in mind that these methods are not exhaustive, so feel free to share any tips in the comments if anything was missed.

Additional Resources :

The Zoom GraphQL API playground: Your new favorite development tool

Ojus | Zoom Dev — Fri, 31 Mar 2023 18:03:43 +0000

The Zoom GraphQL API beta provides an alternative to our REST API that gives you the flexibility to create queries and data mutations that meet your specific use case requirements.To support your development efforts using this new API design, we’ve launched the Zoom GraphQL API playground, a powerful in-browser IDE that provides an interactive UI to test and explore Zoom’s GraphQL APIs.

In this blog post, we'll walk you through the Zoom GraphQL API Playground and show you how to navigate the APIs schema, execute queries, and perform mutations.

What are GraphQL queries and mutations?

Before we get started, it’s helpful to understand the difference between GraphQL queries and mutations.

A GraphQL query is a request for fetching specific data from a server. It allows developers to specify the fields they need and the relationships between those fields. This allows developers to get only the data they need from Zoom, reducing the amount of unnecessary data that is transferred over our network.

A GraphQL mutation, on the other hand, is a request to modify data on the server. It allows developers to create, update, or delete data in their Zoom account.

Get started with the Zoom GraphQL API playground

The Zoom GraphQL API is currently in beta. To access this powerful development tool, fill out the beta intake form here.
To get started with the Zoom GraphQL API playground, navigate to https://nws.zoom.us/graphql/playground in your browser. You will see a split-screen interface with three sections: HTTP Headers, Query Variables, and Query Editor.

The HTTP Headers section allows you to add your access token to authenticate your request.

The Query Variables section gives you the option to add variables under Variables when you are making mutations.
To authenticate your requests, add an access token to the HTTP Headers section. Here is what the syntax will look like:



{
  "Authorization": "Bearer <Token>"
}

You can use either the server-to-server OAuth access token or the user-authorized OAuth access token. To use server-to-server OAuth, generate a token with this S2S OAuth utility script and copy it to your clipboard.

The Query Editor section is where you write your GraphQL queries. As you type, the playground suggests fields, types, and arguments to make it easy for you to write your query.
Here’s an example of a query you can use to get a list of users from your Zoom account:



{
  "Authorization": "Bearer <Token>"
}



{
  users(first:100){
    edges{
    id
    firstName
    lastName
    department
    }
  }
}

Once you've written your query, click the “Play” button in the middle of the window to test it. The results will appear in the right-hand window.

Write a GraphQL API mutation

Now, let’s write a mutation to create a user with the GraphQL API playground.

In the Query Editor section, add the mutation to create users:



mutation createUser ($input: UserCreateInput!) {
    createUser (input: $input) {
        email
    id
        firstName
        lastName
        type
    }
}

In the Query Variables section, define variables to use in the GraphQL Query. Here we will input the details that are necessary to create a user:




 {
  "input": {
    "action": "CUST_CREATE",
    "userInfo": {
    "email": "test+4@test.zoom.us",
    "firstName": "Test",
    "lastName": "User 2",
    "type": "Basic"
    }
  }
}

Click the “Play” button to make the mutation. The output will only return the fields that we asked for when making the query. In this case the following fields:



email
 id
 firstName
 lastName
 type

Here is how the output looks:

To recap, in the two examples above we’ve queried (read) data and performed a mutation (wrote) on our account. For a full list of the queries and mutations available, click the “Docs” icon at the top right of the playground to browse the reference documentation or visit the Zoom GraphQL API Reference.

Why use the Zoom GraphQL API playground?

Rich user interface

The GraphQL API playground provides a modern user interface that is easy to navigate and use. It includes features like auto-complete, syntax highlighting, and query history that help streamline the development process. The playground also has a "Prettify" button that formats your query to make it more readable. You can open multiple tabs in the playground to perform a variety of operations like exploring the documentation, merging fragments into queries and changing the theme of your UI amongst others.

Interactive API exploration

The playground provides an interactive environment for exploring an API's functionality. Developers can use it to browse through the schema, view documentation, and experiment with queries and mutations. For your convenience, the Zoom GraphQL API playground has embedded documentation that allows you to see the available fields, types, and arguments for a query.

Automatic query validation

The playground automatically validates queries as they are entered, providing feedback on syntax errors and suggesting possible corrections. This helps developers avoid common mistakes, save time spent correcting errors, and improve query accuracy.

Merge fragments into queries

The "Merge fragments into query" button in the GraphQL API playground allows you to combine multiple fragments into a single GraphQL query.
When you click on the “Merge fragments into the query” button, the GraphQL playground takes all of the fragments in the current query and merges them into a single query. This is helpful when you have a large number of fragments used across your queries and you want to consolidate them into a more organized and streamlined query.

Conclusion

The Zoom GraphQL API playground is a useful tool for streamline your development process, improve your code quality, and make sure that your API is functioning correctly.

Ready to take your development game to the next level? Join the Zoom GraphQL API beta to get early access to new features and updates while shaping the roadmap for this impactful tool . What are you waiting for? Give the GraphQL playground a try!

Part 2: Section 3 - Building a meeting application in React with Zoom APIs and SDKs

just-zoomit — Tue, 28 Mar 2023 16:45:05 +0000

Build Application components continued

So far we have everything we need to interact with Zoom REST APIs and start/join the Meeting SDK. In the second part of this section, we will focus on creating the necessary React Application components.

Buttons -- InstantMeetingButton

Next we will be developing the Instant Meeting Button component, which will provide users with the ability to join an instant meeting with a single click. To begin, go to the "Button" directory located in the src/pages folder. Inside this directory, run the commands below to create the "InstantMeetingButton.js" file:

// Working DIR: frontend/src/Home/Buttons

 cd ../Home/Buttons 
touch InstantMeetingButton.js

InstantMeetingButton.js

Our next step involves creating a button that triggers the initiation of an instant Zoom meeting. To achieve this, we will make an API request to our application's backend, which will respond with the necessary information. Once we receive the response, we will use a specialized library called "useNavigate," which is built on the React framework to navigate to the Application SDK page and join the meeting successfully. To accomplish this, add the following code:

// Working Directory : frontend/src/components/pages/Dialogs
// File: InstantMeetingButton.js

import React from "react";
import { useNavigate } from "react-router-dom";

import { OrangeButton as InstantMeetingButton } from "./buttonComposition";


export function NewMeetingButton() {
  const navigate = useNavigate();

  const handleSubmit = async (event) => {
    event.preventDefault();

    try {
      const POST_OPTIONS = {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          type: 1,
        }),
      };

      const response = await fetch("/api/zoom/create", POST_OPTIONS);
      const json = await response.json();

      if (!response.ok) {
        throw new Error("Network response was not ok");
      }

      if (json.id && json.password) {
        navigate(`/msdk/?mn=${json.id}&pw=${json.password}`);
      } else {
        console.log("Error: No data received");
      }
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <InstantMeetingButton
          type="submit"
          text="videocam"
          label="New Meeting"
        />
      </form>
    </div>
  );
}

Create Dialogs

Now we're going to create the component that will handle the process of joining a meeting through a dialog box. To get begin, in your terminal navigate to the Home directory and run the following commands to create a new directory called "Dialogs" and generate a new file named "JoinMeetingModal.js":

// Working DIR: frontend/src

cd ../ && mkdir Dialogs && cd  Dialogs 

touch JoinMeetingModal.js && touch Styles.css

JoinMeetingModal

Our next step involves creating the dialog component, which will be developed using React Modal. This library provides an overlay on the screen, giving it visual precedence over all other elements. By using Modal, we can direct the user's attention to a specific point on the screen, show feedback based on our needs, and improve the user experience. The primary advantage of using modals is their independence from the active page, which enables them to add, update, delete, or view information without changing the current URL. Additionally, they are easy to open and close, and the background information is often fully or partially visible.

In the JoinMeetingModal.js file, add the following code:

import React, { useRef, useState } from "react";
import { useNavigate } from "react-router-dom";
import ReactDom from "react-dom";

import "./styles.css";

// Adpoted Component Composition pattern and pass data from child to parent pattern

export const JoinMeetingModal = ({ setShowModal }) => {
  const modalRef = useRef();

  const closeModal = (e) => {
    if (e.target === modalRef.current) {
      setShowModal(false);
    }
  };

  const [state, ] = useState({ role: 1 });
  const { role } = state;
  const id = useRef();
  const password = useRef();
  const navigate = useNavigate();

  const handleSubmit = (event) => {
    event.preventDefault();

    try {
      if (id.current.value === "" || password.current.value === "") {
        alert("Please enter a valid meeting ID and password");
      } else {
        setShowModal(false);
        navigate(`/msdk/?mn=${id.current.value}&pw=${password.current.value}`);
      }
    } catch (error) {
      console.error(error);
    }
  };

  // render the modal JSX in the portal div.
  return ReactDom.createPortal(
    <div className="container" ref={modalRef} onClick={closeModal}>
      <div className="modal">
      <h2>Join Meeting</h2>
        <div>
          <form onSubmit={handleSubmit}>
            <div>
              <input
                type="text"
                id="topic"
                placeholder="Meeting ID"
                ref={id}
                required={true}
              />
            </div>
            &nbsp; &nbsp;
            <div>
              <input
                type="text"
                id="topic"
                placeholder="Meeting Password"
                ref={password}
                required={true}
              />
            </div>
            <hr class="solid"></hr>
            <div>

              <button
                type="submit"
                style={{
                  background: "#808080",

                }}
                onClick={() => setShowModal(false)}
              >
                Cancel
              </button>

              &nbsp; &nbsp;

              <button
                type="submit"
                style={{ background: "#316efd" }}
              >
                {role === 1 ? "Join Meeting" : "Start Meeting"}
              </button>

            </div>

          </form>
        </div>
      </div>
    </div>,
    document.getElementById("portal")
  );
};

Add Modal Styles -- (Convert To Styled Components)

Next we will use the styled-components library, which enables developers to write CSS inside their component files. This library is highly advantageous because it simplifies the process of working with props and state. With styled-components, we do not need to manually pass props to CSS; it is automatically available. This simplifies the process of writing styles that depend on data from the component. Furthermore, styled-components make it possible to keep everything in one file, making it easy to export and reuse components throughout the application.

In the styles.css file, add the following code:

#portal .container {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
  }

  .container .modal {
    z-index: 1;
    width: 350px;
    height: 300px;
    background: white;
    display:grid;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    position: relative;
    animation: animate 0.3s;
  }

  .modal input {
    border-radius: 8px;
  }

  .modal button {
    position: relative;
    bottom: 0px;
    left: 7px;
    width: 140px;
    padding: 4px 5px;
    background: grey;
    color: white;
    font-weight: bold;
    border: none;
    outline: none;
    border-radius: 12px;
    cursor: pointer;
    float : left;
    margin-right: 7px;
  }

  @keyframes animate {
    from {
      transform: scale(0.5);
    }
    to {
      transform: scale(1);
    }
  }

Install Table Dependencies

Our next step involves displaying the Zoom API response data on the UI. To achieve this, we will use the React Data Table Component, which is a simple yet flexible table library that comes with out-of-the-box features such as built-in sorting and pagination.

To install react-data-table-component, in the terminal, run the following command:


Working directory : frontend/src

cd ../../..
npm install -d react-data-table-component

Create Table

Now we're going to create the Table component directory, which will include the TableComponents.js file that will handle component styles and the dateTime.js file that will handle the rendering of the date. To begin, run the following commands in the src directory to create a new directory called "Table" and generate the necessary files - Table.js, TableComponents.js, and dateTime.js:

// Working DIR: frontend/src

cd pages/Home && mkdir Table && cd Table
touch Table.js TableComponents.js dateTime.js

Date & Time

The Date & Time will handle render the date and to the table. In the dateTime.js file, add the following code:


// Working Directory : frontend/src/components/pages/Home/Table/
// File: dateTime.js

const timeOptions = { hour: "2-digit", minute: "2-digit" };
const dateOptions = {
  weekday: "long",
  year: "numeric",
  month: "long",
  day: "numeric",
};

export const element = (
  <div>
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
      }}
    >
      <h1>{new Date().toLocaleTimeString([], timeOptions)}</h1>
      <h2>{new Date().toLocaleDateString("en-us", dateOptions)}</h2>
    </div>
  </div>
);

Styled Components : TableComponents.js

Next lets create the table styles in a separate file and exporting styled components from it. To achieve this, add the following code to the TableComponents.js file, and then we can import them in the desired files.

In the TableComponents.js file, add the following code:

// Working Directory : frontend/src/components/pages/Home/Table/


import styled from 'styled-components';

const CenterDiv = styled.div`
display: "flex";
flexDirection: "column";
alignItems: "center";
`;

const TableContainer = styled.div`
border: solid .2em #f5f5f5;  
border-radius: 2.5em;
width: auto;
height: auto;
background-color:#ffffff;
`;


const HoverButton = styled.button`
  transition: transform 0.2s cubic-bezier(0.235, 0, 0.05, 0.95);
  box-shadow: 0px 15px 20px rgba(81, 83, 82, 0.4);

  &:hover {
    transform: perspective(1px) scale3d(1.044, 1.044, 1) translateZ(0) !important;
  }

  &:disabled {
    background: grey;
    cursor: not-allowed;
  }
`;


export { TableContainer, CenterDiv, HoverButton }

Table.js

Now we're going to create the Table component, which will handle the retrieval and listing of Zoom Meeting Response data inside a table. To achieve this, add the following code to the Table.js file:

// Working Directory : frontend/src/components/pages/Home/Table/

import React from "react";

import DataTable from "react-data-table-component";

import { useResource } from "../../../hooks/useResource";

import { TableContainer } from "./TableComponents";

import { element } from "./dateTime";

const customStyles = {
  rows: {
    style: {
      minHeight: "35px",
    },
  },
  headCells: {
    style: {
      paddingLeft: "8px",
      paddingRight: "8px",
    },
  },
  cells: {
    style: {
      paddingLeft: "8px",
      paddingRight: "30px",
    },
  },
};


export default function Table({shouldFetch, onRequestClearData}) {

  const listmeetings = useResource("api/zoom/listmeetings");
  const newData = listmeetings?.resources?.meetings?.map((item) => ({
    keyField: item.id,
    topic: item.topic,
  }));

  const handleDelete = (e) => {
    console.log("handleDelete", e);
    alert(`Are you sure you want to delete meeting ${e} ?`);
  };


  const columns = [
    {
      selector: (row) => (
        <div onClick={(e) => e.stopPropagation()}>{row.topic}</div>
      ),
    },
    {
      selector: (row) => (
        <div onClick={(e) => e.stopPropagation()}>{row.keyField}</div>
      ),
    },
    {
      selector: (row) =>
        row.keyField ? (
          <div>
            <button value={row.keyField} onClick={() => handleDelete(row.keyField)}>
              <i class="material-icons large icon-blue"> delete_forever </i>
            </button>
          </div>
        ) : (
          <p>Loading</p>
        ),
    },
  ];


  return (
    <div style={{ maxWidth: "100vw", overflowX: "scroll" }}>
      <TableContainer>
        <div style={{ margin: "10px" }}>
          <DataTable
            title={element}
            columns={columns}
            data={shouldFetch ? newData : []}
            // progressPending={loading}
            customStyles={customStyles}
            pagination
          />
        </div>
      </TableContainer>
    </div>
  );
}

Button Container

Now we're going to create the component that will hold all of the Application Buttons. In the src, run the following commands to change into Buttons directory and create the ButtonsContainer.js file:


// Working Directory: src/pages/Home/Table

cd ../Buttons/ && touch ButtonsContainer.js

Make Button Container

To create the ButtonsContainer component, add the following code to the ButtonsContainer.js file:

// Working Directory : frontend/src/components/pages/Buttons
// File: ButtonsContainer.js

import React, { useState } from "react";
import styled from "styled-components";

import { BlueButton as ListMeetingsButton } from "./buttonComposition";
import { BlueButton as JoinMeetingButton } from "./buttonComposition";

import { NewMeetingButton } from "../Buttons/InstantMeetingButton";
import { JoinMeetingModal } from "../Dialogs/JoinMeetingModal";

const DivContainer = styled.div`
  display: grid;
  grid-template-columns: repeat(3, 2fr);
  grid-gap: 80px;
  padding: 1;
  width: 50%;
  height: 200px;
  flex-direction: row | row-reverse | column | column-reverse;
`;

export default function ButtonsContainer(props) {
  const [showModal, setShowModal] = useState(false);

  const openModal = () => {
    setShowModal(true);
  };

  // Handle data received from child component table switch button
  const handleListMeetingsClick = (event) => {
    event.preventDefault();
    try {
      props.onDataReceived(true);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <>

        <DivContainer>
          <NewMeetingButton />

          <ListMeetingsButton text="list" label="List" onClick={handleListMeetingsClick} />

          <JoinMeetingButton text="add" label="Join" onClick={openModal} />

          {showModal ? <JoinMeetingModal setShowModal={setShowModal} /> : null}

        </DivContainer>

    </>
  );
}

Create Home Page

Next we are going to create the Home component that will hold the Button Container and Table. In the src, run the following commands to change into Home directory and create the home.js file:

// Working DIR: frontend/src


cd pages/Home && touch Home.js

Home.js

To create the Home component, add the following code to the home.js file:

// Working Directory : frontend/src/components/pages/Home
// File: Home.js

import React, { useState } from "react";
import ButtonsContainer from "./Buttons/ButtonsContainer";

import Table from "./Table/Table";

function Home() {
  const [dataFetched, setDataFetched] = useState(false);

  // Set data received from child component table switch button
  const handleDataReceived = (newData) => {
    console.log(" Handle Data received in Home.js", newData);
    setDataFetched(newData);
  };


  return (
    <>
      <div
        style={{
          display: "flex",
          margin: "auto",
          flexDirection: "row",
          height: "100vh",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        <div style={{ margin: "auto" }}>
          {" "}
          <ButtonsContainer onDataReceived={handleDataReceived} />
        </div>

        <div style={{ margin: "auto" }}> 
        {" "}

        <Table shouldFetch={dataFetched} onRequestClearData={ ()=> setDataFetched(false)} /> 
        </div>

      </div>
    </>
  );
}

export default Home;

Update App.js

Finally, update the App.js to handling the routing between home and sdk page.

import React from "react";
import { Route, Routes } from "react-router-dom";

import Home from "./components/pages/Home/Home";
import ZoomMSDK from "./components/pages/ZoomMSDK/ZoomMSDK";

function App() {
  return (
    <div className="App">
      <Routes>
        <Route exact path="/" element={<Home />} />
        <Route path="/msdk" element={<ZoomMSDK />} />
      </Routes>
    </div>
  );
}

export default App;

Test Project

In the root, run the following command then navigate to your browser.

npm run dev

You should see the following:

Conclusion

In the blog, you built a full stack React Application with Zoom Developer tools: Zoom Rest APIs and Zoom Web Meeting SDK. The app includes some commonly used features such as starting an instant meeting, making Zoom Rest APIs calls to retrieve users Zoom data, and joining Meetings with the click of a button. Hope this blog was helpful! If you're looking for help, know that you’re not alone: you can always come to the Zoom Developer Forum for help or try Developer Support.

Part 2: Section 2 - Building a meeting application in React with Zoom APIs and SDKs

just-zoomit — Tue, 28 Mar 2023 16:43:21 +0000

Build components for Meeting Conference React Application

Up until now, we have constructed the backend and started setting up the frontend. Our next step is to create the React Application components. To do so, let's first create a directory named "components" within the "src" folder, and a subdirectory within it named "hooks". The Application components will be organized into separate folders for each individual component. Each component folder will contain a JavaScript and style sheets that utilize styled components file.

In the src, run the following commands to create a components folder and hooks subdirectory folder:

#Working Directory : frontend/src/

cd frontend/src
mkdir components && cd components
mkdir hooks && cd hooks

touch useResource.js

hooks

We will begin by creating a custom hook that handles making requests to our backend server to retrieve information from Zoom. This approach allows us to separate the component logic and create reusable functions.

import { useState, useEffect } from "react";
import axios from "axios";

export const useResource = (resourceUrl) => {
    const [resources, setResources] = useState([]);
    const [error, setError] = useState(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        (async () => {
            try {
            const response = await axios.get(resourceUrl);
            setResources(response.data);
            setLoading(false);
        } catch (err) {
            setError(err);
            setLoading(false);
        }
        })();
    }, [resourceUrl]);

    return { resources, error, loading };
};

pages

Now we're going to make a folder called "pages". Inside that folder, we'll have separate folders for each page. First, we need to go to the "src" folder and make a new folder called "pages". Then, inside the "pages" folder, we'll make another folder called "Home":

// Working DIR: frontend/src

 cd ../ 

mkdir pages && cd pages && mkdir Home && cd Home

Then inside of the Home, create another folder named "Buttons":

// Working DIR: frontend/src/pages/Home

mkdir Buttons && cd Buttons

Next, we will generate a file named "buttonComposition.js". For this component, we will employ the React component composition pattern, which involves constructing components from other components using explicitly defined props. In this instance, we will implement this pattern to attain reusable application buttons.

// Working DIR: frontend/src

touch buttonComposition.js

Button Composition

Add the following code to defined the styles for the buttons in our application:

// Working Directory : frontend/src/components/pages/buttons
// File: buttonComposition.js

import { HoverButton} from "../Table/TableComponents";

export const Button = ({ size, color, text, label, ...props }) => {
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
      }}
    >
      <HoverButton
        style={{
          padding: "0",
          frontSize: size === "large" ? "32px" : "16px",
          background: "#316efd",
          backgroundColor: color,
          display: "grid",
          placeItems: "center",
          borderRadius: "25px",
          width: "100px",
          height: "100px",
          lineHeight: "100px",
          color: "white",
          transition: "transform 0.2s cubic-bezier(0.235, 0, 0.05, 0.95)",
        }}
        {...props}
      >
        <span style={{fontSize: "55px" }} class="material-icons md-55"> {text} </span>
      </HoverButton>

      <p> {label}</p>
    </div>
  );
};

export const OrangeButton = (props) => {
  return <Button {...props} color="#faa92f" />;
};

export const BlueButton = (props) => {
  return <Button {...props} color="#316efd" size="large" />;
};

Embed Zoom Meeting SDK

So far we've used design patterns to achieve component usability and make interacting with our Zoom Rest API's easier to use. Now, we're going to put Zoom Meetings and Webinars right into our React app using something called a CDN. The Zoom Meeting SDK for web has different ways to do this and we'll explore them:

The client view which provides the option to display the Meeting SDK for web as a full page.
The component view which provides the option to display the Meeting SDK for web in components on your page.

In this project, we'll use "client view" for a familiar Zoom Meeting experience. Client view is like the Zoom web client, but it's inside our own web page.

Install Meeting SDK from CDN

To install the Meeting SDK for web via the Meeting SDK CDN, we'll need to add the following scripts and elements to the index.html found in the public folder:

CDN & Dependencies scripts for client view
CSS styles element
zmmtg-root element which will handle client overlays and accessibility.

Here is what the final index.html file looks like:



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">   <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->

    <title>Zoom Clone</title>

     <!-- Add CSS scripts for Client View -->
     <link type="text/css" rel="stylesheet" href="https://source.zoom.us/2.6.0/css/bootstrap.css" />
     <link type="text/css" rel="stylesheet" href="https://source.zoom.us/2.6.0/css/react-select.css" />

     <!-- Add Meta tag to enable SharedArrayBuffer Web SDK Gallery View and Virtual Backgrounds -->
    <meta http-equiv="origin-trial" content=%REACT_APP_MSDK_ORIGIN_TRAIL% />



  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <div id="portal"></div>

       <!-- Add Scripts for Client View  -->
       <script src="https://source.zoom.us/2.6.0/lib/vendor/react.min.js"></script>
       <script src="https://source.zoom.us/2.6.0/lib/vendor/react-dom.min.js"></script>
       <script src="https://source.zoom.us/2.6.0/lib/vendor/redux.min.js"></script>
       <script src="https://source.zoom.us/2.6.0/lib/vendor/redux-thunk.min.js"></script>
       <script src="https://source.zoom.us/2.6.0/lib/vendor/lodash.min.js"></script>


       <script src="https://source.zoom.us/zoom-meeting-2.6.0.min.js"></script>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

Manage the Zoom Meeting SDK DOM element with CSS

When imported, the Meeting SDK for Web adds new elements to the DOM to handle client overlays and accessibility elements. To manage the Zoom Meeting SDK DOM element within the application, we need to hide the DOM element until it is needed. To do this, simply set the display to none. Otherwise, the screen will be black.

To achieve this, add the following code to the index.css file located in frontend/src/:

/* To hide */
#zmmtg-root {
  display: none;
}

Add Zoom MSDK Code

After adding the Zoom Meeting SDK to the project, we can expect the ZoomMtg to be accessible in the window.To begin, let's create a folder and file for the Zoom SDK. In the 'src' directory, run the following command :

// Working DIR: frontend/src

cd ../.. && mkdir ZoomMSDK
cd ZoomMSDK && touch ZoomMSDK.js

The Zoom Meeting SDK page

We can now proceed to importing the Zoom Meeting SDK into the desired component file. This file will be responsible for performing the following tasks:

Importing the necessary assets for the Zoom Meeting SDK dependency.
Calling a function to obtain an SDW JWT Token that will allow for authorized use of the Zoom Meeting SDK.
Calling a function to initialize and start/join the Zoom Meeting SDK.

To achieve this, copy and paste the code snippet provided below into the ZoomMSDK.js file:

// Working Directory : frontend/src/components/pages/buttons
// File: Buttons.js


import React, {useEffect} from "react";

declare var ZoomMtg;

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

ZoomMtg.preLoadWasm();
ZoomMtg.prepareWebSDK();


function ZoomMSDK() {
// Get Zoom MSDK KEY, Signature endpoint, and leave URL environment variables
const {
  REACT_APP_ZOOM_MSDK_KEY = "",
  REACT_APP_MSDK_SIGNATURE_ENDPOINT = "",
  LEAVE_URL = "http://localhost:3000/",
 } = process.env;

 // Get the meeting number and password from the URL parameters
 const queryParams = new URLSearchParams(window.location.search);
 const mn = queryParams.get("mn");
 const pw = queryParams.get("pw");

// Assign meeting role based on user type
const role = "1"; // 1 for host, 0 for attendee


  const getSignature = (e) => {

    if (e) e.preventDefault();


    const SIGNATURE_OPTIONS = {
      method: "POST",
      headers: { "Content-Type": "application/json"},
      body: JSON.stringify({
        meetingNumber: mn,
        role:  parseInt(role, 10),
      }),
    };

    fetch(REACT_APP_MSDK_SIGNATURE_ENDPOINT, SIGNATURE_OPTIONS)
      .then((data) => data.json())
      .then(({ signature }) => !!signature && startMeeting(signature));
  };


const startMeeting = (signature) => {
  document.getElementById("zmmtg-root").style.display = "block";

  ZoomMtg.init({
      leaveUrl: LEAVE_URL,
      success: (success) => {
        console.log(success)

        ZoomMtg.join({
          signature,
          meetingNumber: mn,
          sdkKey: REACT_APP_ZOOM_MSDK_KEY,
          userName: "Your-UserName",
          passWord: pw,
          success: (success) => {
            console.log(success)
          },
          error: (error) => {
            console.log(error)
          }
        })
      },
      error: (error) => {
        console.log(error)
      }
    })
  }


useEffect(() => {
  const mn = queryParams.get("mn");
  const pw = queryParams.get("pw");
  console.log(mn, pw)


  if (mn && pw) getSignature();

 }, []);


  return (
    <div>zoomMSDK</div>
  )
}

export default ZoomMSDK

At this point, we have what we need to intact with Zoom REST APIs and start/join the Meeting SDK. For the second part of this section, we will focus on creating the React Application components.

Part 2: Section 1 - Building a meeting application in React with Zoom APIs and SDKs

just-zoomit — Tue, 28 Mar 2023 16:43:03 +0000

Setup Zoom Rest APIs & Meeting SDK Frontend integration

Update install concurrently

Before building the frontend, we need a way to run both the server and frontend simultaneously. To achieve this, we'll use a task automation npm package called "concurrently." This package will enable us to run both the frontend and backend from the root of the application.In the root install concurrently with the following command:

npm install -d concurrently

Modify package.json

We also will need to add concurrently to the ‘scripts’ property of your package.json file in the root. In the Package.json file, add the following to the script object to start frontend and backend:

...
"scripts": {
    "start": "nodemon backend/server.js",
    "client": "npm start --prefix frontend",
    "dev": "concurrently \"npm start\" \"npm run client\"",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
...

Creating a React Project

Once the backend is set up, we can proceed with developing the frontend of the application using React. We chose React primarily because of its user-friendly learning curve and ability to reuse components. The next step involves creating a React application using Create React App.

To begin, you'll need to create a new application named "frontend" on your local machine using Create React App. Simply run the following command in your terminal to create a new application and run the project:

npx create-react-app frontend
cd frontend
npm start

When the last command runs, you’ll receive output with the URL for the local development server.Open a browser to http://localhost:3000 and you’ll find your project:

Clean-up frontend

Now that you have a working React application,let's update the App.js file in your working React application by replacing the code in the src/App.js file.To update the App.js file, follow these steps:

Open the App.js file located in the src folder of your React application.

2.Replace the entire code block with the following:

import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">

      <h1>Zoom Dev-Tools Demo</h1>
      </header>
    </div>
  );
} 

export default App;

Save the file and ensure that the changes have been successfully applied to your React application.

Open a browser to http://localhost:3000 and you’ll find your project

Install React Router

To enable navigation between views of different components in the React application, we need to install library to handle routing.In this tutorial we will use a widely used library called React Router. In order to use React Router, we need to run npm i react-router-dom to install React Router. Also, we will install styled-components for later use.

npm i react-router react-router-dom styled-components

Once React Router is installed, you can import and use its components to set up the routing in your React application.

Configuring The Router

The next thing we need to do is configuring the router. Setting up your router is incredibly simple. To get started, all you need to do is import the BrowserRouter and wrap your entire application in the router.

In the Index.js file, replace the existing code block with the following code to configure the router:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
  <BrowserRouter>
    <App />
    </BrowserRouter>
  </React.StrictMode>

);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Add Proxy to frontend/Package.json

To enable communication between the React application and the backend via API/HTTP requests, a Proxy Package.json file is required. To accomplish this, we must configure a proxy in the package.json file of the React project. By doing so, the application can simulate requests originating from the same server port. To configure the proxy, add the following line to your package file:

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://127.0.0.1:30010", // Add this

  ....

Setup .env.local file

The last thing we need to create .env.local file to set up environment variables for the frontend application.Add the following code to the .env.local file, and insert your Zoom SDK App's Key found on the App Credentials page in the Zoom App Marketplace, Meeting SDK Signature endpoint, and the Origin Trail token enable gallery mode:

SECURITY NOTE: .env.local file is local-only and can contain sensitive variables. You should add *.local to your .gitignore to avoid them being checked into git.

REACT_APP_ZOOM_MSDK_KEY = "YOUR_ZOOM_MSDK_KEY"

REACT_APP_MSDK_SIGNATURE_ENDPOINT = "http://localhost:30010/api/zoom/msig"

REACT_APP_MSDK_ORIGIN_TRAIL =""

Root folder structure

Here's how the Root folder structure should look with frontend added:


backend/
    api/
        api.js
        ...
    controllers/
        zoomControllers.js
        ...
    middlewares/
        ...
    routes/
        zoomRoutes.js
        ...
    server.js

frontend/
    node_modules/
        ...
    public/
        ...
    src/
        components/
            index.js
            ...
    .env.local
    .gitignore
    package.lock.json
    package.json
    README.md
.env/
.gitignore
package.lock.json
package.json
README.md

Test Frontend

In the root, run the following command then navigate to your browser.

npm run dev

You should see the following :

Part 1: Section 2 - Building a meeting application in React with Zoom APIs and SDKs

just-zoomit — Tue, 07 Feb 2023 17:52:39 +0000

Set up Zoom Rest APIs & Meeting SDK Backend integrations

In the first part of this blog we setup Node.js/Express, organized the files in a way that makes maintenance easy, and used the .env file to securely store the API & SDK keys and secrets. Now we ready to add the backend logic.

Install dependencies for Meeting SDK JWT

Now let's set up our Meeting SDK JWT SDK signature endpoint which will be used to authorize the Meeting SDK. To begin, in the root folder, run the following command to install the required dependencies:

npm i axios btoa jsrsasign

API File

Now we are ready to add our functions to api file which making the HTTP requests and processing the responses from the Zoom Rest APIs. In the api/api.js file, add the following functions to the code:


// Working File: api/api.js

require("dotenv").config();
const axios = require("axios");
const btoa = require("btoa");

const getAccessToken = async () => {
  try {
    base_64 = btoa(process.env.CLIENT_ID + ":" + process.env.CLIENT_SECRET);

    const resp = await axios({
      method: "POST",
      url:
        "https://zoom.us/oauth/token?grant_type=account_credentials&account_id=" +
        `${process.env.ACCOUNT_ID}`,
      headers: {
        Authorization: "Basic " + `${base_64} `,
      },
    });

    return resp.data.access_token;
  } catch (err) {
    // Handle Error Here
    console.error(err);
  }
};

const listZoomMeetings = async () => {
  try {
    const resp = await axios({
      method: "get",
      url: "https://api.zoom.us/v2/users/me/meetings",
      headers: {
        Authorization: "Bearer " + `${await getAccessToken()} `,
        "Content-Type": "application/json",
      },
    });
    const meetings = resp.data.meetings;

    const newArray = meetings.map((obj) =>
      ["id", "topic"].reduce((newObj, key) => {
        newObj[key] = obj[key];
        return newObj;
      }, {})
    );

    return newArray;
  } catch (err) {
    if (err.status == undefined) {
      console.log("Error : ", err);
    }
  }
};

const createZoomMeeting = async (type) => {
  try {


    const data = JSON.stringify({
      type: type,
    });

    const resp = await axios({
      method: "post",
      url: "https://api.zoom.us/v2/users/me/meetings",
      headers: {
        Authorization: "Bearer " + `${await getAccessToken()} `,
        "Content-Type": "application/json",
      },
      data: data,
    });

    const { id, password } = resp.data;

    return { id, password };
  } catch (err) {
    if (err.status == undefined) {
      console.log("Error : ", err);
    }
  }
};
function generateOTP() {
  var digits = "0123456789";
  let OTP = "";
  for (let i = 0; i < 6; i++) {
    OTP += digits[Math.floor(Math.random() * 10)];
  }
  return OTP;
}

// ...

module.exports = {
  createZoomMeeting, 
  listZoomMeetings,
  thirdPartyAPICall,
};

Controllers File

The next thing we need to implement are the functions that will be called from the routes to perform the desired actions. In controllers/Zoomcontrollers.js file, add the following Application functions:

Meeting SDK JWT signature generation endpoint for authorized use of the Meeting SDK.
Create Appointment Endpoint, which handle creating Zoom Meetings.
List Meeting Endpoint, which handles get Zoom Meetings.

// Working File: controllers/Zoomcontrollers.js

const asyncHandler = require("express-async-handler");

require("dotenv").config();
const KJUR = require("jsrsasign");

const {
  createZoomMeeting,
  listZoomMeetings,
  thirdPartyAPICall,
  } = require("../api/zoomAPI.js");

  const getMsdkSignature = asyncHandler(async (req, res) => {
    const iat = Math.round(new Date().getTime() / 1000) - 30;
    const exp = iat + 60 * 60 * 2;

    const oHeader = { alg: "HS256", typ: "JWT" };

    const oPayload = {
      sdkKey: process.env.ZOOM_MSDK_KEY,
      mn: req.body.meetingNumber,
      role: req.body.role,
      iat: iat,
      exp: exp,
      tokenExp: iat + 60 * 60 * 2,
    };

    const sHeader = JSON.stringify(oHeader);
    const sPayload = JSON.stringify(oPayload);
    const signature = KJUR.jws.JWS.sign(
      "HS256",
      sHeader,
      sPayload,
      process.env.ZOOM_MSDK_SECRET
    );

    res.json({
      signature: signature,
    });
  });

const CreateAppointment = asyncHandler(async (req, res) => {
  const { type} = req.body;

  if (!type) {
    res.status(400);
    throw new Error("Please Fill all the fields");
  } else {
    const { id, password } = await createZoomMeeting(type);

    res.status(201).json({ id, password });
  }
});


  const ListMeeting = asyncHandler(async (req, res) => {
    const meetings = await listZoomMeetings();
    if (meetings === undefined) {
      res.status(400);
      throw new Error("No meeting found");
    } else {
      res.status(201).json({ meetings });
    }
  });


// ...

   module.exports = {
    getMsdkSignature,
    CreateAppointment,
    ListMeeting,
    ThirdPartyAPICall,
  };

routes File

Next, all we need to do is define the endpoint URLs that will maps incoming requests to the functions. In the zoomRoutes.js, add the getMsdkSignature, CreateAppointment, and ListMeeting endpoints.

// WorkDirectory : backend/routes/
// File : zoomRoutes.js

const express = require('express');
const router = express.Router();
const {
    getMsdkSignature,
    CreateAppointment,
    ListMeeting,
    ThirdPartyAPICall,
  } = require("../controllers/zoomControllers.js");

router.route('/').post();

// Get MSDK Signature Route
router.route("/msig").post(getMsdkSignature);

// Create routes. Test with Postman
router.route("/create").post(CreateAppointment);

// Create routes Test with Postman
router.route("/listmeetings").get(ListMeeting);

// Get routes Test with Postman
router.route("/thirdparty").get(ThirdPartyAPICall);

module.exports = router; // Export the router so it can be used in server.js

The last thing we need to configure before testing the backend integration with Zoom API and SDK service is the .env file. This file contains the Zoom Rest APIs and MSDK credentials that should not be accessible to others. It is important to note,your Zoom credential should be stored locally and not be uploaded to code repositories online for everyone to read.

In the .env file, add the following code, and insert your Zoom API and Meeting SDK Apps's Key and Secret found on the App Credentials page in the Zoom App Marketplace.

PORT = 30010

# Zoom API Credentials
ACCOUNT_ID = YOUR_ACCOUNT_ID

CLIENT_ID = YOUR_CLIENT_ID

CLIENT_SECRET = YOUR_CLIENT_SECRET

ZOOM_MSDK_KEY =YOUR_ZOOM_MSDK_KEY

ZOOM_MSDK_SECRET =YOUR_ZOOM_MSDK_SECRET

Test with Postman

Now it is time to test with Postman and observe the results of GET request for listmeeting and msig endpoints.You should see your Zoom meeting in the response, assuming you have meetings scheduled !

You should see your Zoom MSDK Signature in the response!

{
    "signature": "YOUR_SIGNATURE_RETURNED"
}

Conclusion

In this tutorial, you created a Node.js / Express server that generates a Zoom Server-to-Server OAuth Token and a Meeting SDK signature via an http request from your frontend for use in the Meeting Conference React Application. In the next section, we will add the frontend for the application to the project.

Using ngrok to receive Zoom Events

Elisa Levet — Tue, 31 Jan 2023 00:37:39 +0000

Zoom utilizes webhooks as a medium to notify third-party applications about events that occur in a Zoom account.

So, instead of making repeated calls to pull data from the Zoom API, you can use webhooks to get information on events that happen in a Zoom account.

This guide covers how to implement Zoom webhooks using ngrok as our secure URL to receive events from our Zoom account.

We will use our Webhook-sample-node.js app available on Gitbhub and we will be setting up a sample app in the Zoom Marketplace.

Step 1: Setting up our local environment

Install the sample app by running the following commands in your terminal:

git clone https://github.com/zoom/webhook-sample-node.js.git
cd webhook-sample-node.js
npm install

Create a .env file by running the following command in your terminal:

touch .env

And add the following placeholder

ZOOM_WEBHOOK_SECRET_TOKEN=

Note: Do not run your app quite yet, we need to head to the Zoom Marketplace and create an app first!

Step 2: Create an app in the Marketplace.

For this tutorial will use a Webhook only app.

Log in to your Zoom account and head to the Zoom Marketplace
Click the dropdown that says Develop and then click Build App
Select the Webhook Only app and give your app a name
Make sure to fill up the required Basic information (Company name, your name, email address)
On the Feature tab, copy the Secret Token and paste it in your .env file, under the ZOOM_WEBHOOK_SECRET_TOKEN placeholder; this value will be used later to validate our endpoint URL and to start receiving event notifications.
Click the Event subscription slider and click on Add Event Subscritions, give your subscription a name; and Add events to your app to subscribe, for example:
- Meeting has been created
- Meeting has been updated
- Meeting has been deleted.

Note: for now, we will be skipping the Event Notification Endpoint URL Validation, but we will come back to this later in the guide.

Step 3: Running our sample app and ngrok

Make sure you’ve saved your project after copying the value of the Secret Token from our newly created Webhook Only sample app, into the .env file.

Now you can run your app with the following command in your terminal:

npm run start

Now that your app is running locally on port 4000, we need to expose our local server to the internet to accept post requests, we will be using ngrok for this. (If you are not an ngrok user yet, just sign up for ngrok for free and follow the steps to install ngork and connect your account)

Start your ngrok by running the following command in your terminal:

ngrok http 4000

Copy the ngrok https url displayed in the terminal and paste it in your Event notification url input, followed by the /webhook path, (it should look like this https://exampleurl.ngrok.io/webhook)

Step 4: Validate your endpoint URL

Once you have added your ngrok https url followed by /webhook path, we will have to validate our endpoint.

Click on the Validate button and expect to get a “Validated” message.
Click on Save and then Continue to make sure that your app is activated on the account and that it’s ready to receive events from Zoom.

What happened here is:
Zoom requires to manually trigger the webhook validation when you add a new event or make changes to an existing one.

Zoom uses a challenge-response check (CRC) for webhook validation and when you click the Validate button in your app, a CRC occurs and Zoom will make a POST request to your https endpoint with a challenge-request body and your app will need to response with the challenge response and a 200 or 204 HTTP response code, within 3 seconds

This is how the CRC event sent by Zoom looks like:

{
  "payload": {
    "plainToken": "qgg8vlvZRS6UYooatFL8Aw"
  },
  "event_ts": 1654503849680,
  "event": "endpoint.url_validation"
}

Our sample app, will be listening to the event ‘ednpoint.url_validation’ and once it receives it, it we will create a HMAC SHA-256 hash using the Zoom webhook secret token and the plainToken received in the CRC request body; to lastly respond to Zoom with a Challenge Response and 200 status

if(request.body.event === 'endpoint.url_validation') {
  const hashForValidate = crypto.createHmac('sha256', ZOOM_WEBHOOK_SECRET_TOKEN).update(request.body.payload.plainToken).digest('hex')

  response.status(200)
  response.json({
    "plainToken": request.body.payload.plainToken,
    "encryptedToken": hashForValidate
  })
}

Challenge response body example:

{
  "plainToken": "qgg8vlvZRS6UYooatFL8Aw",
  "encryptedToken": "23a89b634c017e5364a15599e2bb04bb1558d9c3a121faa5"
}

Step 5: Receiving events in our sample app

Head to your Zoom account and trigger the respective Webhook, in this case as we chose the Meeting has been created event, you will have to schedule a Zoom meeting to be able to receive the event notification.

Once you create a meeting, you will see the Webhook headers and payload logged in terminal, something like this:

Request headers

{
   "host":"db05-2603-7000-8f03-fe4c-b56e-6f3b-bded-7b6d.ngrok.io",
   "user-agent":"Zoom Marketplace/1.0a",
   "content-length":"564",
   "authorization":"{LEGACY_WEBHOOK_VERIFICATION_TOKEN}",
   "clientid":"{clientID}",
   "content-type":"application/json; charset=utf-8",
   "x-forwarded-for":"{X_FORWARDED_FOR}",
   "x-forwarded-proto":"https",
   "x-zm-request-timestamp":"{X_ZM_REQUEST_TIMESTAMP}",
   "x-zm-signature":"{X_ZM_SIGNATURE}",
   "x-zm-trackingid":"{X_ZM_TRACKINGID}",
   "Accept-encoding":"gzip"
}

Response body

{
   "event":"meeting.created",
   "payload":{
      "account_id":"{ACCOUNT_ID}",
      "operator":"{EMAIL}",
      "operator_id":"{OPERATOR_ID}",
      "object":{
         "uuid":"{MEETING_UUID}",
         "id":"{MEETING_ID}",
         "host_id":"{HOST_ID",
         "topic":"My Meeting",
         "type":2,
         "start_time":"2023-01-26T21:00:00Z",
         "duration":60,
         "timezone":"America/New_York",
         "join_url":"{JOIN_URL}",
         "password":"{PASSWORD}",
         "settings":[
            "Object"
         ],
         "is_simulive":false
      }
   },
   "event_ts":1674764224723
}

What happened here is:

After receiving the webhook event, the sample app constructed a message string with “v0”, the webhook request header “x-zm-request-timestamp” value and the webhook request body

const message = `v0:${request.headers['x-zm-request-timestamp']}:${JSON.stringify(request.body)}`

Once the app constructed the message, it created a hash message, by setting the webhook’s secret token as the secret/salt and the message as the string to hash and outputed in hex format

const hashForVerify = crypto.createHmac('sha256', ZOOM_WEBHOOK_SECRET_TOKEN).update(message).digest('hex')

Created a signature using the hashed Message by prepending "v0=" to it:

const signature = `v0=${hashForVerify}`

Compared the signature that we created with the value from our request header “x-zm-signature”

If the value of signature matches with the value of the request header “x-zm-signature”, we will start receiving events.

You should now have a running app enabled to receive events in a secure URL.

It is important to remember that every time that you make changes your App in the Marketplace (adding new events or restarting our ngrok secure tunnel) you will have to validate the endpoint URL again.

Thank you for follow along and happy coding! 🙂

Part 1: Section 1 - Building a meeting application in React with Zoom APIs and SDKs

just-zoomit — Sun, 29 Jan 2023 18:02:23 +0000

About The Project

Welcome to my blog! I'm so happy you are interested in learning how to build on the Zoom Developer platform. In this blog, we'll be exploring Zoom Developer tools and showing you how to embed a Meeting Conference solution in your very own React Application. We'll be using Zoom's Rest APIs and Meeting SDK to integrate the Zoom Meeting SDK application into a website.

This blog is going to be a two-part series, and in each part, we'll be covering different aspects of the project. Here is the break down:

The first part, we'll start with setting up the Node Js express backend,adding Zoom's Rest API, and the Meeting SDK JWT endpoint used for authorized use of the Meeting SDK.
The second part, we'll move on to setting up the frontend, then we'll finish by building out the different components.

Throughout the blog post, I'll also be including links to the specific Zoom documentation that we'll be using, so you can easily reference it while building your project. So, don't worry if you're new to building apps with Zoom Developer tools, we've got you covered. We'll be explaining how React JS, Node JS, the Express JS Web Framework, and Zoom Developer tools can help you embed the Zoom Meeting and Webinar experience in your app or website.

Here's a sneak peek of what you'll be creating:

Built With

React
Node.js / Express
Zoom Developer Tools:
- Rest APIs & Meeting SDK

Prerequisites

Node.js installed locally
Zoom Account
Zoom Marketplace Apps:
- Zoom Marketplace Server-to-Server App
- Zoom Marketplace Meeting SDK App

Getting Started

Before building with Zoom developer tools, you will need to create a Zoom account, a Zoom Marketplace server-to-server app for using Zoom Rest APIs, a Meeting SDK app to authorize your Meeting SDK, and also you need to have Node installed locally.

Need to create a Zoom account? Don't worry, you can find the links to the documentation to guide you through the process below. If you have already installed node and meet the prerequisites, you are ready to get started. Let's go!

Step 1 — Setting Up the Backend

With a React front-end connected to a Node.js / Express backend server, you've got everything you need to embed Zoom Meeting Conference into your application with ease and efficiency! Let's start by setting up the backend.

Open your terminal and create a new file directory in any location on your local machine that you find convenient. You can name it whatever you'd like, but for this example, we'll call it "zoom-clone".



  mkdir zoom-clone

Now, enter into that file directory:



  cd zoom-clone

The next step is to initialize the project with a package.json file. This file will contain some information about your app and the dependencies that it needs to run. In your text editor, run the following command :



 $ npm init

When prompted enter the package name and entry point for incoming requests:




$ package name: zoom-clone-production #Add This
$ version: (1.0.0) 
$ description: 
$ entry point: (index.js) server.js #Add This
$ test command: 
$ git repository: 
$ keywords: 
$ author: Your Name.
$ license: (ISC)

Should now see the package.json



{
  "name": "zoom-clone",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Your Name",
  "license": "ISC"
}

Step 2 — Setting Up the Node Server

To run your JavaScript code on the backend, you need to spin up a server that will compile your code. This tutorial uses a Express server with Node.js HTTP framework. Why ? Because it handles a lot of things out of the box and requires little code to create fully functional RESTful APIs.

To use Express, install it using npm. We will also install cors which is package that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources.



  npm i express cors

Now, create a file named server.js inside, this will be the entry point. It will handle the routing of incoming requests.



  touch server.js

In the server.js file, type the following code and save.



const express = require("express");

const app = express();
const cors = require("cors");
app.use(cors())

app.use(express.json());

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

const port =  30010;

app.use((req, res, next) => {
  res.send('Welcome to Express');
});

app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

The first two lines of the code import the express module and create an Express app, named "app". This app has methods for routing HTTP requests, configuring middleware, and rendering HTML views. CORS is enabled below that to handle issues when accessing the API from different domains. The middle part of the code defines a route using the app.get() method, which returns the string "Backend is Working!" when an HTTP GET request is made to the site root. The last block starts the server on port 30010, prints a message to the console, and returns the string "Server is running on port 30010". The example response can be seen by visiting localhost:30010 in the browser

It’s time to start your server to see if it works. Open your terminal in the same directory as your server.js file and type:



  node server.js

Navigate to http://localhost:30010/, you should see the following in your browser:



Welcome to Express

Start server from the root folder

Right now, you have to restart the server every time a change is made. To automatically see updates, let's install nodemon to automatically restart Web Server.

Create a new directory named backend for your project and change into the new directory:



//
mkdir backend
cd backend

Then add the script server.js file inside, and then from the root run install nodemon as dependencies:



npm i nodemon

Then in your package.json add a start property to the script object call nodemon to start the server :



...

 "scripts": {
    "start": "nodemon backend/server.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  }

...

Now, from the root, test for automatically Web Server restart:



  npm run start

If everything goes well, you should see the Server is running on port 30010 in your terminal and 'Welcome to Express' in your browser .

Terminal



#Terminal OutPut: 

➜  zoom-clone-production npm run start

> zoom-clone-production@1.0.0 start
> nodemon backend/server.js

[nodemon] 2.0.20
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node backend/server.js`
Server running on port 30010

Browser




 Browser URl : http://localhost:30010/api

 Welcome to Express

Step 3 — Zoom Developer Tools Utilities

To use Zoom's Rest API and Meeting SDK in your app or website, there are a few things we'll need to handle on the server-side app:

1.) Generating a Meeting SDK JWT Signature for authorized use of the Meeting SDK.

2.) Obtaining a Zoom Access Token to authenticate and authorize users to make requests.

The Zoom Meeting SDKs use a Meeting SDK key and secret to generate a SDK JWT for authorized use of the Meeting SDK. And the Zoom API uses the OAuth 2.0 authorization framework (rfc6749) to authenticate and authorize users to make requests. If you're new to Meeting SDKs authorization and OAuth 2.0, don't worry! I'll be providing links to the documentation to help you understand it better.

Setup .env file

It is important to keep API keys and other sensitive information in a separate file. It is also best practice to keep this information separate from version control for security reasons. The .env file provides a centralized location for storing environment variables, allowing for easy access and management of sensitive information. Additionally, using a .env file helps to keep sensitive information organized and secure, ensuring that it is not accidentally committed to version control.

To implement this solution, let's add a create a .env file in the root of the app:



  touch .env
  npm i dotenv

Then, add your variables and values to it:



PORT = 30010

Now, in the backend/server.js, import dotnet.env:



const express = require("express");
const app = express();

const cors = require("cors");
const dotenv = require("dotenv");

dotenv.config();
const port = process.env.PORT || 30015;
app.use(cors())
app.use(express.json());

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

app.use((req, res, next) => {
  res.send('Welcome to Express');
});

app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

Structure backend folders

When it comes to structuring the backend folders for a Node.js Express application that integrates with a third-party API, it's important to organize your code into separate folders to make it easier to manage and maintain. By breaking your code into smaller, more manageable pieces, you can ensure that your code is easy to understand and debug. So let’s create the following folders directories:

routes - contains the routing logic for your application.
api - contains API calls to Zoom Rest API services
zoomControllers - contain business logic functions for making API calls or processing data
middleware - contains the middleware functions for your application

Create API Directory

Create API directory along with the associated api.js file.



// Working Directory : backend/

mkdir api
cd api
touch zoomAPI.js

Within the API folder, add the following code to the zoomAPI.js file.



 // Working Directory : backend/api/
 // File: zoomAPI.js


 const thirdPartyAPICall = () => {
    try {

        // Make API Call Here 
      return "Third Party API Call";
    } catch (err) {
      // Handle Error Here
      console.error(err);
    }
  };

  module.exports = {
    thirdPartyAPICall,
  };

Create controllers Directory

Create controllers directory along with the associated zoomControllers.js file.



// Working Directory : backend/
// File: zoomControllers.js

mkdir controllers 
cd controllers
touch zoomControllers.js

Within the Controllers folder,add the following code to the zoomControllers.js file.



// Working Directory : backend/controllers/
// file: zoomControllers.js

const asyncHandler = require("express-async-handler");
const {
  thirdPartyAPICall,
  } = require("../api/zoomAPI.js");


const ThirdPartyAPICall = asyncHandler(async (req, res) => {

    const thirdPartyAPI = thirdPartyAPICall();

    if (thirdPartyAPICall === undefined) {
        res.status(400);
        throw new Error("No API Call found");
      } else {
        res.status(201).json({ thirdPartyAPI });
      }
  });

  module.exports = {
    ThirdPartyAPICall,
  };

Create routes Directory

Create routes directory along with the associated zoomRoutes.js file.



// Working Directory : backend/
// File: zoomRoutes.js

mkdir routes 
cd routes
touch zoomRoutes.js

Within the routes folder,add the following code to the zoomRoutes.js file.



// Working Directory : backend/routes/
// file: zoomRoutes.js

const express = require('express');
const router = express.Router();
const {

    ThirdPartyAPICall,

  } = require("../controllers/zoomControllers.js");

router.route('/').post();

// Get routes Test with Postman
router.route("/thirdparty").get(ThirdPartyAPICall);

module.exports = router; // Export the router so it can be used in server.js

In the backend/server.js, add this following line:



...
const zoomRoutes = require("./routes/zoomRoutes")

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

app.use("/api/zoom", zoomRoutes); // Add this line

...

Backend folder structure

Here's how the backend folder structure should look:



backend/
    api/
        zoomAPI.js
        ...
    controllers/
        zoomControllers.js
        ...
    middlewares/
        ...
    routes/
        zoomRoutes.js
        ...
    server.js
 node_modules
 .env
 .gitignore
 package.lock.json
 package.json
 README.md

Be sure to keep the API keys and other sensitive information in a .env file, and not to include it in version control.

Testing the API



npm i express-async-handler
npm run start

Now, open postman, create a GET method and navigate to http://localhost:30010.

Test all the API endpoints and make sure they are working. For the endpoints that require body, send JSON back with the necessary fields since it’s what you set up in your code.

Sample GET request:



GET localhost:30010/api/zoom/thirdparty
Body
raw

Sample GET value:



{
    "thirdPartyAPI": "Third Party API Call"
}

Conclusion

In this tutorial, you were guided through the process of setting up Node.js Express and organizing your files in a way that makes maintenance a breeze. You also learned how to use the .env file to securely store sensitive information such as API keys and secrets.

In the next tutorial, you'll delve deeper into the application by adding the backend logic. See you in the next tutorial.

Device Authorization - Zoom Use Cases

Tan Boon Jun — Fri, 27 Jan 2023 23:13:56 +0000

Introduction

In my Device Authorization article, I shared how to utilize this feature as well as how users can set up and execute simple testing. So what exactly are the potential use cases for users using Device Authorization rather than the conventional OAuth process? Let's explore them here.

Use Case 1 - Smart TV

Recall your login in experience the last time you logged in to your Youtube or Netflix account on your Smart TV. How was the login process user experience?

Imagine having to manually navigate to each of the characters of your email and password for a simple login process. For those with a secure combination of digits or even symbols, this entire sign-in process can be extremely frustrating.

We certainly do not want Zoom's user experience to be frustrating. This is where the magic of Device Authorization comes in. With this feature, a QR code is generated from Zoom's login page for users to scan. This allows users to utilize their Zoom account on their mobile device to grant access to your application with ease.

Use Case 2 - Automotive Touch Screen Display

The same use case above can also be applied to automotive touch screen display! Even with a touch screen keyboard function available, the user can simply scan the same QR code generated from Zoom's login page for application access for additional simplicity.

Use Case 3 - Smart Glasses / AR/VR

Users can face a frustrating challenge in use cases with no virtual or touch-screen keyboard. For example, when using smart glasses for augmented reality (AR) or virtual reality (AR). The Device Authorization Grant solves this!

Video on how can it be done on these use cases

Conclusion

The Device Authorization Grant helps your users easily access your application by removing the painful process of manual credentials and replacing it with Zoom’s simple log-in process. This streamlined log-in process minimizes frustrations and facilitates a positive long-in experience for your users.

Device Authorization - Zoom

Tan Boon Jun — Fri, 27 Jan 2023 23:12:46 +0000

Introduction

Zoom has recently introduced Device Authorization to better improve end user experience when authorizing apps to access Zoom user data on different devices. This also helps to establish a platform wide authorization and authentication workflow to support app access on devices for all Zoom products.

You can authorize with Zoom using the OAuth 2.0 Device Authorization Grant using a simply one-step process. This gives users, who are signed in with Zoom, the ability to authorize app access on another device without typing in the requested user code or needing to re-login to their Zoom account.

Prerequisite for Device Authorization setup

Users must have an existing private Zoom OAuth-capable application (such as Meeting SDK, OAuth, Zoom App and etc) in their Zoom Developer account.
Users will also need to reach out to Zoom's developer support in order to enable this feature and use within their private apps mentioned above.
Postman or other API platform of choice used for testing purposes.
QR code generator or other tools to further ease the authorize app access procedure (optional).

Steps to handle the OAuth 2.0 Device Authorization Grant

Sign in with your Zoom developer account credential at https://marketplace.zoom.us/.
Locate and access your Meeting SDK app by going to the "Manage" section

If you do not have an app at the moment, you can create a new one by going to "Develop", followed by "Build App" and then select the app type of your choice.
This article will use Meeting SDK as an example. Under the Feature tab, enable "Use App on Device"
Under App Credentials -> OAuth credential, save your Client ID and Secret as we will be using these for the next part.
Next, we will retrieve the device authorization information and the verification link. This article will use Postman with Basic Authorization to send a POST request with the client ID and secret to "https://zoom.us/oauth/devicecode"
With the above result, there are a few ways you can redirect user's device by either sending them
- "verification_uri" and "user_code" in another communication means such as email or SMS, Or
- "verification_uri_complete" which includes the user_code embedded inside TADA! There you have it! With the "verification_uri_complete" you can simply turn the link into a QR code for users to scan on their other device (w/ Zoom account signed in) and grant access to your application!

You can also visit our Zoom's Device Authorization Documentation here for more information on each of the request as well as response key and value.

Upon successful verification, users will be prompted to authorize the user of your application.
After clicking on allow, you will see a successful message (e.g. the one shown in the image below on the top right corner) and you can continue with your application.

What's next?

Polling Request for Access & Refresh Token

With the device code that we got previously and the same Basic Authorization used earlier, we can use it to retrieve the access and refresh tokens by calling POST to "https://zoom.us/oauth/token" with "grant_type" of "urn:ietf:params:oauth:grant-type:device_code" and "device_code" that you got from the previous API call.

With the access token, you can work wonders with the capabilities of Zoom's API such as creating a meeting, getting past meeting details and etc.

ZAK Token

In order to start an instant meeting on the user's behalf, we will need to retrieve their ZAK token. We can simply do this by using the access token we got previously and send a GET call to "https://api.zoom.us/v2/users/me/zak".

Potential Use Cases

Visit the next post to see what are the potential use case you can apply Device Authorization to.

Conclusion

With the introduction of the OAuth 2.0 Device Authorization Grant, we can easily authorize another device app access to Zoom easily with the already signed-in Zoom users and make things faster and easier for users!

Video Guide

Device Authorization - Full Setup

Migrating from the Agora Video SDK to the Zoom Video SDK

Ticorrian Heard — Wed, 11 Jan 2023 21:28:29 +0000

Transition Guide Agora Web Video SDK to Zoom Web Video SDK

Quick Snapshot of steps:

Install the Zoom Web Video SDK
Import Zoom Video SDK
Replace Agora function join logic with Zoom function join logic
- Implement backend logic for handling token generation the using both SDKs REST APIs
Implement camera and audio setup using Zoom SDK methods. Also implement methods for controlling the media peripherals (mute and unmute)
Implement callbacks for joining, leaving, and video state changes SDK listeners
Implement logic for controlling remote user video for each sdk listeners
Implement meeting leave logic

Features of this app:

Dynamic selection between sdks in the same app
Join session unique to each service
Muted/Unmuted media peripherals
Leave meeting
Check for meeting limit exceeded using REST API

Installing the SDK

Replace Agoras RtcEngine with Zooms SDK by either inputting the CDN link into the index.html file via tag or installing and importing the SDK via command line with command, npm i zoom-videosdk, to power live voice, video, and streaming integrations.

Access Zoom Video SDK in the Zoom Marketplace

Go to marketplace.zoom.us to login to your Zoom Video SDK account
Click Build Video SDK on the right corner and you are navigated to the credentials page of your app where you can see your Video SDK credentials and API credentials
Store these credentials in your .env folder for local development

ZOOM_SDK_KEY=
ZOOM_SDK_SECRET=
ZOOM_API_KEY=
ZOOM_API_SECRET=
AGORA_APP_ID=
AGORA_APP_CERTIFICATE=
AGORA_CUST_ID=
AGORA_CUST_SECRET=

Import Zoom SDK

Replace Agora’s RtcEngine with Zooms SDK by either inputting the CDN link into the index.html file via tag or installing and importing the SDK via command line with command, npm i zoom-videosdk, to power live voice, video, and streaming integrations:

$ npm install @zoom/videosdk

In zoom.service.ts, import the Zoom Video SDK via this statement:

import ZoomVideo from '@zoom/videosdk'

Frontend changes
Zoom SDK uses canvas to paint and render video data to. Replace the div element with a canvas element with the desire styling and #videoCanvas reference as shown (in this case we add, the canvas element as an option to be selected based off ngIf):

From:

<div class="video-canvas">    
    <div *ngIf="mode === 'agora'" class="center-video-div" #videoCanvas></div>
</div>

To:

<div class="video-canvas">
    <canvas *ngIf="mode === 'zoom'" width="1920" class="center-video-canvas" height="1080" #videoCanvas></canvas>    
    <div *ngIf="mode === 'agora'" class="center-video-div" #videoCanvas></div>
</div>

Backend

We use a local NodeJs server for handling the token generation, credential fetching, and secure REST api calls for both services. Credentials are stored in a .env file not tracked with git and imported into the server using the dotenv library. We are running the express framework and a fetch library for parity in fetching with our frontend.

Our endpoints are:
/zoom-session-count - uses the Zoom REST api to fetch the amount of users in the session. We then return this number to the frontend. Utilizes the utility function generateJWTToken. This uses the /videosdk/sessions/ Zoom REST API Endpoint

/zoomtoken - generates a Zoom Video SDK jwt token to use when joining a session. The utility function generateJWTToken is called here. This uses the /videosdk/sessions/ Zoom REST API Endpoint

/agora-token - generates an Agora Video SDK jwt token to use when joining a session.

/agora-appid - returns the Agora appID stored with the .env file

/agora-channel-count - uses the Agora REST api to fetch the amount of users in the channel. We then return this number to the frontend. This uses the /channel/user/ Agora REST API Endpoint

Joining the meeting

We use the same information given in the form to join the Agora session. In ui.service.ts, the mode is set to Agora so the logic for joining an Agora session will be executed:

ui.service.ts

async joinSession(name: string, sessionId: string, password: string): Promise<boolean> {   
    let exceeded: boolean = false;
    switch (this.toggle.mode) {
      case "zoom":
        console.log("joining zoom");
        await this.zoomService.joinSession(name, sessionId, password).then( (e) => { exceeded = e; } );
        break;
      case "agora":
        console.log("joining agora");
        await this.agoraService.joinSession(name, sessionId, password).then( (e) => { exceeded = e; } );  
        break;
    }
    return exceeded;
   }

First, we check if the limit of 4 users a session is exceeded via the Agora REST API:

agora.service.ts

let count!: number;
    let url: string = "http://localhost:3001/agora-channel-count/?channelname=" + sessionId;
    await fetch(url).then( async res => {
      await res.text().then(data => {
            count = parseInt(data);
            console.log(count, data)
        });
      });
    if (count >= 4) return true;

If the limit is exceeded, the exceeded flag is set to true which is seen by the frontend and the session is not joined. An alert is thrown to notify the user of the limit being reached. If not, the Agora appID an and Agora token are retrieved from our backend server and the session is joined using the Agora SDK join function:

agora.service.ts

this.sessionId = sessionId;
    this.agoraEngine = AgoraRTC.createClient({ mode: "rtc", codec: "vp8" });
    url = "http://localhost:3001/agora-appID";
    let settings: Headers = {
        mode: "cors",
        method: 'GET',
        headers: {
          "Content-Type": "text/plain"
        }
      };
    await fetch(url, <Object>settings).then( async res => {
        await res.text().then(data => {
            this.appID = data.toString().trim();
        });
    });
    url = "http://localhost:3001/agora-token?name=" + name + "&topic=" + sessionId + "&password=" + password;

    await fetch(url, <Object>settings).then( async res => {
        await res.text().then(data => {
            this.token = data.toString().trim();
        });
    });

    await this.agoraEngine!.join(this.appID, this.sessionId, this.token, this.uid);

    return false;
  }

Remote users in Agora will have the userPublished event triggered for all new users that publish their media data.

The Zoom SDK join logic operates the same way. First, given the mode is set to Zoom, the logic for joining a Zoom session is executed in ui.service.ts.

First, we check if the limit of 4 users a session is exceeded via the Agora REST API:

zoom.service.ts

let count!: number;
    let check: string = "http://localhost:3001/zoom-session-count/?sessionname=" + sessionId;
    await fetch(check).then( async res => {
      await res.text().then(data => {
            count = parseInt(data);
            console.log(count, data)
        });
      });
    if (count >= 4) return true;

If the limit is exceeded, the exceeded flag is set to true which is seen by the frontend and the session is not joined. An alert is thrown to notify the user of the limit being reached. If not, the Zoom Video SDK JWT token is retrieved from our backend server and the session is joined using the Zoom SDK join function:

zoom.service.ts

let url: string = "http://localhost:3001/zoomtoken?name=" + name + "&topic=" + sessionId + "&password=" + password;
    let settings: Headers = {
        mode: "cors",
        method: 'POST',
        headers: {
          "Content-Type": "text/plain"
        }
      };

    await fetch(url, <Object>settings).then( async res => {
        await res.text().then(data => {
            token = data.toString().trim();
        });
    });

    await this.client.join(sessionId, token, name, password).then(() => {
      this.stream = this.client.getMediaStream();
      this.populateParticipantList();
    }).catch((error: any) => {
      console.log(error);
    });

    return false;

For remote users, the userAdded event is triggered once a user joins and that user is added to the participantList. Their video and/or audio can be consumed once they setup their peripherals later in the process:

private userAdded = ()=>{
    let participantList: any = this.client.getAllUser();
    participantList.forEach((participant: any, i: number) => {
        this.participants[i].userId = participant.userId;
    });
    console.log(this.participants);
  };

Setting up Media

Media setup in Agora uses a pub/sub model where users publish their video and audio to the channel and other user subscribe to receive that video and audio. In this app, we use a local user object and a remote user array objects, each containing identical objects with different property names, to keep track of the user and their peripherals

private localUser: AgoraParticipant = {
    userId: '',
    PlayerContainer: null,
    AudioTrack: null,
    VideoTrack: null,

  };
  private remoteParticipantGrid: AgoraRemoteParticipant[] = [
    {
      userId: '',
      PlayerContainer: null,
      AudioTrack: null,
      VideoTrack: null
    },
    {
      userId: '',
      PlayerContainer: null,
      AudioTrack: null,
      VideoTrack: null
    },
    {
      userId: '',
      PlayerContainer: null,
      AudioTrack: null,
      VideoTrack: null
    }
  ]

After joining the session, we have to setup the local user to publish their video to the channel:

async setupLocalUserView(): Promise<void> {
    console.log(this.videoCanvas, this.appID, this.token, this.uid, this.sessionId);

    this.localUser.PlayerContainer = this.videoCanvas;
    this.localUser.PlayerContainer!.id = this.uid.toString();

    this.createGrid();

    await AgoraRTC.createMicrophoneAndCameraTracks().then( async (audioVideoTracks) => {
      this.localUser.AudioTrack = audioVideoTracks[0];
      this.localUser.VideoTrack = audioVideoTracks[1];
    });

    await this.agoraEngine!.publish([<ILocalTrack>this.localUser.AudioTrack, <ILocalTrack>this.localUser.VideoTrack]);
    this.localUser.VideoTrack!.play(<HTMLElement>this.localUser.PlayerContainer);
    await this.localUser.AudioTrack!.setMuted(true);
    console.log("publish success!");
  }

The local user media is then played (this is an injected video element so the .play method is used to play the video)

We then use the Agora SDK listeners with callback function, userPublished to publish this media for other users to see and to subscribe to each of the existing participants media:

private userPublished = async (user: IAgoraRTCRemoteUser, mediaType: any) => {
    await this.agoraEngine!.subscribe(user, mediaType);

    let userFound: number = this.remoteParticipantGrid.findIndex( (participant: AgoraRemoteParticipant) => { return (participant.userId === user.uid.toString()) });
    let newUser: number = this.remoteParticipantGrid.findIndex( (participant: AgoraRemoteParticipant) => { return (participant.userId === '') });

    let userIndex = (userFound != -1) ? userFound : newUser;

    if (mediaType == "video") {
        this.remoteParticipantGrid[userIndex].VideoTrack = <IRemoteVideoTrack>user.videoTrack;
        this.remoteParticipantGrid[userIndex].AudioTrack = <IRemoteAudioTrack>user.audioTrack;
        this.remoteParticipantGrid[userIndex].userId = user.uid.toString();
        this.remoteParticipantGrid[userIndex].PlayerContainer!.id = user.uid.toString();

        this.remoteParticipantGrid[userIndex].VideoTrack!.play(<HTMLElement>this.remoteParticipantGrid[userIndex].PlayerContainer);
    }
    if (mediaType == "audio") {
        this.remoteParticipantGrid[userIndex].AudioTrack = <IRemoteAudioTrack>user.audioTrack;
        this.remoteParticipantGrid[userIndex].AudioTrack!.play();
      }

      console.log("SUBSCRIBE SUCCESS", this.remoteParticipantGrid);
    }

Each remote user is added to the remoteUser array so we can quickly access their data as well as control their video element in the DOM

Zoom handles this in an easier way where we can use only a single canvas element to paint the user video by giving xy-coordinates to the Zoom Video SDK render method. After joining the session, a mediastream is retrieved by the SDK to control participant video and audio data given to the client by the SDK:

await this.client.join(sessionId, token, name, password).then(() => {
      this.stream = this.client.getMediaStream();
      this.populateParticipantList();
    }).catch((error: any) => {
      console.log(error);
    });

We use a single participants array to keep track of all users and their data within the session:

private participants: Participant[] = [ //placeholder values
    {userId : '', X : 0, Y : 540},
    {userId : '', X : 960, Y : 540},
    {userId : '', X : 0, Y : 0},
    {userId : '', X : 960, Y : 0}
  ];

In ui.service.ts, we call the setupCamera and setupMicrophone methods. The SDK finds our video and audio peripherals automatically and starts them upon calling .startVideo and .startAudio, respectively:

async setupCamera(): Promise<void> { 
    await this.stream.startVideo().then( () => {
     this.stream.renderVideo(this.videoCanvas, this.participants[0].userId, 960, 540, this.participants[0].X, this.participants[0].Y,3);
    });
    console.log("camera setup");
  }

  async setupMicrophone(): Promise<void> {
    await this.stream.startAudio().then( () => {

      setTimeout(() => { //I get error "no audio joined" if I dont have settimeout. not sure why this is a race condition even though then is being used. id rather not use this
        this.stream.muteAudio();
        console.log("audio muted");
      }, 150);

    });
    console.log("microphone setup");
  }

We also start our SDK event listeners to listener for user-added, user-removed, and peer-video-state-changed events during the session. Finally we render all participant videos of all users within the session on the canvas:

async renderParticipantsVideo(): Promise<void> {
    console.log("rendering participant videos");
    this.participants.forEach( async (participant) => {
      if (participant.userId !== '') {
        console.log("rendering participant:", participant.userId, participant.X, participant.Y);
        await this.stream.stopRenderVideo(this.videoCanvas, participant.userId);
        await this.stream.renderVideo(this.videoCanvas, participant.userId, 960, 540, participant.X, participant.Y,3);
      }
    });
  }

This method offers minimum access to the DOM and lets the SDK handle painting on the backend. You only have to give the location of the video to the SDK.

Controlling Audio and Video

Both Agora and Zoom offer easy ways to control the audio and video by using their mute and unmute functions. There are also methods for checking the state of the audio and video which we use to check if either peripheral is muted or not. Here we can see the similarities in the functions for Zoom and Agora:

agora.service.ts

async toggleAudio(): Promise<void> {
    if (this.localUser.AudioTrack!.muted) {
      await this.localUser.AudioTrack!.setMuted(false);
    } else {
      await this.localUser.AudioTrack!.setMuted(true);
    }
  }

  async toggleVideo(): Promise<void> {
    if (this.localUser.VideoTrack!.muted) {
      await this.localUser.VideoTrack!.setMuted(false);
    } else {
      await this.localUser.VideoTrack!.setMuted(true);
    }
  }

  isMutedAudio() {
    return this.localUser.AudioTrack!.muted;
  }

  isMutedVideo() {
    return this.localUser.VideoTrack!.muted;
  }

zoom.service.ts

async toggleVideo(): Promise<void> {
    if (!this.client.getCurrentUserInfo().bVideoOn) {
      await this.stream.startVideo().then( () => {
        this.stream.renderVideo(this.videoCanvas, this.participants[0].userId, 960, 540, this.participants[0].X, this.participants[0].Y,3);
      });
    } else {
       await this.stream.stopVideo();
    }
  }

  async toggleAudio(): Promise<void> {
    if (this.client.getCurrentUserInfo().muted) {
     await this.stream.unmuteAudio();
    } else {
     await this.stream.muteAudio();
    }
  }

  isMutedAudio(): boolean {
    return this.client.getCurrentUserInfo().muted;
  }

  isMutedVideo(): boolean {
    return this.client.getCurrentUserInfo().bVideoOn;
  }

The major difference between the SDKs is how listeners function. For Agora, the user video and/or audio is unpublished if the video and/or audio is muted. This event is picked up by the userUnpublished listeners and since it is unpublished, subscribed users do not see and/or hear the affected media:

private userPublished = async (user: IAgoraRTCRemoteUser, mediaType: any) => {
    await this.agoraEngine!.subscribe(user, mediaType);

    let userFound: number = this.remoteParticipantGrid.findIndex( (participant: AgoraRemoteParticipant) => { return (participant.userId === user.uid.toString()) });
    let newUser: number = this.remoteParticipantGrid.findIndex( (participant: AgoraRemoteParticipant) => { return (participant.userId === '') });

    let userIndex = (userFound != -1) ? userFound : newUser;

    if (mediaType == "video") {
        this.remoteParticipantGrid[userIndex].VideoTrack = <IRemoteVideoTrack>user.videoTrack;
        this.remoteParticipantGrid[userIndex].AudioTrack = <IRemoteAudioTrack>user.audioTrack;
        this.remoteParticipantGrid[userIndex].userId = user.uid.toString();
        this.remoteParticipantGrid[userIndex].PlayerContainer!.id = user.uid.toString();

        this.remoteParticipantGrid[userIndex].VideoTrack!.play(<HTMLElement>this.remoteParticipantGrid[userIndex].PlayerContainer);
    }
    if (mediaType == "audio") {
        this.remoteParticipantGrid[userIndex].AudioTrack = <IRemoteAudioTrack>user.audioTrack;
        this.remoteParticipantGrid[userIndex].AudioTrack!.play();
      }

      console.log("SUBSCRIBE SUCCESS", this.remoteParticipantGrid);
    }

For Zoom, user media is tracked using the stream object retrieved from the SDK. Media state changes are seen by the userVideoStateChange listener where it determines whether or not to render a user's video based on the event state:

private userVideoStateChange =  (payload: any) => {
    let userIndex = this.participants.findIndex( (participant) => { return (participant.userId === payload.userId) });
    console.log("video state change:", payload.userId);
    if (payload.action === 'Start') {
      this.stream.renderVideo(this.videoCanvas, payload.userId, 960, 540, this.participants[userIndex].X, this.participants[userIndex].Y,3);
    } else if (payload.action === 'Stop') {
     this.stream.stopRenderVideo(this.videoCanvas, payload.userId);
    }
  };

Leaving the session

Leaving the session and channel are similar for both SDKs. The media peripherals have to be stopped first and then the session can be left which triggers the respective leaving meeting listener (userRemoved for Zoom, userLeft for Agora) The sequence is shown for each SDK below:

Agora

async leaveSession(): Promise<void> {
    this.localUser.AudioTrack!.close();
    this.localUser.VideoTrack!.close();
    await this.agoraEngine!.leave();
    console.log("You left the channel");
  }

userLeft function:

private userLeft = async (user: IAgoraRTCRemoteUser, reason: string) => {
    let userIndex: number = this.remoteParticipantGrid.findIndex( (participant: AgoraRemoteParticipant) => { return (participant.userId === user.uid.toString()) });
    let parent: HTMLElement|null = document.querySelector("body > app-root > div > app-meeting > div > app-video-client > app-video-canvas > div");
    this.renderer.removeChild(parent, this.remoteParticipantGrid[userIndex].PlayerContainer);
    this.remoteParticipantGrid.splice(userIndex, 1);

    let PlayerContainer: HTMLElement = this.renderer.createElement('div');
    this.renderer.setStyle(PlayerContainer, "width", "550px");
    this.renderer.setStyle(PlayerContainer, "height", "380px");
    this.renderer.setStyle(PlayerContainer, "display", "inline-block");
    this.renderer.appendChild(parent, PlayerContainer);

    let newSlot: AgoraRemoteParticipant = {
      userId: '',
      PlayerContainer: PlayerContainer,
      AudioTrack: null,
      VideoTrack: null
    }

    this.remoteParticipantGrid.push(newSlot);

    console.log("new grid", this.remoteParticipantGrid);
  };

Zoom

async leaveSession(): Promise<void> {

    await this.stream.stopVideo();
    await this.stream.stopAudio();
    console.log("audio and video stopped");

    if (this.client.isHost()){
      console.log("ending session");
      await this.client.leave(true);
    } else {
      await this.client.leave();
    }
  }

userRemoved function:

private userRemoved = async (payload: any)=>{
    console.log("user left,", payload);

    this.participants = [ //reset array
      {userId : '', X : 0, Y : 540},
      {userId : '', X : 960, Y : 540},
      {userId : '', X : 0, Y : 0},
      {userId : '', X : 960, Y : 0} ];

    let participantList: any = this.client.getAllUser();

    console.log("user removed", participantList);

    participantList.forEach((participant: any, i: number) => {
        this.participants[i].userId = participant.userId;
    });
    console.log(this.participants);

    await this.renderParticipantsVideo();
  };

Now we have a fully functional video conferencing app powered by the Zoom Video SDK!

Build with Me! - Getting Started with the Video SDK

Rehema — Fri, 06 Jan 2023 16:10:48 +0000

Intro

At Zoom, we're known for the consistently high-quality media we provide to our users. As a platform for customers and developers alike, not only can you rely on that quality for your meetings, but you can also build with our servers to integrate said quality into your own apps.

How you ask? Enter, Zoom Video-SDK. With the Video SDK, you can pull high-quality audio and media into your application, while customizing it to fit your brand and voice. Want to live stream your at-home yoga class? You got it. Build out a virtual classroom? You can do that, too. With such an array of possibilities, the goal of this article is to simply get you started.

In this post, we'll go over how I built I simplified version of the published Web Video SDK app, using React. We'll cover:

Tech-stack used for the project
Generating our JWT Token & Storing our Variables
Building Out Core Functionality in index.js & App.js
Video, Audio, & Screen-Share Functionality

Again, the goal of this demo is to provide an easy-to-follow framework, as a starting point for working with the Video SDK. For a more complex build of this application, feel free to clone and review the published Video SDK Web sample application, on which this project is based.

Tech Stack Overview

For this project, we’ll be using React to develop our frontend, taking advantage of Context API to pass and share data relevant to our created Zoom client. In addition, our project will utilize react-router-dom for dynamic routing throughout.

This project makes use of ant design for styling, but Vanilla CSS or any UI library can be used, such as Material UI, Bootstrap, etc. Additionally, our project will require encryption for JWT generation. For this, we’ll use jsrsasign as our cryptography library.

To build out my API on the backend, I’ll be using Nodejs with Express. Also, I (of course) used the '@zoom/videosdk to create, manage, and join sessions.

Lastly, this project will be built using Create-React-App. Of course, if preferred, manually building and creating your own webpack file, or using parcel to create your project are effective options, as well.

Now that we’ve reviewed the packages being used in this project, let’s get to building the application! The first thing we want to do is safely create and store variables.

Generating our JWT on the Server-Side

When building with the Video SDK, a JWT signature will always be required to initialize or join a session. To generate and use your token within your application, it's best practice to write your functionality on the server-side, to ensure safe-keeping. I did this using express on top of Nodejs, making use of middleware to perform the logic for creating my token.

I first created my 'server.js' file, where I added a variable, 'router', set equal to the express.Router() class to manage my routes. After properly configuring my server.js file (pulling in requirements, setting up my port, error handling, etc.), I created a post request to send my generated token to the front end.

server/server.js

router.post('/generate', middleware.generateToken, (req, res) => {
    res.status(200).send(res.locals.token)
})

You'll see an added function in my post request 'middleware.generateToken', which was created in a separate file and then imported in. There, I handled our token generation. I destructured my request body to access my meeting arguments for use in my JWT payload. After creating my signature, I save it to my res.locals object, which was sent to the frontend in my post request. From there, I finished creating my middleware function, which can be seen below.

server/middleware.js

const KJUR = require('jsrsasign')
require('dotenv').config();

const middleware = {};

middleware.generateToken = async(req, res, next) => {
    console.log(req.body)
    try {
        let signature = '';
        const iat = Math.round(new Date().getTime() / 1000);
        const exp = iat + 60 * 60 * 2;

        const oHeader = { alg: 'HS256', typ: 'JWT' };
        const {topic, passWord, userIdentity, sessionKey, 
              roleType} = req.body
        const sdkKey = process.env.SDK_KEY;
        const sdkSecret = process.env.SDK_SECRET;
        const oPayload = {
            app_key: sdkKey,
            iat,
            exp,
            tpc: topic,
            pwd: passWord,
            user_identity: userIdentity,
            session_key: sessionKey,
            role_type: roleType,
        };
        const sHeader = JSON.stringify(oHeader);
        const sPayload = JSON.stringify(oPayload);
        signature = KJUR.jws.JWS.sign('HS256', sHeader, sPayload, sdkSecret);
        res.locals.token = signature;
        return next();
    }
    catch(err) {
        return next({err})
    }
}

(The logic used for token generation can also be found in our documentation, here).

Safely Storing Your Variables

You may have noticed in the code snippet above that the values for the sdkKey and sdkSecret are read in using process.env. This is to ensure I'm keeping my private data (API key and secret) private. I created a ‘.env’ file to store both of those credentials, and used 'dotenv' to read them into my middleware function.

Building out index.js

After building out my backend functionality for token generation, I jumped into my frontend and started with my entry-point file, index.js. Here, the first thing I did was pull in all necessary imports, including local files for styling/component rendering, and all my React necessities (react, react-Dom, used hooks, etc.). I’ve also imported the ZoomVideo’ component from the @zoom/videosdk package, which will be used to create our client.

I also imported my devConfig file. This was where I created an object to house all the necessary parameters (outside of my sdk key and sdk secret) for initializing and joining a Video SDK session. It can be seen below:

client/src/dev.js

export const devConfig = {
  topic: ' test topic',
  name: 'Chrome',
  password: 'pass', 
  role: 1, 
};

Lastly, I imported a file called ZoomContext to make use of the Context API. In this file, I created a context to easily pass values to nested components.

Imports in client/src/index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { devConfig } from './config/dev';
import { generateVideoToken } from './tools/tools.jsx'
import ZoomVideo from '@zoom/videosdk';
import ZoomContext from './context/zoom-context';

client/src/context/zoom-context.js

import { VideoClient } from '@zoom/videosdk';
import React from 'react';

export default React.createContext(VideoClient);

After my imports, the next thing I did was build out my meeting arguments object, which is used to initialize and join sessions. To do this, I first declared the variable 'meetingArgs' and assigned it to a copy of my imported ‘devConfig’ object.

From there, I needed to generate and add my JWT signature to the meeting arguments object, contingent on it already containing the topic. To get this done, I first created the function 'getToken', which makes a fetch call to my backend API (described in the previous section).

client/src/index.js

let meetingArgs = {...devConfig};

const getToken = async({options}) => {
  let result; 
  result = await fetch("http://localhost:3001", options);
  result = await result.json();
  return result;

}

Next, I want to call my created function inside a conditional that checks my meeting arguments object for the necessary elements. Inside of my conditional, before calling the function, I created my requestOptions object to send to my backend route (this is necessary when making a post request).

As seen, the body of the request is my meeting arguments object (converted to a JSON string). After this, while still in my conditional, I called my 'getToken' function, passing in my 'requestOptions' object as my argument. Since this function receives and returns my generated token from the backend, I set it's output equal to my meeting argument's signature value.

client/src/index.js

if (!meetingArgs.signature && meetingArgs.sdkSecret && meetingArgs.topic) {
  const requestOptions = {
    method: 'POST',
    headers: {'Content-Type' : 'application/json'},
    body: JSON.stringify(meetingArgs) 
  }
  getToken(requestOptions).then((res)={meetingArgs.signature 
  =res})
}

My next step was creating my Video SDK client, which is used to manage my sessions. This is done by simply using the createClient method on my ZoomVideo component.

client/src/index.js

const client = ZoomVideo.createClient();

Now that I have my meeting arguments object properly configured and my client created and stored, I used React DOM to render my application. Inside my render function, I passed in my imported ‘App’ component, adding a context wrapper around it. Using the provider method (ZoomContext.Provider), I passed in my created client as the provider’s value so that it is now accessible in my App Component. Lastly, I prop-drilled down my meetingArgs object.

client/src/index.js

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
      <ZoomContext.Provider value = {client}>
        <App meetingArgs = {meetingArgs}/>
      </ZoomContext.Provider>
  </React.StrictMode>
);

Building out App.js

In App.js, I built out the necessary functionality for when the application first launches. This includes pulling in my client & joining and starting a session. To ensure efficiency, I made use of different React Hooks;

useState to manage different pieces of simple state throughout the application, such as loading text shown on the screen
useEffect to mimic componentDidMount and perform different side effects, such as initializing a session whenever there’s a change to meeting arguments
useContext to access values passed down in provider wrappers. Here, it was used to create and store my Video SDK client

After making my necessary imports (react hooks, react-router-dom, styling components, context files, etc.) and moving into my functional component, I took some preliminary steps to give myself a good starting framework. The first one was some object destructuring to access the values I prop-drilled down in index.js. This gives me easy access to those meeting arguments for future use.

client/src/app.js

const App = (props) => {
  const {
    meetingArgs: { sdkKey, topic, signature, name, password }
  } = props;

Next, I made use of the useState hook, as mentioned before, to set up pieces of state to appropriately render different parts of my application.

client/src/app.js

  const [loading, setIsLoading] = useState(true);
  const [loadingText, setLoadingText] = useState(' ');
  const [mediaStream, setMediaStream] = useState();
  const [status, setStatus] = useState(false);

The last preliminary step was using the useContext hook to grab that value I passed through in index.js, and create my client here in my App Component.

client/src/app.js

 const client = useContext(ZoomContext);

With those things out of the way, I dove into my first function, init, which is an asynchronous function that makes use of the ‘try…catch’ block for error handling. Inside init, I called client.init(), which is a Zoom Video SDK built-in method that initializes a session.

I passed in the two required parameters to this method; the language being used (English, in this case), and the dependent asset deployment path (‘CDN’, in this case. A more detailed explanation on this be found in our reference guide).

Inside my ‘try’ block, I wrote the logic for joining the session (after a successful session initialization). The join method takes in four necessary parameters; the user’s meeting topic, signature, name, and password.

After joining, I needed to set mediaStream state. I created a variable 'stream', & set it equal to the output of using the getMediaStream method on my client. Now, I’m able to use my ‘stream’ variable to manipulate any incoming media, such as audio and video. This is the variable I used to set my mediaStream state.

The last thing I’ll do inside of my ‘try’ block is set my loading state to false because we’re finished initializing and joining.

client/src/app.js

    try {
      setLoadingText('Joining Session...')
      await client.join(topic, signature, name, password)
      const stream = client.getMediaStream();
      setMediaStream(stream);
      setIsLoading(false);
    }

When I wrote all this logic for initializing and joining a session, I wrapped it inside of a useEffect hook. The side-effect performed is the execution of the init function, and the clean-up functionality for it is destroying the client, effectively ending any sessions. To do the destroying, I used the destroyClient method on my imported ZoomVideo component.

My dependency array for this useEffect functionality includes the following elements: sdkKey, signature, client, topic, name, password. Put together, all of this means that the created init() function will be performed as a side effect if there is any change to those previously listed elements, and before that side effect ever re-renders, the client will be destroyed. The complete functionality is shown below.

client/src/app.js

useEffect(() => {
    const init = async () => {
      await client.init('en-US', 'CDN')

    try {
      setLoadingText('Joining Session...')
      await client.join(topic, signature, name, password)
      const stream = client.getMediaStream();
      setMediaStream(stream);
      setIsLoading(false);
    }
    catch(err) {
      console.log('Error Joining Meeting', err);
      setIsLoading(false);
      message.error(err.reason);
    }
  }
    init();
    return () => {
      ZoomVideo.destroyClient();
    }
    }, [sdkKey, signature, client, topic, name, password])

The next piece of my App component was adding in my UI and component navigation (making use of React-Router-Dom for the latter). Really, the only UI actually written within this component was a conditional ‘loading’ statement. Otherwise, the displayed UI after loading comes from the rendered ‘home’ component, since its path is listed as ‘/’ (this makes it the default page for the loaded application. You can set whatever component you've created to be your default page).

A key aspect of App.js’s return statement is the use of Context API to pass down a value to the nested components. I made use of the MediaContext component I created and imported, and passed in my mediaStream variable as the provider’s value. This is what allowed me access to incoming media in my nested component used for video.

client/src/app.js

 return (
    <div className="App">
      {loading && <LoadingLayout content = {loadingText}/>}
      {!loading && (
        <MediaContext.Provider value = {mediaStream}>
          <Router>
          <Routes>
          <Route path = "/" element = {<Home props={props} status = {status} onLeaveOrJoin = {onLeaveOrJoin}/>}/>
          <Route path = "/video" element = {<VideoContainer/>} />
          </Routes>
          </Router>
         </MediaContext.Provider>
      )}
    </div>
  );

With that, let’s go ahead and move on to the Video Component!

Note: (While the home page is a component, it’s not essential to understanding the Video SDK, and therefore we’re skipping over it.)

Video Component

Accessing Video, Audio, and enabling Screen-sharing

Alright, now it’s time to really use the magic of the Video SDK. Inside of my video component, after pulling in my imports, the first thing I did was create some pieces of state that helped me make appropriate use of my features:

videoStarted, to know whether or not the camera is on audioStarted, to know whether or not the microphone is on
isMuted, to know whether or not the user is muted
isShareScreen, to know whether or not there’s an active screen share happening
isSAB, to know whether or not SharedArrayBuffer is enabled (discussed in further detail later)

Next, I created my client and mediaStream variables through the use of the useContext hook, accessing those passed down values ('client' passed down in index.js, and 'mediaStream' passed down in my App Component). Now that these steps are done, let’s look at what I did for my video functionality.

Video Functionality

To get started here, I created an asynchronous function to handle the turning on and off of the camera and checked my 'videoStarted' state before anything else.

To turn on and access my video as self-view, I’m going to use the startVideo method on my mediaStream variable (remember, the mediaStream variable was created in App.js by calling the .getMediaStream method, then passed down through the MediaContext Provider). The parameter that I pass through to startVideo(), though, is dependent on whether or not the browser has SharedArrayBuffer enabled.

Let’s look at the difference in how we start our video based on this factor:

When working to achieve self-view video with the Video SDK, without SharedArrayBuffer, you must pass through your HTML element as a video tag.

client/src/feature/video.js

 if (!videoStarted) {
   if (!!window.chrome && !(typeof SharedArrayBuffer 
   ==='function')) {
     setIsSAB(false);
     await mediaStream.startVideo({videoElement: 
     document.querySelector('#self-view-video')})

When working to do the same with SharedArrayBuffer enabled, the 'startVideo' method won’t take any parameters. Instead, they’ll be passed into an additional method, renderVideo. 'RenderVideo' is called on your mediaStream variable immediately following the invocation of .startVideo()
Further, your HTML element passed through to .renderVideo() will be a canvas tag, in addition to several other parameters to determine dimension. These parameters are current userID, width, height, x coordinate, and y coordinate.

client/src/feature/video.js

} else {
  setIsSAB(true);
  await mediaStream.startVideo();
  mediaStream.renderVideo(document.querySelector('#self-view- 
  canvas'),client.getCurrentUserInfo().userId, 1920, 1080, 0, 
  0,3)
 }

To stop my video, I simply invoked the stopVideo method, followed by the stopRender method if necessary (based on SharedArrayBuffer). If we do have SharedArrayBuffer enabled and are using 'stopRender', know that it only calls for two parameters; canvas element and the current userID.

My video functionality is wrapped in a useCallback hook so that the functionality is memoized, and its dependency array includes the following: mediaStream, videoStarted, isSAB, client.

The full functionality is shown below, for starting and stopping video, with and without SharedArrayBuffer enabled.

client/src/feature/video.js

   const startVideoButton = useCallback(async () => {
     if (!videoStarted) {
       if (!!window.chrome && !(typeof SharedArrayBuffer 
       ==='function')) {
         setIsSAB(false);
         await mediaStream.startVideo({videoElement: 
         document.querySelector('#self-view-video')})
       } else {
         setIsSAB(true);
         await mediaStream.startVideo();
         mediaStream.renderVideo(
         document.querySelector('#self-view-canvas'), 
         client.getCurrentUserInfo().userId, 
         1920, 1080, 0, 0, 3)
        }
       setVideoStarted(true)
   } else {
        await mediaStream.stopVideo();
        if (isSAB) { 
         mediaStream.stopRenderVideo
         (document.querySelector('#self-view-canvas'), 
         client.getCurrentUserInfo().userId)
         }
     setVideoStarted(false);
      }

  }, [mediaStream, videoStarted, client, isSAB])

Audio Functionality

Starting our audio is a bit simpler than working with our video. In this app, I wrote functionality to start audio, mute, and unmute audio, which was all controlled by one button.

The methods for starting, muting, and unmuting audio require no parameters, making it fairly simple functionality to write out. I used the 'unmuteAudio' method to unmute, the 'muteAudio' to mute, and the 'startAudio' method to start audio and prompt the browser to ask for microphone permission. A code snippet is shown below.

client/src/feature/video.js

 const startAudioButton = useCallback(async () => {
   if (audioStarted) {
     if(isMuted) {
       await mediaStream.unmuteAudio();
       setIsMuted(false)
       } else {
           await mediaStream.muteAudio();
           setIsMuted(true);
         }
      } else {
          await mediaStream.startAudio();
          setAudioStarted(true);
        }
  }, [mediaStream, audioStarted, isMuted])

Also wrapped in a useCallback hook, my audio functionality will only fire when there’s a change to my audio state, muted state, or mediaStream variable, as shown above.

(Note: While not shown here, stopping audio is done with the 'stopAudio' method. You can incorporate this into the same button used for muting/unmuting/starting audio using a menu option, or separate the stop/start audio and mute/unmute audio buttons. For a more in-depth example, please refer to the published (Video SDK web sample application)[(https://github.com/zoom/videosdk-web-sample)], as previously mentioned).

Screen Share Functionality

The last feature I added was screen-sharing. The first piece of logic I wrote was to stop screen-sharing after checking my ‘isShareScreen’ state. I did this with the 'stopShareScreen' method, called on my mediaStream variable.

client/src/feature/video.js

const shareScreen = useCallback(async () => {
  if (isShareScreen) {
    await mediaStream.stopShareScreen();
    setIsShareScreen(false)
  }

Next, to start screen sharing, I needed to first check and see if my browser supports the WebCodecs API. Similar to working with SharedArrayBuffer for the video functionality, the HTML element I use for displaying the shared screen is determined by whether or not this browser feature is supported. If WebCodecs is supported, we’ll display on a video tag. Else wise, we’ll display on a canvas tag. The code snippet below shows the full functionality.

client/src/feature/video.js

   const shareScreen = useCallback(async () => {
     if (isShareScreen) {
       await mediaStream.stopShareScreen();
       setIsShareScreen(false)
     } else {
         if (isSupportWebCodecs()) {
           await mediaStream.startShareScreen(
          document.querySelector('#share-video'));
         } else {
             await mediaStream.startShareScreen(
             document.querySelector('#share-canvas'));
           }
           setIsShareScreen(true);
         }
   }, [isShareScreen, mediaStream])

You'll see the dependency array for my share-screen functionality includes the shareScreen state, and my mediaStream variable.

Looking at Our UI

Alright, we're almost to the finish line (woo-hoo!). Our last stop is a quick look at our UI. As mentioned at the beginning of this article, I used ant design as my styling library, so you’ll see some tags specific to it throughout the code.

The first thing I did was create both my canvas element and my video element, rendering the appropriate one based on my ternary operator (notice that the dimensions given in my video tag match the dimensions passed through in my .renderVideo() method earlier).

I did the same with another ternary operator for my screen-share element. For this demo, my screen-share is displayed on an HTML element directly next to my self-view video element.

For a more complex display, similar to that of an actual Zoom meeting, take a look at the (published sample app)[(https://github.com/zoom/videosdk-web-sample)].

client/src/feature/video.js

   return (
     <div>
       { isSAB ?
         <canvas id="self-view-canvas" width="1920" 
         height="1080"></canvas> 
         :
         <video id="self-view-video" width="1920" 
         height="1080"></video>
       }
       {!isSupportWebCodecs() ? 
         <canvas id="share-canvas" width="1920" height="1080"> 
         </canvas> 
         :
         <video id="share-video" width="1920" height="1080"> 
         </video>
       }

The rest of the logic here is where I created my buttons. I utilized ternary operators to ensure my buttons showed the appropriate text, based on the state of the feature (i.e.; 'unmute' if audio is muted). Remember, this app was built with ant design as its UI library, so certain styling elements are specific to that.

   <div className="video-footer">
     <Tooltip title={`${videoStarted ? 'Stop Camera' : 'Start 
     Camera'}`}>
       <Button 
         className='camera-button' icon={videoStarted ? 
         <VideoCameraOutlined /> : <VideoCameraAddOutlined />} 
         shape='circle'
         size='large'
         onClick={startVideoButton}
        />
      </Tooltip>

      <Tooltip title={`${!isShareScreen ? 'Share Screen':'Stop 
      Sharing Screen'}`}>
        <Button
          className='camera-button'
          icon={isShareScreen ? <FullscreenOutlined /> : 
          <FullscreenExitOutlined />}
          shape='circle'
          size='large'
          onClick={shareScreen}
        />
       </Tooltip>
       <Tooltip title={`${audioStarted ? isMuted ? 'unmute' : 
       'mute' : 'Start Audio'}`}>
         <Button
           className='camera-button'
           icon={audioStarted ? isMuted ? <AudioMutedOutlined 
           /> : <AudioOutlined/> : <IconFont type ="icon- 
           headset" />}
           shape="circle"
           size="large"
           onClick={startAudioButton}
          />
         </Tooltip>
       </div>
    </div>

Summary

That’s it! All the functionality was achieved through some simple browser-feature checks, state management, UI manipulation, and using the built-in methods from the Video SDK package. Using a convenient styling library and/or some basic CSS, you can easily render the different pieces (buttons, canvases, etc.). While I created a simple video-chat application, the possibilities of what you can do are exponential (check out how one of our engineers used it to create a claw machine)!

Thanks for building with me! For a video walk-through of this build, check it out on our youtube!