Hi there 🙂 We are two friends, are going to explain how our journey into the world of WebRTC and WebSockets was. We had a lot of struggles, disappointment and also fun. We hope this post will be helpful or at least informative for whoever is reading. We both are frontend engineers, hence to build the app we went for well-known [NextJS](https://nextjs.org/) as our core framework. For styling we chose [TailwindCSS](https://tailwindcss.com/), since we haven't had any experience with it, and we wanted to play around with it. After reading a couple articles and watching some tutorial videos, we realised that dealing with [WebRTC](https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API) natively is quite cumbersome. Due to this, [PeerJS](https://peerjs.com/docs/) came handy to abstract away some configurations around WebRTC. While implementing peer-to-peer communication, there must be a signalling server for the purpose of keeping in sync the state/-s (muted, camera is off and etc.) between peers. Therefore, [SocketIO](https://socket.io/) played a role of signalling server. Basic authentication layer was integrated via Auth0 to implement certain features. In this article we are going to develop following features: - lobby page to setup your initial stream settings - creation of a room to join - meeting host abilities - sharing screen with others - turning off light indicator of your device if video stream is off - visual indication of active speaker in the room - messaging - list of participants and their statuses Excited? Let’s dive into it ## Initial setup - installation and configuration of TailwindCSS - [Pull Request](https://github.com/olzh2102/dribbble-components/pull/49), [documentation](https://tailwindcss.com/docs/guides/nextjs) - installation and documentation of Auth0 - [Pull Request](https://github.com/olzh2102/dribbble-components/pull/50), [documentation](https://auth0.com/docs/quickstart/spa/react#install-the-auth0-react-sdk) - integration of SocketIO with NextJS - [Pull Request](https://github.com/olzh2102/dribbble-components/pull/53) Before diving into explanation of features' implementation details, we would like to give you a visual representation of the folders structure. It would help to navigate while reading. ```markdown |- app |----| index.tsx |- components |----| lobby.tsx |----| control-panel.tsx |----| chat.tsx |----| status.tsx |- contexts |----| users-connection.tsx |----| users-settings.tsx |- hooks |----| use-is-audio-active.ts |----| use-media-stream.ts |----| use-peer.ts |----| use-screen.ts |- pages |----| index.tsx |----| room |--------| [roomId].tsx ``` ## Lobby Page Once the user has landed on home page, they have two options: create a new room or join an existing one. No matter what is selected, they are going to go through the lobby page to setup their initial stream setting, such as muting their mic or turning their video off before entering. ```tsx // pages/[roomId].tsx export default function Room(): NextPage { const [isLobby, setIsLobby] = useState(true); const { stream } = useMediaStream(); return isLobby ? setIsLobby(false)} /> : ; } ``` As you noticed, now we have a stream. Stream can be audio and/or video, and it is a chain of data in time period. [Protocol MediaCapture and Streams API ](https://developer.mozilla.org/en-US/docs/Web/API/Media_Capture_and_Streams_API)allows us to create and manipulate the stream. The stream itself consist of multiple tracks, mainly audio and video. Here is Lobby component: ```tsx // components/lobby.tsx // pseudocode const Lobby = ({ stream, onJoinRoom, }: { stream: MediaStream; onJoinRoom: () => void; }) => { const { toggleAudio, toggleVideo } = useMediaStream(stream); return ( <>

olzh2102

How we build a-la Google Meet with NextJS, PeerJS and SocketIO

Join Our Newsletter. No Spam, Only the good stuff.