DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for I Created A Simple 1 To 1 Meeting Tool
Ethan
Ethan

Posted on

I Created A Simple 1 To 1 Meeting Tool

Introduction

Hello! I recently heard about the PlanetScale X Hashnode hackathon, so I thought I'd give it a try.
Please note that this is my first Hackathon so any advice etc. is very appreciated. πŸ˜€


The Project

I decided to create a simple 1 to 1 meeting tool using WebRTC.
The current market is mostly dominated by Google Meets/Zoom but I didn't need all the fancy features they possess, I just wanted something simple so I thought this hackathon would be a great chance to just build it. 😎


Tech Stack

The tech that was used to create the project is as follows:

  • React - To build the frontend
  • Nodejs - To build the backend
  • Express - To handle API requests
  • Socket.io - To handle WebSocket chat/signalling
  • PlanetScale - The database
  • Material-ui - For the design
  • Heroku - To host the app

The Finished Project

The page that the user is first greeted with when loading the app is the create room page:

Landing Page

Yes, I know it's very simple. πŸ˜…

The user can then create a new room by clicking on the "Create Room" button, this sends a request to the server which then creates a new room and stores the room key inside the planetscale database.

Once the room is created the following popup appears:

Popup

The popup informs the user that the new room is created and gives the options to copy the room url and a link which redirects the user to the created room.

The following screenshot shows what the page looks like when two users enter the room:

Room Page

The top left video is the local user's video whilst the video that takes up most of the screen is the remote user's video.

There is also a chat window to the right that allows both the user's to send chat messages to each other.


Project Uses

The application can be used for the following scenarios:

  • 1 to 1 chat
  • Meetings
  • Mentoring
  • Simple Appointments

Main Issues

The main issues I had with the project where:

  • I suck at UI
  • React's useEffect hook is useful, but if you use it incorrectly it can occur an infinite loop
  • Couple of issues regarding ports when uploading to Heroku (you can't use multiple ports)
  • At first it would be okay to delete the room after use but I decided not to so the user can use the room they created without having to re-create everytime

Future Plans

My future plans for the project are as follows:

  • Implement Screen Share
  • Implement Recording
  • Ability to mute video/audio
  • Saving the chat messages to PlanetScale.

Thoughts on PlanetScale

Since this is the first time I've ever used PlanetScale, I thought I'd share my experience with using it.
Creating a database is as simple as clicking a button, the quick start guides and the sample nodejs app they provide allowed me to easily get started without any issues at all. πŸ˜ƒ

Also it gets rid of the hassle of hosting your own database, which can be a bit of a pain.

If you have a little bit of mySQL knowledge, you won't have any problem getting started with it.
Hopefully I will have the chance to implement it in future projects. ☺️


Links

Finished Project: https://pacific-lowlands-02656.herokuapp.com/
Github: https://github.com/ethand91/simple-meeting


Conclusion

Thank you for reading my article. πŸ˜€
I learned a lot when building this project, especially React, which I'm still new to.
This was also the first time I've ever deployed an actual app to Heroku. (Which did waste quite a few hours).

I hope you enjoyed reading my first Hackathon article. It was a really thing learning experience and give me a chance to actually build something. I hope to participate in future Hackathons too. πŸ‘€

Top comments (3)

Collapse
brense profile image
Rense Bakker

Nice! WebRTC is awesome :)

I couldnt find your frontend code, but if you want to add mute/unmute of your track:

function SomeReactComponent() {
  const streamRef = useRef()

  const captureUserMedia = useCallback(async () => {
    const stream = await navigator.mediaDevices.getUserMedia({
      audio: true,
      video: true,
    })
    stream.getTracks().forEach(track => {
      // add track to your WebRTC conneciton
      webRTCConnection.addTrack(track, stream)
    })
    streamRef.current = stream
  }, [])

  const toggleMute = useCallback(() => {
    streamRef.current?.getTracks().forEach(track => {
      track.enabled = !track.enabled
    })
  }, [])

  // ...render something
}
Enter fullscreen mode Exit fullscreen mode

Oh and for screen sharing, just replace getUserMedia with getDisplayMedia:

const stream = await navigator.mediaDevices.getDisplayMedia({
  audio: true
  // video is always true for getDisplayMedia
})
Enter fullscreen mode Exit fullscreen mode
Collapse
ethand91 profile image
Ethan Author

Thanks for the sample code! :)
There are lots of things you can do with WebRTC, hard to learn but it's fun!

Collapse
brense profile image
Rense Bakker

Yea it can take a while to wrap your head around the concept, but very rewarding once you do "get" it.

🌚 Life is too short to browse without dark mode