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

0
35
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.

Creating the Login Page

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,

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.

login page

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]);

Video-Sharing Component

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 alternative to FullStory and LogRocket. It gives you full observability by replaying everything your users do on your app and showing how your stack behaves for every issue. OpenReplay is self-hosted for full control over your data.

replayer.png

Happy debugging for modern frontend teams – start monitoring your web app 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">{}</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 {}

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 {}

48 </div>

49 </div>

50 <div className="w-max px-4 bg-slate-500 h-12 rounded-md">

51 {}

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 {}

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 {}

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);

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.

Screen Sharing with 100ms

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 {}

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

23 await hmsActions.setLocalAudioEnabled(!isLocalAudioEnabled);

24 };

25

26 const ScreenShare = async () => {

27

28 await hmsActions.setScreenShareEnabled(!isLocalScreenShared);

29 };

30

31 const SwitchVideo = async () => {

32

33 await hmsActions.setLocalVideoEnabled(!isLocalVideoEnabled);

34 };

35

36 const ExitRoom = () => {

37 hmsActions.leave();

38

39 };

40

41 const permissions = useHMSStore(selectPermissions);

42

43 const endRoom = async () => {

44

45 try {

46 const lock = true;

47 const reason = "Meeting is over";

48 await hmsActions.endRoom(lock, reason);

49 } catch (error) {

50

51 console.error(error);

52 }

53 };

54

55

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

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

9}

10{

11

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.



Source link

Leave a reply

Please enter your comment!
Please enter your name here