Coding Challenge #76 - Build Your Own Video Chat Application

Build a clone of video chat applications like Zoom, Google Meet or Skype.

Hi this is John with this week’s Coding Challenge.

🙏 Thank you for being one of the 68,479 software developers who have subscribed, I’m honoured to have you as a reader. 🎉

If there is a Coding Challenge you’d like to see, please let me know by replying to this email📧

Coding Challenge #76 - Build Your Own Video Chat Application

This challenge is to build your own Video Chat application. Video chat applications have been a driver of the public’s interest in technology for decades. For example, the British TV show Tomorrow’s World broadcast an episode about Video Phones in 1986!

Can you imagine needing a device this big for your video calls? And it would only do seven frames per second! 😀

Fortunately these day, we have high bandwidth Internet connections along with high resolution cameras and microphones built into our laptops and phones. The net result is most of us can build a video chat application in less than a thousand lines of code!

If You Enjoy Coding Challenges Here Are Three Ways You Can Help Support It

1. Refer a friend or colleague to the newsletter. 🙏

2. Sign up for a paid subscription - think of it as buying me a coffee ☕️ twice a month, with the bonus that you also get 20% off any of my courses.

3. Buy one of my courses that walk you through a Coding Challenge.

The Challenge - Building A Video Chat Application

In this coding challenge we’re going to build a simple video chat application that allows two people to connect a call and speak to each other with live audio and video.

There are two obvious approaches you can take for this challenge. Building a chat application that works in the browser using WebRTC, or building a desktop application. For a desktop you could use a video and audio capture library to capture the camera and mic, then establish a direct connection to stream the video and audio.

Step Zero

For this step you’re going to set your environment up, ready to begin developing and testing your solution.

You’re probably going to be building a full stack web application - a sensible approach for this coding challenge - so consider the languages and technology stack you’re either most comfortable with or want to get more practice using. It all depends whether you’re here to learn the tech stack, learn how to build a video chat app, or both!

If full-stack is not your thing, then you could of course build it all in one application as a desktop app too. It’s your project, have fun!

Step 1

In this step your goal is to create a way for two users to find each other. In WebRTC terms this is a signalling server. Signalling servers are normally regular HTTP-based Web APIs (i.e. REST) and allow the client applications to relay the necessary information to find and establish a peer connection.

If you’re going the WebRTC route read about signalling for WebRTC. If you’re building your own solution you simply need a simple solution to allow people to find each other. You can do that via a simple server at a well known address.

Step 2

In this step your goal is to capture audio and video on the client application and display it to them locally.

Step 3

In this step your goal is to establish the peer-to-peer network connection. Now that your two clients have found each other you should establish a peer to peer connection. The benefit of a peer-to-peer is that the data is private, it’s not going through a server in the middle that could be storing the data (it being fully private assumes you are using end-to-end encryption). If you’re going the WebRTC route be sure to learn about ICE, STUN and TURN.

At this stage, if you’re doing it yourself, you could simply build a simple peer to peer text based chat on top of what you have so far in order to prove you have a working peer-to-peer connection.

Step 4

In this step your goal is to play audio and video from the remote client alongside the video from the local client.

Congratulations you now have a simple peer-to-peer video chat application!

Going Further

It shouldn’t take much imagination to see where you can take this. You could aim for the feature set of Zoom or a more niche product like Tuple that combines video chat with pair programming.

Two Other Ways I Can Help You:

1. I write another newsletter Developing Skills that helps you level up the other skills you need to be a great software developer.

2. I have a YouTube channel sharing advice on software engineering.

Share Your Solutions!

If you think your solution is an example other developers can learn from please share it, put it on GitHub, GitLab or elsewhere. Then let me know via Twitter or LinkedIn or just post about it there and tag me.

Request for Feedback

I’m writing these challenges to help you develop your skills as a software engineer based on how I’ve approached my own personal learning and development. What works for me, might not be the best way for you - so if you have suggestions for how I can make these challenges more useful to you and others, please get in touch and let me know. All feedback greatly appreciated.

You can reach me on Twitter, LinkedIn or through SubStack

Thanks and happy coding!

John