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.
Top comments (1)
So using the signature helps us to create a meeting itself right?