Forem: Benjamin Busari

Zoom Clone App with React and 100ms SDK (part II)

Benjamin Busari — Mon, 04 Jul 2022 10:10:36 +0000

This article is a continuation of the How to build a Zoom Clone App with React tutorial.

Part 1 focuses on creating the Zoom layout. That is a required step before you can follow the tutorial in this article, so kindly check that first before continuing with this.

Zoom is a cloud-based video conferencing platform that can be used for video conferencing meetings, audio conferencing, webinars, meeting recordings, and live chat. You need a free account to start your own calls for up to 100 people; paid versions can support up to 1,000 people. You can make unlimited phone calls, hold unlimited meetings, and even record both.

Overview of 100ms?

100ms is a cloud-based platform that lets you integrate video and audio conferencing into your application. It provides APIs and SDKs through which you can set up and manage telecommunication services on the client and server-side applications.

It provides a dashboard that makes it quite easy to manipulate descriptive features of a video/audio platform from in-app interaction to the session recording. The 100ms SDK and packages are easy-to-use tools that save time without compromising effectiveness.

Prerequisites and What You Will Learn

As a prerequisite to understanding and following this tutorial, you should have basic knowledge of React.

In this article, you will learn how to build this clone using the following concepts:

Creating a new 100ms Video Conference Application
Connect your client React app to 100ms to get the APP_ACCESS_KEY and APP_SECRET from the developer section in the dashboard.
Customizing the SDK’s components by overwriting CSS classes and using Context from the SDK

Important Terms to Know

Before diving into the tutorial, here are a few terms you should be familiar with:

Peer: A peer is an object returned by 100ms SDKs that contains all information about a user - name, role, video track, etc.
Room: A room is a basic object that 100ms SDKs return on a successful connection. This contains references to peers, tracks, and everything you need to render a live audio/video app.
Role: A role defines who a peer can see/hear, the quality at which they publish their video, whether they have permission to publish video/screen share, mute someone, change someone's role, or more in a call.
Track: A track represents either the audio or video that a peer is publishing.
PeerCount: A peer count indicates the number of users participating in the room.

This tutorial will cover the following:

Muting and unmuting the audio and video for both local and remote peers.
Sharing screen for presentation for the host.
Creating a modal to invite other users to the video conference

Let’s Build Our Zoom Clone App

Developers Setup

For this tutorial, you will install packages with NPM, so you need to have Node installed on your system. Alternatively, you can use yarn if you prefer that.

For this tutorial, I used Node v16.15.0. I encourage you to use the same version if you are coding along.

Setting up your 100ms Application

100ms is a cloud platform that allows developers to add video and audio conferencing to Web, Android, and iOS applications.

The platform provides REST APIs, SDKs, and a dashboard that makes it simple to capture, distribute, record, and render live interactive audio, and video.

To build a live app on 100ms.live, you need a 100ms.live account. If you do not have one, head over to the login to login to the dashboard. You can do this either by login in with your Google account, GitHub or your email.

To create a live app:

Go to your 100ms dashboard
Select either to continue with Google, Github, or your Email
Choose a Template (Video Conferencing)

Select Account Type (Personal)

Set your domain and region

Select option to either join as a host or as a guest (for this tutorial, select HOST)

In this tutorial, the guest role doesn't have the privilege to share their screens, you can give yours the opportunity to share screen while setting your roles.

Congratulations your App is Live 👊. Next is to access the developer's panel so we can save our token, access keys, roomID etc.

Project Setup

Link 100ms SDK to the app: Install the 100ms react SDK and project dependencies.

## npm
npm install --save @100mslive/react-sdk@latest
## yarn
yarn add @100mslive/react-sdk@latest

Retrieving Credentials

Retrieve Credentials: Get token_endpoint, room_id, APP_ACCESS_KEY, and APP_SECRET from the developer section of the dashboard.

Once you’re done creating your custom application(in this case we created a video conference app), head on over to the Developers tab to get your token endpoint URL. This endpoint URL is very important as this is where we get our token from.

The next thing to do is for us to get the ROOM ID , To obtain the room ID, head to the Rooms tab on the Dashboard. You’ll see an existing room. Copy the room ID, we will be using this soon.

Next, navigate to the developers tab and copy your endpointURL and room ID

You can also set roles (guest or host) function like screen share, video and audio mute

Create Room: create a video room.
Build Clone: Use hmsAction and hmsStore hooks to start building our clone. Fill in token_endpoint and room_id.

At the end of this tutorial, your ZoomMeet clone Interface should look like this:

Building the clone App

To use the 100ms SDK that we installed previously, we need to be familiar with two hooks:

hmsActions: This will help us perform actions such as joining the room, muting our audio/video, and sending messages.
hmsStore: This contains the complete state of the room at any given time such as the participant details etc.

After installing the SDK, navigate to your index.js file and have it look like this:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { HMSRoomProvider } from "@100mslive/react-sdk";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <HMSRoomProvider>
    <App />
  </HMSRoomProvider>,
);

Next, create a file and name it fetchToken.js

Now, let's set some variables in our fetchtoken.js file. the code below will fetch your token from the saved endpoint URL returning a response, this is what we then further use in our code to set our Room for the conference.

const endPoint = "https://prod-in2.100ms.live/hmsapi/zoomclone.app.100ms.live/";
//your saved endpoint URL from your dashboard

const fetchToken = async (user_id) => {
  const response = await fetch(`${endPoint}api/token`, {
    method: "POST",
    body: JSON.stringify({
      user_id,  // user_id different from the generated id in your developers tab
      role: "host", //host, guest
      room_id: "6288c1d9b873787aa26f06f0" //your room id
    })
  });
  const { token } = await response.json();
  return token;
};
export default fetchToken;

Fill in your token_endpoint and room_id, as is shown above.
To call the join function, add the following code to your JoinRoomfunction in the JoinForm*.js* file. This is necessary because when a user joins a room, we want to display the room the user joined.
You can get the UI layout and stylings here.

import React, { useState } from 'react';
import './style.css';
import NavBar from '../UserInterface/navBar';

import { useHMSActions} from '@100mslive/react-sdk';
import fetchToken from "../fetchToken";

const JoinRoom = () => {
    const hmsActions = useHMSActions();
    const [userName, setUserName] = useState("");

    const handleSubmit = async (userName) => {
        const token = await fetchToken(userName);
        hmsActions.join({ 
        userName,
        authToken: token
        });
    };
    return(
        <>
            <NavBar />
            <hr></hr>
            <div id="content_container" style={{minHeight: 872}}  className="zoom-newcontent ">
                <div id="content" className="main-content">
                    <div className="mini-layout" id="join-conf">
                        <div className="mini-layout-body">
                            <h1 style={{fontSize: 25}}>Join Meeting</h1>
                            <div className="box">
                                <form id="join-form" className="form-vertical" onSubmit={(e) => {
                                        e.preventDefault();
                                        handleSubmit(userName);
                                    }}>
                                    <div className="form-group confno" style={{marginBottom: 30}}>
                                        <div className="controls">
                                            <label htmlFor="join-confno" style={{color: 747486, fontSize: 15,marginBottom: 10}}>Meeting ID or Personal Link Name</label>
                                            <input aria-describedby="rule-tip" id="join-confno" 
                                                type="text" 
                                                className="form-control input-lg confno" 
                                                autoComplete="off" maxLength="100" 
                                                placeholder="Enter Meeting ID or Personal Link Name" 
                                                value={userName}
                                                onChange={(e) => setUserName(e.target.value)}
                                                name="userName"
                                                required
                                                />
                                            <div id="errorContainer" className="wc-new-syle">
                                                <div id="join-errormsg" className="error hideme"><i></i><span></span></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div className="form-group" style={{marginBottom: 16}}>
                                        <div className="controls">
                                            By clicking "Join", you agree to our <a href="https://zoom.us/terms">Terms of Services</a> and <a href="https://zoom.us/privacy">Privacy Statement</a>
                                        </div>
                                    </div>
                                    <div className="form-group" style={{marginBottom: 72}}>
                                        <div className="controls wc-new-syle">
                                            <button id="btnSubmit" role="button" style={{ width: 200, padding: 5}} className="btn btn-primary user submit">Join</button>
                                        </div>
                                    </div>
                                    <div className="form-group">
                                        <div className="controls wc-new-syle">
                                            <a id="btnRoomSystemJoin" className="doc" href="https://zoom.us/meeting/rooms">Join a meeting from an H.323/SIP room system</a>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </>

    )
}
export default JoinRoom;

From the above, when the button join is clicked, the handlesubmit function is triggered which fetches the token to authenticate the user trying to join the room.

Next, we create a file and name it VideoTile.js, the function of the VideoTile.js is to display the video.

In the Video.js, your code should look like this:

import React from "react";
import {
  useHMSActions,
  useHMSStore,
  selectCameraStreamByPeerID
} from "@100mslive/react-sdk";

const VideoTile = ({ peer, isLocal }) => {
  const hmsActions = useHMSActions();
  const videoRef = React.useRef(null);
  const videoTrack = useHMSStore(selectCameraStreamByPeerID(peer.id));

  React.useEffect(() => {
    (async () => {
      console.log(videoRef.current);
      console.log(videoTrack);
      if (videoRef.current && videoTrack) {
        if (videoTrack.enabled) {
          await hmsActions.attachVideo(videoTrack.id, videoRef.current);
        } else {
          await hmsActions.detachVideo(videoTrack.id, videoRef.current);
        }
      }
    })();
  }, [hmsActions, videoTrack]);

  return (
    <div className="flex m-auto">
      <div className="relative">
        <video
          ref={videoRef}
          autoPlay={true}
          playsInline
          muted={true}
          className={`object-cover h-64 w-screen h-screen rounded-lg shadow-lg ${
            isLocal ? "mirror" : ""
          }`}
        ></video>
        <div className="top-0 w-full absolute flex justify-center">
          <div className="px-2 py-1 text-sm bg-gray-600 text-white mt-2 ml-2 rounded-lg">{`${peer.name}`}</div>
        </div>
      </div>
    </div>
  );
};

export default VideoTile;

Next, create another file and name it Peer.Js.

import { useVideo } from "@100mslive/react-sdk";

function Peer({ peer }) {
  const { videoRef } = useVideo({
    trackId: peer.videoTrack
  });
  return (
    <div className="peer-container">
      <video
        ref={videoRef}
        className={`peer-video ${peer.isLocal ? "local" : ""}`}
        autoPlay
        muted
        playsInline
      />
      <div className="peer-name">
        {peer.name} {peer.isLocal ? "(You)" : ""}
      </div>
    </div>
  );
}

export default Peer;

The Peer.js file sets

Next, navigate to the ControlBar.js, this will allow us to control our room, adding toggle bars, etc to the room. Having designed the ControlBar.js in the previous tutorial, now we proceed to adding functionalities to each clickable buttons.

import React, {useState} from "react";
import {
  useHMSActions,
  useHMSStore,
  selectIsLocalAudioEnabled,
  selectIsLocalVideoEnabled,
  selectIsLocalScreenShared,
  selectPeerCount
} from "@100mslive/react-sdk";

const ControlBar = () => {
  const hmsActions = useHMSActions();
  const isLocalAudioEnabled = useHMSStore(selectIsLocalAudioEnabled);
  const isLocalVideoEnabled = useHMSStore(selectIsLocalVideoEnabled);
  const isLocalScreenShared = useHMSStore(selectIsLocalScreenShared);
  const countParticipants = useHMSStore(selectPeerCount);

  const toggleAudio = async () => {
    await hmsActions.setLocalAudioEnabled(!isLocalAudioEnabled);
  };
  const toggleVideo = async () => {
    await hmsActions.setLocalVideoEnabled(!isLocalVideoEnabled);
  };
  const toggleScreen = async () => {
    await hmsActions.setScreenShareEnabled(!isLocalScreenShared);
  }
  const participants =  () => {
    hmsActions.setParticipantsCount(!countParticipants);
  }
  const invite = () => {
    document.getElementById("invite").classList.toggle("show");
  }
  const [show, setShow] = useState(false);

  return (

    <div class="main__controls">
        <div className="main__controls__block">
            <div className="main__controls__button main__mute_button" onClick={toggleAudio}>
                {isLocalAudioEnabled ? (
                  <>
                    <i className="fas fa-microphone"></i>
                    <span>Mute</span>
                  </>
                  ) : (
                  <>
                    <i className="fas fa-microphone-slash"></i>
                    <span>UnMute</span>
                  </>
                  )}
            </div>
            <div onClick={toggleVideo} className="main__controls__button main__video_button" >
                {isLocalVideoEnabled ? (
                  <>
                    <i className="fas fa-video"></i>
                    <span>Stop Video</span>
                  </>
                ) : (
                  <>
                    <i className="fas fa-video"></i>
                    <span>Play Video</span>
                  </>
                )}
            </div>
            <div className="main__controls__button">
                <i className="fas fa-shield-alt"></i>
                <span>Security</span>
            </div>
            <div className="main__controls__button part" onClick={invite}>
              <i className="fas fa-user-friends"></i>
              <span className="partLink">Participants <span className="participants">{countParticipants}</span></span>
                <div id="invite" className="dropdown-content">
                  <button onClick={() => setShow(true)}>Invite  
                    <span className="share-icon">

                    </span>
                  </button>
                </div>
                <Modal onClose={() => setShow(false)} show={show} />
            </div>
            <div className="main__controls__button">
                <i className="fas fa-comment-alt"></i>
                <span>Chat</span>
            </div>
            <div onClick={toggleScreen} className="main__controls__button main__video_button" >
                <i className="fas fa-desktop"></i>
                {isLocalScreenShared ? "Unshare" : "Share Screen"}
            </div>
            <div className="main__controls__button">
                <i className="fas fa-record-vinyl"></i>
                <span>Record </span>
            </div>
            <div className="main__controls__button">
                <i className="fas fa-laugh"></i>
                <span>Reactions</span>
            </div>
            <div className="main__controls__button">
                <i className="fas fa-retweet"></i>
                <span>Apps</span>
            </div>
            <div className="main__controls__button">
                <i className="fas fa-clipboard"></i>
                <span>Whiteboard</span>
            </div>
        </div>
        <div className="main__controls__block">
          <div onClick={() => { hmsActions.endRoom(false, "reason") && hmsActions.leave();
            }} 
            className="main__controls__button"
          >
            <span className="leave_meeting">Leave Meeting</span>
          </div>
        </div>
    </div>
  );
};

export default ControlBar;

With the ControlBar, we can know how many participants we have in the room, we can share the screen during a presentation by clicking on Share Screen, and you can also invite others into the room by clicking on the Participants button and then clicking on Invite.

Now, let us create a modal to display when we click on the invite. The modal will show the room name and meeting passcode which also allows the user to copy the invite link and share.

Create a folder and name it Modal, then inside the folder create a file and name it Modal.js file, your modal.js file should look like this:

import React from 'react';
import './modal.css';

const Modal = props => {

    if(!props.show) {
        return null
    }
    const fetchToken = {
        role: "host", //host, guest
        room_id: "6288c1d9b873787aa26f06f0",
        room_name: "FRONTEND"
      };

    return(
        <div className="modal">
            <div className="modal-content">
                <div className="modal-header">
                    <button onClick={props.onClose} className="button">Close</button>
                    <h5 className="modal-title">Invite People to join meeting {fetchToken.room_name}</h5>
                </div>
                <div className="modal-body">
                    <input className="modal-input" placeholder="Choose from the list or type to filter" />
                </div>
                <div className="modal-footer">
                    <button className="button">Copy invite link</button>
                    <div className="btn-right">
                        <h5>Meeting Passcode: {fetchToken.room_id} </h5>
                        <button className="button">Invite</button>
                    </div>
                </div>
            </div>
        </div>
    )
}
export default Modal;

Now, let's style the modal.js file. create a file and name it modal.css.

.modal {
    background-color: #1C1E20;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 500px;
    width: 50%;
    margin-top: 40px;
    margin-left: 200px;
}
.modal-content {
    width: 600px;
    height: 410px;
    background-color: #1C1E20;
}
.modal-header {
    display: flex;
    gap: 1em;
    text-align: center;
}
.button {
    padding: 5px;
    background-color: #1C1E20;
    border: 0;
}
.modal-input {
    width: 100%;
    padding: 5px;
    padding: 2px;
}
.modal-header, .modal-footer {
    padding: 10px;
}
.modal-title {
    margin: auto;
}
.modal-body {
    padding: 10px;  
}
.modal-footer {
    margin-top: 250px;
    display: flex;
}
.btn-right {
    display: flex;
    justify-content: space-between;
    margin: auto;
    gap: 3em;
}

Now, we navigate to the Room.js file, our localPeer will be known as class. Your Room.js file should be modified to look like this:

import React from "react";
import VideoTile from "./VideoTile";
import './view.css';
import {
  useHMSStore,
  selectLocalPeer,
  selectPeers
} from "@100mslive/react-sdk";
import ControlBar from "./Control/ControlBar";

const Room = () => {

  const localPeer = useHMSStore(selectLocalPeer);
  const peers = useHMSStore(selectPeers);

  return (
    <div class="main"> 
      <div class="main__left">
        <div class="main__videos">
          <div id="video-grid">
            <div className="flex flex-col mt-20">
              <div className="flex bg-gray-900 w-screen min-h-screen p-2 flex-wrap">
                {localPeer && <VideoTile peer={localPeer} isLocal={true} />}
                {peers &&
                  peers
                    .filter((peer) => !peer.isLocal)
                    .map((peer) => {
                      return (
                        <>
                          <VideoTile isLocal={false} peer={peer} />
                        </>
                      );
                    })}
              </div>
            </div> 
          </div>
        </div>
        <ControlBar />
      </div>
      <div className="main__right">
          <div className="main__header">
              <h6>Chat</h6>
          </div>
          <div className="main__chat_window">
              <ul className="messages">

              </ul>
          </div>
          <div className="main__message_container">
              <input id="chat_message" type="text" placeholder="Type message here..." />
          </div>
      </div>
    </div>
  );
};

export default Room;

Finally, we can modify our App.js file to look like this:

import './components/styling/style.css'
import {
  useHMSActions,
  useHMSStore,
  selectIsConnectedToRoom
} from "@100mslive/react-sdk";
import Room from "./components/Room";
import JoinRoom from './components/LandingPage/JoinForm';
import fetchToken from "./components/fetchToken";

const App = () => {
    const hmsActions = useHMSActions();
    const isConnected = useHMSStore(selectIsConnectedToRoom);
    const handleSubmit = async (userName) => {
    const token = await fetchToken(userName);
    hmsActions.join({ authToken: token, userName });
  };

  return (
    <>{isConnected ? <Room /> : <JoinRoom handleSubmit={handleSubmit} />}</>
  );
};

export default App;

Your application should look like this:

Conclusion

In this tutorial, you have successfully created a zoom clone, and added functionalities to the share button, participants, audio, and invite. What the Zoom App lacks now is reactions (emojis and stickers), chat, and how to copy, share links and add another user to the video conference. I'll walk you through implementing this in Part 3.

The increasingly virtual, remote-first world, needs an infrastructure provider that allows these experiences to happen seamlessly. 100ms' best-in-class quality and ease of use are fuelling this revolution. 100ms provides multiple solutions matching both common and unique use cases, with just a few clicks and hooks. 💥.

You can also check out the code on GitHub here

You might also be interested in other guides using React and 100ms SDK:

Building a Google Classroom Clone with React and 100ms SDK

Building a Twitch Clone with React

Building a Discord Stage Channel

Zoom Clone with React and 100ms SDK (part I)

Benjamin Busari — Mon, 04 Jul 2022 10:09:48 +0000

Video conferencing tools, like Zoom, and GoogleMeet allow individuals to meet and work together productively "face-to-face" when meeting in person isn't possible. This makes meeting remotely much more human, which is essential in order to help users feel and stay connected.

Prerequisites and What You Will Learn

As a prerequisite to understanding and following this tutorial, you should have basic knowledge of React and CSS.

In this article, you will learn how to build this clone using the following concepts:

Creating a new React Application
Styling with CSS.
Setting up the Video Conference (This section is covered in detail here).

This tutorial will cover the following:

Creating a Zoom Clone layout.
Setting buttons for muting and unmuting the audio and video for both local and remote peers.
Setting buttons for sharing the screen for presentation for the host.
Setting buttons for recording the meeting
Creating a chat layout

Let’s Build Our Zoom Clone App

Developers Setup

For this tutorial, you will install packages with NPM, so you need to have Node installed on your system. Alternatively, you can use yarn if you prefer that.

For this tutorial, I used Node v16.15.0. I encourage you to use the same version if you are coding along.

Create a React App: Use npm for boilerplate to create react app.

npx create-react-app zoomclone

The first thing to do now is to navigate into your public folder and open the index.html file, we need to import bootstrap in the index.html file for styling.


    <!-- Optional theme -->
        //This should be pasted in the <head> tag

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"
        integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <script defer src="https://unpkg.com/peerjs@1.3.1/dist/peerjs.min.js"></script>

        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/c939d0e917.js"></script>

   //While the bootstrap.min.js should be pasted in the <body> tag
  <body>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
    integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
    crossorigin="anonymous"></script>
  </body>

The next thing to do is to navigate inside your SRC folder and create a folder naming it Components.

Inside the Component folder, let’s create a navBar.jsx file. It should look like this:

import React from 'react';
import './navBar.css';

const NavBar = () => {
    return(
        <nav className="navbar">
            <div className="container-fluid">
                <div className="navbar-header">
                    <button type="button" className="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span className="sr-only">Toggle navigation</span>
                        <span className="icon-bar"></span>
                        <span className="icon-bar"></span>
                        <span className="icon-bar"></span>
                    </button>
                    <a className="navbar-brand" href="https://google.com">
                        <img className="navbar-logo"
                            src="https://static.zoom.us/static/6.1.6656/image/new/ZoomLogo.png"
                            srcSet="https://static.zoom.us/static/6.1.6656/image/new/ZoomLogo.png 1x"
                            alt="Zoom logo" aria-hidden="true" data-iml="1243.5999999940395"
                            data-atf="true" />
                    </a>
                </div>
            <div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul className="nav navbar-nav navbar-right">
                    <li>
                        <a href="https://zoom.com" style={{fontSize: 15}}> Join</a>
                    </li>
                    <li>
                        <a href="https://zoom.com" style={{fontSize: 15}}>Host</a>
                    </li>
                    <li>
                        <a href="https://zoom.com" style={{fontSize: 15}}>Sign In</a>
                    </li>
                    <li>
                        <a className='signup'>SIGN UP IT'S FREE</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    )
}

export default NavBar;

Next, is to create a navBar.css file so we can style the Navbar.

.navbar {
    background-color: #fff;
}
.navbar-logo {
    width:50%;
    height:100%;
    margin-left: 30px;
}
#time_date {
    font-size: 17px;
    font-weight: 800;
    text-decoration: none;
    color: #000;
}
.signup {
    background-color: #F26D20;
    margin-top: 5px;
    border-radius: 30px;
    color: #fff;
}

Inside the Component folder, let's create our landing page. This is what we see first when we open the application. This for us will be the foundation of our application.

Inside the Component folder, create a file and name it JoinForm.jsx.
Your JoinForm.jsx file should be like this:

import React from 'react';
import './style.css';
import NavBar from './navBar';

const JoinRoom = () => {
    return(
        <>
            <NavBar />
            <hr></hr>
            <div id="content_container" style={{minHeight: 872}}  className="zoom-newcontent ">
                <div id="content" className="main-content">
                    <div className="mini-layout" id="join-conf">
                        <div className="mini-layout-body">
                            <h1 style={{fontSize: 25}}>Join Meeting</h1>
                            <div className="box">
                                <form id="join-form" className="form-vertical">
                                    <div className="form-group confno" style={{marginBottom: 30}}>
                                        <div className="controls">
                                            <label htmlFor="join-confno" style={{color: 747486, fontSize: 15,marginBottom: 10}}>Meeting ID or Personal Link Name</label>
                                            <input aria-describedby="rule-tip" id="join-confno" 
                                                type="text" 
                                                className="form-control input-lg confno" 
                                                autoComplete="off" maxLength="100" 
                                                placeholder="Enter Meeting ID or Personal Link Name"
                                                name="userName"
                                                required
                                                />
                                            <div id="errorContainer" className="wc-new-syle">
                                                <div id="join-errormsg" className="error hideme"><i></i><span></span></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div className="form-group" style={{marginBottom: 16}}>
                                        <div className="controls">
                                            By clicking "Join", you agree to our <a href="https://zoom.us/terms">Terms of Services</a> and <a href="https://zoom.us/privacy">Privacy Statement</a>
                                        </div>
                                    </div>
                                    <div className="form-group" style={{marginBottom: 72}}>
                                        <div className="controls wc-new-syle">
                                            <button id="btnSubmit" role="button" style={{ width: 200, padding: 5}} className="btn btn-primary user submit">Join</button>
                                        </div>
                                    </div>
                                    <div className="form-group">
                                        <div className="controls wc-new-syle">
                                            <a id="btnRoomSystemJoin" className="doc" href="https://zoom.us/meeting/rooms">Join a meeting from an H.323/SIP room system</a>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </>       
    )
}
export default JoinRoom;

Let’s style the JoinForm, create a file, and name it styles.css

#content_container {
    min-height: 600px;
}
.form-control.input-lg.confno {
    font-size: 20px;
    height: 56px;
    text-align: center;
    width: 100%;
    margin-left: 0;
}
h1{
    text-align: center;
    margin-top: 100px;
}
#join-form {
    max-width: 360px;
    margin: 0 auto;
    margin-top: 50px;
}
#join-form .form-control, #join-form .btn {
    border-radius: 12px;
}
.links {
    font-size: 16px;
    color: #68687b;
}
.links a {
    color: #0E71EB;
    display: inline-block;
}
@media (max-width: 767px) {
    .form-horizontal .form-group {
        margin-left: 0;
        margin-right: 0;
    }
    #roomSystemDialog .modal-footer {
        padding-left: 20px;
        }
}
.form-control.input-lg.confno {
    font-size: 15px;
    text-align: left;
}
.form-control:focus {
    border: 2px solid #0E72ED;
}
.input-lg{
    height: 40px !important;
}
#join-conf .btn.user {
    height: 40px !important;
    font-size:16px;
    line-height:31px !important
}
.wc-new-syle{
    text-align: center;
}

The JoinForm page should look like this:

The upper part is the navBar we imported in the JoinForm.js file.

Now, let’s create a ControlBar, this is where we set the control buttons for our zoom application, this is an integral part of the application we are building.

import React from "react";

const ControlBar = () => 
  return (
    <div class="main__controls">
        <div className="main__controls__block">
            <div className="main__controls__button main__mute_button">
               <i className="fas fa-microphone"></i>
               <span>Mute</span>
            </div>
            <div className="main__controls__button main__video_button" >
               <i className="fas fa-video"></i>
               <span>Stop Video</span>
            </div>
            <div className="main__controls__button">
                <i className="fas fa-shield-alt"></i>
                <span>Security</span>
            </div>
            <div className="main__controls__button">
                <i className="fas fa-user-friends"></i>
                <span>Participants</span>
            </div>
            <div className="main__controls__button">
                <i className="fas fa-comment-alt"></i>
                <span>Chat</span>
            </div>
            <div className="main__controls__button main__video_button" >
                <i className="fas fa-desktop"></i>
                <span>Share Screen</span>
            </div>
            <div className="main__controls__button">
                <i className="fas fa-record-vinyl"></i>
                <span>Record </span>
            </div>
            <div className="main__controls__button">
                <i className="fas fa-laugh"></i>
                <span>Reactions</span>
            </div>
            <div className="main__controls__button">
                <i className="fas fa-retweet"></i>
                <span>Apps</span>
            </div>
            <div className="main__controls__button">
                <i className="fas fa-clipboard"></i>
                <span>Whiteboard</span>
            </div>
        </div>
        <div className="main__controls__block">
          <div className="main__controls__button">
            <span className="leave_meeting">Leave Meeting</span>
          </div>
        </div>
    </div>
  );
};

export default ControlBar;

💥The control buttons are ready but not functional yet, in the next series to this article, you would see how the buttons work.

Now, let’s create our room, this is where the video tile displays.

Create a file and name it Room.js, the room.js file should look like this:

import React from "react";
import ControlBar from "./Control/ControlBar";

import './view.css';

const Room = () => {

  return (
    <div class="main"> 
      <div class="main__left">
        <div class="main__videos">
          <div id="video-grid">
            <div className="flex flex-col mt-20">
              <div className="flex bg-gray-900 w-screen min-h-screen p-2 flex-wrap">
                <h3>VIDEO</h3>
              </div>
            </div> 
          </div>
        </div>
        <ControlBar />
      </div>
      <div className="main__right">
          <div className="main__header">
              <h6>Chat</h6>
          </div>
          <div className="main__chat_window">
              <ul className="messages">

              </ul>
          </div>
          <div className="main__message_container">
              <input id="chat_message" type="text" placeholder="Type message here..." />
          </div>
      </div>
    </div>
  );
};

export default Room;

The room should look like this with the control bar below it.

Finally! that's the end of this section, I hope you really found it interesting and easy to follow through.

In the next article, we will be making use of 100ms SDK for video conferencing and also assign functions to our controlBar.

Conclusion

In this tutorial, you have successfully created a zoom clone layout and styled its buttons. What the Zoom App lacks now are the functionalities of each buttons (audio, participants, share screen), the video displayed, reactions (emojis and stickers), chat, and how to copy, share links and add another user to the video conference. I'll walk you through implementing this in Part 2.

This piece is a first step towards the main goal of us building a zoom app clone with react js and 100ms. Click on the link to continue the tutorial.

You might also be interested in other guides using React and 100ms SDK:

Building a Google Classroom Clone with React and 100ms SDK

Building a Twitch Clone with React

Building a Discord Stage Channel

Destructuring of Arrays and Objects in Javascript

Benjamin Busari — Sat, 30 Apr 2022 19:20:53 +0000

# Destructuring of Arrays and Objects in Javascript

This piece aims to simplify destructuring of arrays and objects while also explaining the use of the SPREAD operator. This should be quite useful for javascript beginners new to this concept also you can look up my other piece on Destructuring Props and States.

Excited to learn something new😀? Then let’s dive in!.

What is Destructuring?

In layman’s terms, Destructuring is the process of breaking a structure. In the context of programming, the structures are the data structures, and destructuring these data structures means unpacking individual values from the data structure.

Destructuring in JavaScript is a convenient way of extracting data from arrays or objects, mapping and setting them into new, distinct variables. It efficiently allows the extraction of multiple properties or items from an array or an object.

With the syntax of destructuring, you can extract smaller fragments from objects and
arrays. It can be used for assignments and declaration of a variable.

Destructuring an Array

When destructuring in javascript, a syntax you would want to keep in mind would be placing the element you want to destructure on the right side of the assignment operator and placing the variable you want to access on the left side of the assignment operator. The variables should be in { } when destructuring objects and [ ] when destructuring arrays.

Lets look at the code below:

const alphabets = ['A', 'B', 'C', 'D', 'E', 'F']

const a = alphabets[0]

console.log(a)

//The code will display **A** in the console

The above code contains an array of alphabets. Now a way to access an element in the array alphabet would be to target the index of the element in that array and assign it to a variable, then you display the result of that variable in the console as seen above or you can try this:

**console.log(alphabets[index]).**

But with destructuring in an array you can access multiple data in that array without having to target their index. Let’s try this below:

const alphabets = ['A', 'B', 'C', 'D', 'E', 'F']

const [firstAlphabet, secondAlphabet] = alphabets;

console.log(firstAlphabet);
console.log(secondAlphabet);

// Try the code in your Editor and see the result 🙂. 
// The first element in the array will be assigned to firstAlphabet variable
// Also the second element in the array will be assigned to secondAlphabet variable

//Hence the console will display A and then B

Just like I had earlier explained, the element we want to destructure is placed on the right side of the assignment operator and the data you want to access is placed on the left side of the assignment operator, both items are in [ ] because we are destructuring an array.

JavaScript will parse the alphabets array and copy its first value ('A') into the destructuring array’s first variable (firstAlphabet).

Likewise, the computer will extract the alphabets array’s second value ('B') into the destructuring array’s second variable (secondAlphabet).

This way, we can extract not just one but multiple data from the array without having to use an index.

Destructuring an Object

Now the same syntax applies to destructuring of objects { }, let’s assume you have an object and you would like to access a property, value, etc in the object. Destructuring the object comes in handy, making life easier for you and me.

Let’s look at the code below:

const user = {
    name: "John",
    email: "JohnDoe@gmail.com",
    password: "JohnXX3346",
    address : {
        city: "ikeja",
        state: "Lagos",
        country: "Nigeria",
    }
}
console.log(user.address.city);

The above is an object User with data stored in it, now the conventional way to access information about the city of the User would be to console.log(user.address.city) as shown above. But with Object Destructuring you can access city and any other value easily.

Let’s look at the code below:

const user = {
    name: "John",
    email: "JohnDoe@gmail.com",
    password: "JohnXX3346",
    address : {
        city: "ikeja",
        state: "Lagos",
        country: "Nigeria",
    }
}
const {city} = user.address;

console.log(city);

Tried it? 🙂. What happened? The console outputs Ikeja , another way to go about this would be like this:

const user = {
    name: "John",
    email: "JohnDoe@gmail.com",
    password: "JohnXX3346",
    address : {
        city: "ikeja",
        state: "Lagos",
        country: "Nigeria",
    }
}
const {address: {city} } = user;

What do you think? 🤔

Destructuring in Function

We have clearly seen how to destructure arrays and objects. Are you finding it interesting?

We can destructure in functions too. Lets take a look at the code below:

const user = {
    name: "John",
    email: "JohnDoe@gmail.com",
    password: "JohnXX3346",
    address : {
        city: "ikeja",
        state: "Lagos",
        country: "Nigeria",
    }
}
function displayUser(info){
    console.log(info);
}
displayUser(user);

//you can also try display(user.name) to get name value, 
(user.address.city) to display city value 🙂 KEEP GOING!

The above code would display info that contains all data in the user object. Now with destructuring, we can rewrite this code to make access to values and properties easier.
How do we go about this? Let’s look at the code below:

const user = {
    name: "John",
    email: "JohnDoe@gmail.com",
    password: "JohnXX3346",
    address : {
        city: "ikeja",
        state: "Lagos",
        country: "Nigeria",
    }
}
function displayUser({name, email}){
    console.log(`My name is ${name} and here is my email: ${email}`);
}
displayUser(user);

//What was your result? Cool right 😉.
//You should see **My name is John and here is my email: JohnDoe@gmail.com** displayed in the console

Unlike the previous code, all we had to do here was to insert the properties we want to get their values in as arguments, not forgetting to put them in curly braces { }, then we console.log the result, and as you can see we made use of template strings. For more understanding of template strings, you can look up this amazing piece on Template Strings by Digital Ocean.

Conclusion

Destructuring in Javascript is a powerful feature that lets you extract properties from an object and bind these values to variables.
What I find interesting about destructuring is the concise syntax and ability to extract multiple variables in one statement also as you would see, it allows cleaner code which is one of the best practices for coding in Javascript.

I hope you enjoyed this tutorial, be sure to like, comment and give your feedback on this and also indicate what topic you would also like me to write on. Cheers! 😉