Building Video Call App with Javascript, Supabase and WebRTC

Learn how to build video call app using Javascript, HTML, CSS, Socket IO, WebRTC, and Supabase

What you'll learn
- Learn how to build video call app using Socket IO and WebRTC
- Learn the basic fundamentals of WebRTC, such as getting to know its use cases, technical limitations, and main features
- Learn how to create Socket server and join room logic
- Learn how to create SDP offer answer exchange using Socket IO
- Learn how to setup Supabase storage for user authentication
- Learn how to build basic user authentication system
- Learn how to create functions for login, signup, and logout
- Learn how to create functions to start video call and access user media
- Learn how to create function for joining video call room and structure host approval workflow
- Learn how to create WebRTC peer connection and send SDP offer
- Learn how to create functions to handle SDP offer and answer
- Learn how to create functions to generate meeting room ID, mute audio, and mute video
- Learn how to design video call app dashboard
- Learn how to design login and signup page
- Learn how to style video call app user interface with CSS
- Learn how to conduct performance and functionality testings
- Learn how WebRTC works in video call app by capturing user media, creating peer connections, exchanging metadata, establishing peer-to-peer streams

Requirements
- No previous experience in WebRTC is required
- Basic knowledge in Javascript and HTML

Description
Welcome to Building Video Call App with Javascript, Supabase and WebRTC course. This is a comprehensive project based course where you will learn how to build real time video call applications similar to Zoom and WhatsApp. This course is a perfect combination between web development and WebRTC, making it an ideal opportunity to practice your programming skills while improving your technical knowledge in real time network communication. In the introduction session, you will learn the basic fundamentals of WebRTC, such as getting to know its use cases, technical limitations, and key features. Then, in the next section, you will learn how WebRTC works in a video call app. This section covers the step by step process starting from user media capture, creating a peer connection, signaling to exchange metadata, offer answer exchange, interactive connectivity establishment, establishing peer to peer connection, streaming media, maintaining connection, and handling disconnect. Afterward, in the next section, you will learn about all features that you will build in this project, those features include basic user authentication, realtime video and audio communication, join request host approval, mute and unmute video and audio. Following that, we will start the project, firstly, we will start with the backend, we will build a basic user authentication system and integrate it with Supabase. This feature ensures that only users with the correct email and password can log in which adds a layer of security to the app. Following that, we also will implement Socket IO to handle real-time signaling between users. This feature enables seamless communication between peers by exchanging metadata required to set up and manage video call connections.

Once it has been set up, we will establish the peer to peer connection using WebRTC protocols.

This allows users to directly connect and communicate without relying on a centralized media server, ensuring low latency and high quality streaming. Then, after that, we will create functions to allow users to mute and unmute their audio and video streams during a call.

This feature gives users full control over their communication and privacy throughout the session. Afterward, we will design a clean and user-friendly interface using HTML and CSS.

This ensures the application is easy to use and visually appealing. Lastly, at the end of the course, we will test the video call app using two testing methods, performance testing and functionality testing. By doing so, we will be able to ensure the app runs smoothly under different conditions and all features work as expected.

Before getting into the course, we need to ask this question to ourselves, why should we build a video call app using WebRTC? Well, here is my answer, this project strengthens your understanding of real-time communication and exposes you to the same core technologies used by platforms like Zoom, Google Meet, and Microsoft Teams. The skills you will learn, for example, setting up peer-to-peer connections, handling signaling, and implementing secure user authentication are not only limited to video call apps. They can also be applied to other projects including live chat systems, live streaming platforms, and E-learning softwares. These are highly in demand skills that open doors to a variety of career paths in tech and media industries.

Below are things that you can expect to learn from this course:

Learn the basic fundamentals of WebRTC, such as getting to know its use cases, technical limitations, and main features

Learn how WebRTC works in a video call app. This section covers user media capture, creating a peer connection, signaling to exchange metadata, offer answer exchange, interactive connectivity establishment, establishing peer to peer connection, streaming media, maintaining connection, and handling disconnect

Learn about video call app features like user authentication, real time video and audio communication, join request host approval system, and audio video muting

Learn how to build video call app using Socket IO and WebRTC

Learn how to install Express JS and Socket IO

Learn how to create Socket server and join room logic

Learn how to create SDP offer answer exchange using Socket IO

Learn how to setup Supabase storage for user authentication

Learn how to build basic user authentication system

Learn how to create functions for login, signup, and logout

Learn how to create functions to start video call and access user media

Learn how to create function for joining video call room and structure host approval workflow

Learn how to create WebRTC peer connection and send SDP offer

Learn how to create functions to handle SDP offer and answer

Learn how to create functions to generate meeting room ID, mute audio, and mute video

Learn how to design video call app dashboard

Learn how to design login and signup page

Learn how to style video call app user interface with CSS

Learn how to conduct performance and functionality testings

Who this course is for:
- Software engineers who are interested in building video call app with WebRTC and Socket IO
- Tech entrepreneurs who are interested in adding video call features to their apps or softwares
More Info