Building A Video Chat App With Subsequent.js, 100ms, And TailwindCSS

Video chat applications have lots of popularity and usage within the tech world right now. Other than merely being a technique of social interaction, it has been extended to be a way by which companies handle their functions with their group and discuss and access buyer feedback on their companies. On this tutorial, readers will learn how to integrate the 100ms options to create a chat software using Next.js and TailwindCSS.


What is 100ms?
100ms is an infrastructure provider that allows customers to effortlessly arrange optimized audio and video chat interfaces for different use instances corresponding to recreation streaming, classrooms, and digital events. These use instances might be simple audio and video chats and involve display sharing, waiting rooms, and recording.

To arrange a 100ms account, navigate to 100ms and arrange a consumer account in your browser. When logged in on  swag , select “Virtual Events” from the checklist of options.

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


Choose “Join as Stage” to test the video chat functionalities in the desired subdomain.
Click on on the “Go to Dashboard” option at the underside of the display to complete organising the account.


Creating our Subsequent.js software
We will use the next.js framework and the 100ms SDK for our application. To put in this, navigate to a working directory, clone the Github repo and run npm install to install the required dependencies. That may create a working listing referred to as videome, with all of the required dependencies put in.

The application will comprise a login form to hitch conferences, followed by a Room where assembly attendees can share screens, chat, and interact based on their roles. Beneath is the tree structure for the appliance

There are two main elements for the appliance: Room.js and Login.js for the Room and Login pages. The Controls.js component will comprise some control components for the room. The index.js file homes the Login component. The Login element returns a form if the user just isn't connected; else, it displays the Room part. The Room part will observe this structure:

There's a display sharing pane, a chat interface, and a chat management block containing choices to toggle audio and video, allowing display sharing, exit conferences, and switching between views.


Organising Video Chat with 100ms
With the app structure ready, the following step is integrating the 100ms SDK into the application. However earlier than this, roles should be specified for different classes of users attending a meeting. We will arrange the next roles: stage, viewer, and backstage. These roles may be configured in order that the stage function is for the assembly audio system, the viewers position is for the attendees, and the backstage role is for the organizers. We will do that via the 100ms dashboard, template options:

In the viewers position, 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 choices. Right here, we are going to need the tip level and room id to make use of 100ms in the application. Within the working directory, open the index.js file and make the next modifications:


We added an import for the HMSRoomProvider element and wrapped it around our Login Component.
Creating the Login Page


Subsequent, make the following adjustments in Login.js:
We created two state variables to handle changes to our inputs. There are features to handle updates in the enter fields and a operate 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 consumer enter. This token is then handed together with the username utilizing 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 appliance with the npm run dev command, we’ll get a consequence similar to the picture below.

We use the useHmsStore hook and a boolean variable selectIsConnectedToRoom to solely render the login kind when the person isn't related.


Then wrap return the login kind is !isConnected is true, else the Room component if false.
The Room component will probably be displayed as soon because the user connects. The useHMSActions hook can be used to exit rooms upon reloading the tab or when the person closes the tab. We are going to create a useEffect() block that can take a window.onunload event to do that and use the useHMSActions hook as a callback to the event.


Video-Sharing Element
We will create three new elements referred to as VideoTiles.js, VideoSpaces.js, and ScreenShare.js in the components folder for video and display screen sharing. VideoTiles.js will handle the host sharing presentations, whereas VideoSpaces.js will present all attendees to the assembly. In VideoTiles.js, we have the following code.


And in VideoSpaces.js :
Open Supply Session Replay

OpenReplay is an open-supply, session replay suite that lets you see what users do in your net app, helping you troubleshoot points sooner. OpenReplay is self-hosted for full management over your information.


Begin enjoying your debugging expertise - start utilizing OpenReplay without spending a dime.
Adding Chat Functionality with 100ms

We are returning the video interface and the user’s identify. With this, we can combine video chat into our software in Room.js:

We added imports for the elements and rendered them. For VideoTile.js, we verify if the person has a stage role; if true, it is rendered. VideoSpaces.js renders all of the users. The first situation checks if localPeer exists and makes use of peer=localPeer and islocal to render the present user’s video, while the second renders other users’ videos utilizing !peer.isLocal. We'll use a button to toggle this section’s visibility later in this tutorial. So as to add performance to the chat container, add the following strains of code to Room.js:

We added an import for 100ms message supplier selectHMSMessages. We created a state worth for the input area and likewise created a operate that we'll use to ship the messages.