Building Video Call App with WebRTC & JetpackCompose Android

Name: Building Video Call App with WebRTC & JetpackCompose Android
Rating: 4.6 (8 reviews)

Master WebRTC setup, Jetpack Compose UI design, and Android navigation to build a robust video call app for beginners.

Created byDinesh S

Last updated 10/2024

English

What you'll learn

You will gain a solid understanding of WebRTC, its architecture, and how it facilitates real-time communication within mobile applications.
You will learn how to design and develop a video call app from scratch, utilizing the modern UI toolkit Jetpack Compose for a seamless user experience.
You will be equipped to create intuitive app navigation and user interface workflows, ensuring optimal user interaction and engagement.
You will acquire the skills to set up, configure, and optimize Android projects specifically for implementing WebRTC features, including video calls.

Course content

6 sections • 35 lectures • 2h 52m total length

Introduction0:54
Introduction to WebRTC1:48
Deep Dive into Signaling Servers3:14
Identify how a signaling server helps two peers find each other and establish a WebRTC connection using offer and answer STP exchanges, and set local and remote descriptions.
Understanding NAT and NAT Traversal1:38
explore how NAT acts as a boundary translator for home networks, hiding internal IP addresses, and how WebRTC uses ICE to traverse NAT for peer-to-peer video calls.
ICE: Interactive Connectivity Establishment0:36
Learn how interactive connectivity establishment (ice) finds available internet paths to connect two devices for direct communication, using multiple candidates and STUN/TURN services to establish a usable path.
STUN: Session Traversal Utilities for NAT1:25
Learn how stun enables peers behind nat to discover their public ip address via a lightweight stun server, so they can connect directly.
TURN: Traversal Using Relays around NAT1:13
WebRTC vs. WebSockets0:38
Compare WebSocket and WebRTC to understand their real-time roles; WebSocket enables server-mediated, continuous bilateral chat, while WebRTC connects browsers or devices directly for peer-to-peer audio, video, and data.
WebRTC Basic Quiz!!

Video Call App: Demo and Workflow1:07
Demonstrate the video call workflow by collecting permissions, entering a unique room ID, and exchanging local and remote video streams via peer connections.
New Project Setup & Dependencies5:00
//For logs
implementation("com.jakewharton.timber:timber:5.0.1")
//for Permission utils
implementation("com.google.accompanist:accompanist-permissions:0.34.0")
//webrtc
implementation("com.github.codecrunchers-x:WebRTC-Android-Library:v1.0.32006")
Jcenter Deprecation and Alternative WebRTC Source Repository Update1:51
repositories {
google()
mavenCentral()
//here add jitpack maven repository.
maven { url = URI("https://jitpack.io") }
}

dependencies {
implementation("com.github.codecrunchers-x:WebRTC-Android-Library:v1.0.32006")
}
App Skeleton & Navigation12:00
Create an app skeleton and navigation flow using Jetpack Compose, with three screens—permission, sample room, and video call—plus camera and internet permissions and a start destination guarded by permission checks.

Understanding Room ID Usage0:32
Explore how the home screen uses the Room ID as a unique address for a specific chat or video call, enabling users to join the same room and communicate.
Scaffold in Jetpack Compose: The Foundation of Your UI3:47
Build a structured UI with scaffold in jetpack compose, create a top bar via top app bar, apply material 3 theming, and manage content padding for proper layout.
Designing the Home Screen: UI/UX7:17
Create a column-based home screen in Jetpack Compose with a room ID text input, a bold heading, padding, a join button, and update the room ID on input.
Home Screen Functionality & Navigation4:41

Designing the Call Screen: UI/UX4:50
Design the call screen ui/ux in Jetpack Compose by embedding a surface view renderer for WebRTC with an Android view to render video frames.
Configuring Signalling Server : Firebase6:04
gms= "4.4.2"
gms-services = { id = "com.google.gms.google-services", version.ref = "gms" }
Setup Signalling Server - Room Capacity Check10:13
Configure a signaling server flow using Firebase Firestore to create or join a room, check capacity, and limit access to two participants.
Building the Peer Connection Factory8:09
Establishing a Peer Connection6:29
Establish a WebRTC peer connection by configuring RTC settings, integrating STUN/TURN i-servers, and wiring an observer to log connection changes from connecting to connected.
Handling ICE onIceCandidate Callback5:55
Sending Data to Server & Adding Listeners4:49
Implement signaling by sending signaling messages to the Firebase server and set up a room-wide snapshot listener to handle incoming messages, including ice candidate synchronization for peer connections.
Managing Executors and ICE Candidates10:49
Create a single-thread executor to serialize WebRTC tasks, manage signaling with the server, and handle ice candidates for offers and answers by queuing until the remote description is set.
Creating and Managing SDP Offers13:37
Create and manage an SDP offer with media constraints using a STP observer, set local and remote descriptions, signal offers and answers, and process queued remote candidates.
Processing Offer and Answer Callbacks with SDP Creation10:29
Process offerer and answerer flows in a WebRTC peer connection by handling offers and STP offers and answers, setting remote and local descriptions, and exchanging signaling to establish video calls.
Rendering Local & Remote Video Feeds12:48
Render local and remote video feeds on Android with surface view renderers using an EGL-based context, and configure camera video source and tracks for streaming.
Application Demo1:36
Firebase Firestore DB Analysis - How Data stored?1:32
Analyze how Firebase updates Cloud Firestore data when creating and joining a room, tracking participant counts, offer data, and udp-first then tcp fallback for connectivity.
Resource and Memory Cleanup - Avoid Memory Leaks8:06
Clean up resources with a Jetpack Compose disposable function, releasing renderers, disposing peer connection and factory, shutting down executors, and clearing the signaling server to prevent memory leaks.
Cource Wrap-up0:30
Thank you for joining this Udemy course on building a video call app with WebRTC and Jetpack Compose Android; stay curious, and happy coding as you create amazing applications.

Requirements

Familiarity with Android app development and the Kotlin programming language will help learners follow along with the course content effectively.
While not a technical requirement, a keen interest in exploring WebRTC and building real-time communication applications will enhance the learning experience.

Description

Discover the power of real-time communication by building a video call app using WebRTC and Jetpack Compose. This comprehensive course is designed to equip you with the skills and knowledge necessary to develop and deploy a functional video call application on the Android platform. Throughout this course, you will delve into the fundamentals of WebRTC, understanding its architecture and operation, which are essential for implementing video calling features.

You’ll learn to design and structure the app’s layout using Jetpack Compose, Android’s modern UI toolkit, and create intuitive navigation and user interface workflows. This course provides practical, hands-on experience, guiding you through every step of the development process—from setting up your Android project to optimizing it for WebRTC functionality and ensuring high performance.

Whether you’re a seasoned Android developer looking to enhance your skills or a tech enthusiast eager to explore the world of real-time communication technologies, this course offers a supportive learning environment for all. By the end of this course, you’ll have the confidence and expertise to create your own video call app, seamlessly integrating WebRTC and Jetpack Compose, and opening the door to more advanced Android development projects and opportunities.

Build a Video Call App: Learn to develop a functional video call application using WebRTC and Jetpack Compose.
Master WebRTC Basics: Understand WebRTC architecture and how it supports real-time communication.
Design with Jetpack Compose: Create modern, intuitive UIs with Jetpack Compose and manage app navigation effectively.
Enhance User Experience: Explore app permissions, user experience design, and troubleshooting techniques.
Practical Hands-On Learning: Gain practical skills through guided, step-by-step development and integration processes.

This course is perfect for Android developers and tech enthusiasts who want to build real-time communication applications and advance their development skills.

Who this course is for:

If you’re passionate about real-time communication technologies and want to explore building video call applications, this course will offer a comprehensive guide to getting started.
This course will be valuable for anyone looking to enhance their mobile development skills by incorporating cutting-edge technologies like WebRTC in their projects.
Whether you’re a seasoned Android developer or just starting out, this course will deepen your understanding of WebRTC and how to integrate it into Android applications using Jetpack Compose.

Building Video Call App with WebRTC & JetpackCompose Android

What you'll learn

Explore related topics

Course content

WebRTC (Web Real Time Communication)8 lectures • 11min

Video Call App : WebRTC on Android4 lectures • 20min

Permission Screen2 lectures • 19min

Home Screen4 lectures • 16min

Video Call Screen15 lectures • 1hr 46min

Resources2 lectures • 1min

Requirements

Description

Who this course is for: