Building a Video Chat App with Next.js, 100ms, and TailwindCSS

Video chat applications have a lot of popularity and usage in the tech world today. Apart from simply being a means of social interaction, it has been extended to be a means by which companies manage their applications with their team and discuss and access customer feedback on their services. In this tutorial, readers will learn how to integrate the 100ms features to create a chat application using Next.js and TailwindCSS.

What is 100ms?

100ms is an infrastructure provider that allows users to effortlessly set up optimized audio and video chat interfaces for different use cases such as game streaming, classrooms, and virtual events. These use cases can be simple audio and video chats and involve screen sharing, waiting rooms, and recording.

To set up a 100ms account, navigate to 100ms and set up a user account in your browser. When logged in on the dashboard, select “Virtual Events” from the list of options.

100ms Dashboard

After that, choose an account type: Business or Personal. Next, enter a unique subdomain for the application and click on the “Set up App” button. Below, I’m using “videome.”

Name of sub domain

Select “Join as Stage” to test the video chat functionalities in the specified subdomain.

App configuration

Click on the “Go to Dashboard” option at the bottom of the screen to finish setting up the account.

Creating our Next.js application

We will use the Next.js framework and the 100ms SDK for our application. To install this, navigate to a working directory, clone the Github repo and run npm install to install the necessary dependencies. That will create a working directory called videome, with all the required dependencies installed.

The application will contain a login form to join meetings, followed by a Room where meeting attendees can share screens, chat, and interact based on their roles. Below is the tree structure for the application

1┣ 📂pages
2 ┃ ┣ 📂api
3 ┃ ┃ ┗ 📜hello.js
4 ┃ ┣ 📂components
5 ┃ ┃ ┣ 📂RoomControls.js
6 ┃ ┃ ┃ ┗ 📜Controls.js
7 ┃ ┃ ┣ 📜Login.js
8 ┃ ┃ ┗ 📜Room.js
9 ┃ ┣ 📜index.js
10 ┃ ┗ 📜_app.js
11 ┣ 📂public
12 ┃ ┣ 📜favicon.ico
13 ┃ ┗ 📜vercel.svg
14 ┣ 📂styles
15 ┃ ┣ 📜globals.css
16 ┃ ┗ 📜Home.module.css
17 ┣ 📜.eslintrc.json
18 ┣ 📜.gitignore
19 ┣ 📜next.config.js
20 ┣ 📜package-lock.json
21 ┣ 📜package.json
22 ┣ 📜postcss.config.js
23 ┣ 📜README.md
24 ┣ 📜tailwind.config.js
25 ┗ 📜yarn.lock

There are two main components for the application: Room.js and Login.js for the Room and Login pages. The Controls.js component will contain some control elements for the room. The index.js file houses the Login component. The Login component returns a form if the user is not connected; else, it displays the Room component. The Room component will follow this layout:

Layout of the room

There is a screen sharing pane, a chat interface, and a chat control block containing options to toggle audio and video, allowing screen sharing, exit meetings, and switching between views.

Setting up Video Chat with 100ms

With the app layout ready, the next step is integrating the 100ms SDK into the application. But before this, roles have to be specified for different categories of users attending a meeting. We will set up the following roles: stage, viewer, and backstage. These roles can be configured so that the stage role is for the meeting speakers, the viewers role is for the attendees, and the backstage role is for the organizers. We can do this via the 100ms dashboard, template options:

Template options

In the viewers role, enable the “can share audio” and “can share video” options. Set the subscribe strategies option to “stage and backstage” for all the roles. Navigate in the sidebar to the developer options. Here, we will need the end point and room id to use 100ms in the application. In the working directory, open the index.js file and make the following modifications:

1import { HMSRoomProvider } from "@100mslive/react-sdk";
2
3export default function Home() {
4  return (
5    <HMSRoomProvider>
6      <div>
7        <Head>
8          <title>Videome</title>
9          <meta name="description" content="Generated by create next app" />
10          <link rel="icon" href="/favicon.ico" />
11        </Head>
12        <Login />
13      </div>
14    </HMSRoomProvider>
15  );
16}

We added an import for the HMSRoomProvider component and wrapped it around our Login Component.

Next, make the following changes in Login.js:

1import { React, useState, useEffect } from "react";
2import { useHMSActions } from "@100mslive/react-sdk";
3import Room from "./Room";
4function Login() {
5  const endpoint = "your endpoint";
6  const hmsActions = useHMSActions();
7  const [inputValues, setInputValues] = useState("");
8  const [selectValues, setSelectValues] = useState("viewer");
9
10  const handleInputChange = (e) => {
11    setInputValues(e.target.value);
12  };
13
14  const handleSelect = (e) => {
15    setSelectValues(e.target.value);
16  };
17
18  const handleSubmit = async (e) => {
19    e.preventDefault();
20    const fetchtoken = async () => {
21      const response = await fetch(`${endpoint}api/token`, {
22        method: "POST",
23        body: JSON.stringify({
24          user_id: "1234",
25          role: selectValues, //stage, moderator, viewer
26          type: "app",
27          room_id: "your room id",
28        }),
29      });
30      const { token } = await response.json();
31      return token;
32    };
33
34    const token = await fetchtoken(inputValues);
35    hmsActions.join({
36      userName: inputValues,
37      authToken: token,
38      settings: {
39        isAudioMuted: true,
40      },
41    });
42  };
43
44  return (
45    <>
46      <div className=" h-screen flex justify-center items-center bg-slate-800">
47        <div className=" flex flex-col gap-6 mt-8">
48          <input
49            type="text"
50            placeholder="John Doe"
51            value={inputValues}
52            onChange={handleInputChange}
53            className=" focus:outline-none flex-1 px-2 py-3 rounded-md text-black border-2 border-blue-600"
54          />
55          <select
56            type="text"
57            placeholder="Select Role"
58            value={selectValues}
59            onChange={handleSelect}
60            className=" focus:outline-none flex-1 px-2 py-3 rounded-md text-black border-2 border-blue-600"
61          >
62            <option>stage</option>
63            <option>viewer</option>
64          </select>
65          <button
66            className="flex-1 text-white bg-blue-600 py-3 px-10 rounded-md"
67            onClick={handleSubmit}
68          >
69            Join
70          </button>
71        </div>
72      </div>
73      <Room />
74    </>
75  );
76}
77export default Login;

We created two state variables to handle changes to our inputs. There are functions to manage updates in the input fields and a function that runs when the submit button is clicked. Upon submission, an asynchronous function to create an authentication token runs, taking the value of the role from the user input. This token is then passed along with the username using the hmsActions hook. The audiomuted property set to false ensures that new attendees to a meeting will have their mic muted by default. If we run the application with the npm run dev command, we’ll get a result similar to the image below.

We use the useHmsStore hook and a boolean variable selectIsConnectedToRoom to only render the login form when the user is not connected.

1import {
2  selectIsConnectedToRoom,
3  useHMSActions,
4  useHMSStore,
5} from "@100mslive/react-sdk";
6//...
7function Login() {
8  //...
9  const isConnected = useHMSStore(selectIsConnectedToRoom);
10}

Then wrap return the login form is !isConnected is true, else the Room component if false.

1<>
2    {!isConnected? (
3    //Form
4    ):(
5    <Room/>
6    )}
7  </>

The Room component will be displayed as soon as the user connects. The useHMSActions hook can be used to exit rooms upon reloading the tab or when the user closes the tab. We will create a useEffect() block that will take a window.onunload event to do this and use the useHMSActions hook as a callback to the event.

1useEffect(() => {
2 window.onunload = () => {
3  hmsActions.leave();
4 };
5}, [hmsActions]);

We will create three new components called VideoTiles.js, VideoSpaces.js, and ScreenShare.js in the components folder for video and screen sharing. VideoTiles.js will handle the host sharing presentations, while VideoSpaces.js will show all attendees to the meeting. In VideoTiles.js, we have the following code.

1import { React, useEffect, useRef } from "react";
2import {
3  useHMSActions,
4  useHMSStore,
5  selectLocalPeer,
6  selectCameraStreamByPeerID,
7} from "@100mslive/react-sdk";
8
9function VideoTile({ peer, isLocal }) {
10  const hmsActions = useHMSActions();
11  const videoRef = useRef(null);
12  const videoTrack = useHMSStore(selectCameraStreamByPeerID(peer.id));
13  const localPeer = useHMSStore(selectLocalPeer);
14  const stage = localPeer.roleName === "stage";
15  const viewer = localPeer.roleName === "viewer";
16
17  useEffect(() => {
18    (async () => {
19      if (videoRef.current && videoTrack) {
20        if (videoTrack.enabled) {
21          await hmsActions.attachVideo(videoTrack.id, videoRef.current);
22        } else {
23          await hmsActions.detachVideo(videoTrack.id, videoRef.current);
24        }
25      }
26    })();
27  }, [hmsActions, videoTrack]);
28
29  return (
30    <div>
31      <video
32        ref={videoRef}
33        autoPlay={true}
34        playsInline
35        muted={false}
36        style={{ width: "calc(85vw - 100px)" }}
37        className={`object-cover h-40 w-40 rounded-lg mt-12 shadow-lg" ${
38          isLocal ? "mirror" : ""
39        }`}
40      ></video>
41    </div>
42  );
43}
44
45export default VideoTile;

And in VideoSpaces.js :

1import { React, useEffect, useRef } from "react";
2import {
3  useHMSActions,
4  useHMSStore,
5  selectLocalPeer,
6  selectCameraStreamByPeerID,
7} from "@100mslive/react-sdk";
8function VideoSpaces({ peer, islocal }) {
9  const hmsActions = useHMSActions();
10  const videoRef = useRef(null);
11  const videoTrack = useHMSStore(selectCameraStreamByPeerID(peer.id));
12
13  useEffect(() => {
14    (async () => {
15      if (videoRef.current && videoTrack) {
16        if (videoTrack.enabled) {
17          await hmsActions.attachVideo(videoTrack.id, videoRef.current);
18        } else {
19          await hmsActions.detachVideo(videoTrack.id, videoRef.current);
20        }
21      }
22    })();
23  }, [videoTrack]);
24
25  return (
26    <div className=" flex m-1">
27      <div className="relative">
28        <video
29          ref={videoRef}
30          autoPlay={true}
31          playsInline
32          muted={true}
33          className={`object-cover h-40 w-40 rounded-lg mt-12 shadow-lg" ${
34            islocal ? "mirror" : ""
35          }`}
36        ></video>
37        <span className=" text-white font-medium text-lg uppercase">
38          <h3>{peer.name}</h3>
39        </span>
40      </div>
41    </div>
42  );
43}
44
45export default VideoSpaces;

Open Source Session Replay

OpenReplay is an open-source, session replay suite that lets you see what users do on your web app, helping you troubleshoot issues faster. OpenReplay is self-hosted for full control over your data.

Start enjoying your debugging experience - start using OpenReplay for free.

Adding Chat Functionality with 100ms

We are returning the video interface and the user’s name. With this, we can integrate video chat into our application in Room.js:

1import React from "react";
2import Controls from "./RoomControls.js/Controls";
3import {
4  useHMSStore,
5  selectLocalPeer,
6  selectPeers,
7} from "@100mslive/react-sdk";
8import VideoTile from "./VideoTile";
9import VideoSpaces from "./VideoSpaces";
10
11function Room() {
12  const localPeer = useHMSStore(selectLocalPeer);
13  const stage = localPeer.roleName === "stage";
14  const viewer = localPeer.roleName === "viewer";
15  const peers = useHMSStore(selectPeers);
16
17  return (
18    <div className=" relative h-screen flex justify-center items-center px-12 bg-slate-800 flex-row gap-8 overflow-hidden">
19      <div className=" h-5/6 bg-slate-600 shadow-md w-3/5 rounded-2xl">
20        <span className="flex flex-col w-full h-full">
21          <div className=" h-3/5 w-full rounded-2xl">{/* Share screen */}</div>
22          <span className=" h-2/5 w-full flex flex-col gap-8 py-3 px-5">
23            <div className=" flex flex-row w-full gap-28">
24              <div className=" text-white w-3/5">
25                <h3 className=" text-4xl font-black">Live</h3>
26                <h2 className=" text-2xl font-semibold">
27                  Live Conference meeting
28                </h2>
29                <span className="text-2xl mt-4">
30                  Welcome {localPeer && localPeer.name}
31                </span>
32                {/* display users name */}
33              </div>
34              <div className=" h-40 rounded-xl w-32 flec justify-center items-center">
35                {stage
36                  ? localPeer && <VideoTile peer={localPeer} isLocal={true} />
37                  : peers &&
38                    peers
39                      .filter((peer) => !peer.isLocal)
40                      .map((peer) => {
41                        return (
42                          <>
43                            <VideoTile isLocal={false} peer={peer} />
44                          </>
45                        );
46                      })}
47                {/* Room owner video chat */}
48              </div>
49            </div>
50            <div className="w-max px-4 bg-slate-500 h-12 rounded-md">
51              {/* Controls */}
52              <Controls />
53            </div>
54          </span>
55        </span>
56      </div>
57      <span className=" z-10 rounded-md w-1/4 h-5/6">
58        <div className=" relative h-full w-full">
59          {/* Chat interface */}
60          <div className=" relative w-full h-full bg-slate-700"></div>
61          <div className=" absolute w-full rounded-2xl bottom-0 bg-slate-900 py-3 px-5 flex flex-row gap-4">
62            <input
63              type="text"
64              placeholder="Write a Message"
65              className=" focus:outline-none flex-1 px-2 py-3 rounded-md text-white bg-slate-900"
66            />
67            <button className=" btn flex-1 text-white bg-blue-600 py-3 px-10 rounded-md">
68              Send
69            </button>
70          </div>
71        </div>
72      </span>
73      {/* section for attendees videos chat interface */}
74      <div className=" absolute h-full w-1/2 top-0 right-0 bg-slate-900 z-10 py-3 px-6 grid grid-cols-3 gap-3 overflow-y-auto">
75        {localPeer && <VideoSpaces peer={localPeer} isLocal={true} />}
76        {peers &&
77          peers
78            .filter((peer) => !peer.isLocal)
79            .map((peer) => {
80              return (
81                <>
82                  <VideoSpaces isLocal={false} peer={peer} />
83                </>
84              );
85            })}
86      </div>
87    </div>
88  );
89}
90
91export default Room;

We added imports for the components and rendered them. For VideoTile.js, we check if the user has a stage role; if true, it is rendered. VideoSpaces.js renders all the users. The first condition checks if localPeer exists and uses peer=localPeer and islocal to render the current user’s video, while the second renders other users’ videos using !peer.isLocal. We will use a button to toggle this section’s visibility later in this tutorial. To add functionality to the chat container, add the following lines of code to Room.js:

1import {
2  //...
3  useHMSActions,
4  selectHMSMessages,
5} from "@100mslive/react-sdk";
6//...
7const hmsActions = useHMSActions();
8const allMessages = useHMSStore(selectHMSMessages); // get all messages
9const [inputValues, setInputValues] = React.useState("");
10const handleInputChange = (e) => {
11  setInputValues(e.target.value);
12};
13const sendMessage = () => {
14  hmsActions.sendBroadcastMessage(inputValues);
15  setInputValues("");
16};

We added an import for 100ms message provider selectHMSMessages. We created a state value for the input field and also created a function that we will use to send the messages.

1<div className=" relative h-full w-full pb-20">
2  {/* Chat interface */}
3  <div className=" relative w-full h-full bg-slate-700 overflow-y-scroll">
4    {allMessages.map((msg) => (
5      <div
6        className="flex flex-col gap-2 bg-slate-900 m-3 py-2 px-2 rounded-md"
7        key={msg.id}
8      >
9        <span className="text-white text-2xl font-thin opacity-75">
10          {msg.senderName}
11          {console.log(msg.time)}
12        </span>
13        <span className="text-white text-xl">{msg.message}</span>
14      </div>
15    ))}
16  </div>
17  <div className=" absolute w-full rounded-2xl bottom-0 bg-slate-900 py-3 px-5 flex flex-row gap-4">
18    <input
19      type="text"
20      placeholder="Write a Message"
21      value={inputValues}
22      onChange={handleInputChange}
23      required
24      className=" focus:outline-none flex-1 px-2 py-3 rounded-md text-white bg-slate-900"
25    />
26    <button
27      className=" btn flex-1 text-white bg-blue-600 py-3 px-10 rounded-md"
28      onClick={sendMessage}
29    >
30      Send
31    </button>
32  </div>
33</div>;

Here, we mapped all messages returned by the selectHMSMessages array and returned them in the chat container. The input field and button have been set up with the earlier defined functions to send messages.

Next, we will add screen-sharing functionality to our application. To do this, add the following lines of code to the ScreenShare.js component:

1import { React, useEffect, useRef } from "react";
2import {
3  useHMSActions,
4  useHMSStore,
5  selectScreenShareByPeerID,
6} from "@100mslive/react-sdk";
7
8const ScreenShare = ({ peer, isLocal }) => {
9  const hmsActions = useHMSActions();
10  const screenRef = useRef(null);
11  const screenTrack = useHMSStore(selectScreenShareByPeerID(peer.id));
12
13  useEffect(() => {
14    (async () => {
15      if (screenRef.current && screenTrack) {
16        if (screenTrack.enabled) {
17          await hmsActions.attachVideo(screenTrack.id, screenRef.current);
18        } else {
19          await hmsActions.detachVideo(screenTrack.id, screenRef.current);
20        }
21      }
22    })();
23  }, [screenTrack]);
24
25  return (
26    <div className="flex h-full">
27      <div className="relative h-full">
28        <video
29          ref={screenRef}
30          autoPlay={true}
31          playsInline
32          muted={false}
33          className={`h-full ${isLocal ? "" : ""}`}
34        ></video>
35      </div>
36    </div>
37  );
38};
39
40export default ScreenShare;

We can import this into Room.js to render with the following code:

1//...
2import ScreenShare from "./ScreenShare";
3//...
4<div className=" h-3/5 w-full rounded-2xl">
5  {/* Share screen */}
6  {stage
7    ? null
8    : peers &&
9      peers
10        .filter((peer) => !peer.isLocal)
11        .map((peer) => {
12          return (
13            <>
14              <ScreenShare isLocal={false} peer={peer} />
15            </>
16          );
17        })}
18</div>;

The stage role shares the screen, and other connected peers will receive the video rendered.

Adding User Control Functionalities

To enable the screen-sharing operation, we will create our controls in Controls.js:

1import {
2  useHMSActions,
3  useHMSStore,
4  selectPeers,
5  selectLocalPeer,
6  selectIsLocalAudioEnabled,
7  selectIsLocalVideoEnabled,
8  selectPermissions,
9  selectIsLocalScreenShared,
10} from "@100mslive/react-sdk";
11
12function Controls() {
13  const hmsActions = useHMSActions();
14  const localPeer = useHMSStore(selectLocalPeer);
15  const stage = localPeer.roleName === "stage";
16  const peers = useHMSStore(selectPeers);
17  const isLocalAudioEnabled = useHMSStore(selectIsLocalAudioEnabled);
18  const isLocalVideoEnabled = useHMSStore(selectIsLocalVideoEnabled);
19  const isLocalScreenShared = useHMSStore(selectIsLocalScreenShared);
20
21  const SwitchAudio = async () => {
22    //toggle audio enabled
23    await hmsActions.setLocalAudioEnabled(!isLocalAudioEnabled);
24  };
25
26  const ScreenShare = async () => {
27    //toggle screenshare enabled
28    await hmsActions.setScreenShareEnabled(!isLocalScreenShared);
29  };
30
31  const SwitchVideo = async () => {
32    //toggle video enabled
33    await hmsActions.setLocalVideoEnabled(!isLocalVideoEnabled);
34  };
35
36  const ExitRoom = () => {
37    hmsActions.leave();
38    //exit a room
39  };
40
41  const permissions = useHMSStore(selectPermissions);
42
43  const endRoom = async () => {
44    //end the meeting
45    try {
46      const lock = true; // A value of true disallow rejoins
47      const reason = "Meeting is over";
48      await hmsActions.endRoom(lock, reason);
49    } catch (error) {
50      // Permission denied or not connected to room
51      console.error(error);
52    }
53  };
54
55  // continues...

Before creating the controls, note that the stage role will have the control option to share the screen and end the meeting instead of exiting the meeting. To correctly display the controls based on the user role, we will add a condition to check if the connected user is a viewer or stage for these two buttons.

1// continued...
2
3  return (
4    <div className=" w-full h-full flex flex-row gap-2 justify-center items-center text-white font-semibold">
5      <button
6        className=" uppercase px-5 py-2 hover:bg-blue-600"
7        onClick={SwitchVideo}
8      >
9        {isLocalVideoEnabled ? "Off Video" : "On Video"}
10      </button>
11      <button
12        className=" uppercase px-5 py-2 hover:bg-blue-600"
13        onClick={SwitchAudio}
14      >
15        {isLocalAudioEnabled ? "Off Audio" : "On Audio"}
16      </button>
17      {stage ? (
18        <>
19          <button
20            className=" uppercase px-5 py-2 hover:bg-blue-600"
21            onClick={ScreenShare}
22          >
23            Screen Share
24          </button>
25          {permissions.endRoom ? (
26            <button
27              className=" uppercase px-5 py-2 hover:bg-blue-600"
28              onClick={endRoom}
29            >
30              Exit Meeting
31            </button>
32          ) : null}
33        </>
34      ) : (
35        <>
36          <button
37            className=" uppercase px-5 py-2 hover:bg-blue-600"
38            onClick={ExitRoom}
39          >
40            Exit Meeting
41          </button>
42        </>
43      )}
44      <button className=" uppercase px-5 py-2 hover:bg-blue-600" onClick={/* ... */}>
45        Switch view
46      </button>
47    </div>
48  );
49}
50
51export default Controls;

We will pass down a prop from the Room component for the’ switch view’ control.

1const [visible, isVisible] = React.useState(false);
2const setVisibility = (dat) => {
3  isVisible(dat);
4};
5
6//...
7{
8  /*then show the video section if visible is true*/
9}
10{
11  /* section for attendees videos chat interface */
12}
13{
14  visible ? (
15    <div className=" absolute h-full w-1/2 top-0 right-0 bg-slate-900 z-10 py-3 px-6 grid grid-cols-3 gap-3 overflow-y-auto">
16      //.....
17    </div>
18  ) : null;
19}

Then pass setVisibility to Controls.js:

1<Controls switches={setVisibility} />

Finally, we can use the passed down props in Control.js:

1function Controls({ switches }) {
2  //...
3  let toggler = false;
4  //...
5  <button
6    className=" uppercase px-5 py-2 hover:bg-blue-600"
7    onClick={() => {
8      switches(!toggler);
9      toggler = true;
10    }}
11  >
12    Switch view
13  </button>;

If we run our application in two tabs, one as a stage role and the other as a viewer role, we get results similar to the images below. The stage looks as follows:

Stage

And the viewer:

Viewer

Conclusion

We have come to the end of this tutorial. In this tutorial, readers learned about the 100ms SDK and how they can build a video chat application with it.

The entire source code used in the tutorial can be found here.

Building a Video Chat App with Next.js, 100ms, and TailwindCSS

What is 100ms?

Creating our Next.js application

Setting up Video Chat with 100ms

Open Source Session Replay

Adding Chat Functionality with 100ms

Adding User Control Functionalities

Conclusion

More articles from OpenReplay Blog

Working with SVGs in React Native

Build a Lightweight Web Component with Lit.js

What is 100ms?

Creating our Next.js application

Setting up Video Chat with 100ms

Creating the Login Page

Video-Sharing Component

Open Source Session Replay

Adding Chat Functionality with 100ms

Screen Sharing with 100ms

Adding User Control Functionalities

Conclusion

More articles from OpenReplay Blog

Working with SVGs in React Native

Build a Lightweight Web Component with Lit.js