DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

Code Meet
Under The Guidance of

Dr. MUMMELA MUNI BABU

Presented By
G. Rushendra Kumar (R200064)
[Link] (R200440)
Problem Statement
Traditional video conferencing platforms primarily focus on facilitating
communication but lack integrated environments for real-time collaborative
coding and program execution. Developers often need to juggle between
multiple applications 4 video calls, code editors, and online compilers 4
leading to fragmented workflows, decreased efficiency, and a disjointed
collaboration experience. This gap becomes especially critical in remote
learning, technical interviews, team coding sessions, and hackathons. Existing
solutions either provide limited collaboration capabilities or impose high
barriers to entry. There is a pressing need for a unified platform that not only
enables smooth video conferencing but also allows participants to code
together in real time, manage project repositories, and run programs
collaboratively 4 all within a single, streamlined environment.
Pä¾¥pcø Ob¥pcø•ėpì
The objective of this module is to build a secure, reliable, and real-time video conferencing system that can:

" Enable users to create and join video calls with low latency.

" Handle audio, video, and data transmission using peer-to-peer technologies.

" Provide a scalable, modular, and robust architecture for future enhancements.

" Integrate seamlessly with the collaborative coding and repository management modules.
KpĞ FpaøĀäpì
Pppä-ø¾-Pppä C¾jp Ej•ø¾ä Dеa³•c Søäpa³ì Rpìá¾µì•ėp UI
Direct connection via Participants of a call can Manage streams efficiently React frontend ensures fluid
WebRTC protocol. code together during calls. user experience.

Oµ«•µp C¾³á•«pä

To create and run program files online

Understanding WebRTC
Real-time API No Plugins
Enables video, audio, and data Works natively without extra
sharing directly in browsers. software installations.

Core Components
getUserMedia for capturing media
RTCPeerConnection for connection management
ICE for firewall and NAT traversal
WĞ C¾¾ìp WpbRTC?
L¾Ę LaøpµcĞ Pppä-ø¾-Pppä
Delivers fast streaming with minimal delay. Direct connection reduces server load.

Bä¾Ęìpä Naø•ėp SpcĀä•øĞ

Built-in support on modern browsers worldwide. End-to-end encrypted media channels ensure privacy.
H•‰-Lpėp« Aäc•øpcøĀäp
1 Uìpä A & Uìpä B
Establish peer connection for media exchange.

2 S¾c¨pø.IO Späėpä
Handles signaling for connection negotiation.

3 STUN Späėpä
Assists in NAT traversal with ICE candidates.

4 Mpj•a Søäpa³
Audio and video flow directly after negotiation.
Tpcµ¾«¾‰Ğ Søac¨
Fä¾µøpµj Bac¨pµj WpbRTC APIì Dpėp«¾á³pµø T¾¾«ì
[Link] for UI [Link] with Express getUserMedia VS Code
Tailwind CSS for styling [Link] for signaling RTCPeerConnection Postman
GitHub
Rpa«-T•³p Mpj•a & Pppä
C¾µµpcø•¾µ
Exploring media device access, peer connections, signaling, and toggle logic
in real-time apps.
Accpì앵‰ Mpj•a Dpė•cpì
Naė•‰aø¾ä.³pj•aDpė•cpì.‰p B•µj•µ‰ Søäpa³ì Søäpa³ Søaøp Maµa‰p³pµø
øUìpäMpj•a Assign stream to video element via Store stream in userStream state
Capture local video and audio srcObject for reuse
streams
Pppä C¾µµpcø•¾µ Iµ•ø•a«•Ĩaø•¾µ
RTCPppäC¾µµpcø•¾µ Eėpµø Haµj«päì
Configured with STUN for NAT traversal onicecandidate: send ICE candidates
ontrack: receive remote streams
Tracks added using addTrack method

S•‰µa«•µ‰ ʕø S¾c¨pø.IO

Oˆˆpä/AµìĘpä Eĝcaµ‰p ICE Caµj•jaøp Sa䕵‰ R¾¾³-baìpj API
Essential handshake for connection Ensures network paths discovery /join-room
/receive-offer
/send-answer
Spµjpä ėì Rpcp•ėpä Uájaøpì
Spµjpä S•jp Rpcp•ėpä S•jp
[Link] = false hides local video Immediate reflection of sender9s media changes
replaceTrack() updates remote stream

I³á«p³pµøaø•¾µ
Real-time apps rely on peer connections, signaling, and toggle logic for seamless communication. When implementing sender updates,
controlling media visibility with track settings is crucial. On the receiver side, reflecting the sender's media changes promptly enhances
the user experience. We used [Link] (Web sockets) as signalling server which is a pretty good choice.

Upon the successful setup of Peer connection users can send streams with each other.
Collaborative Code Editor
Once the users are connected in a room, they can open an integrated code editor in which they can code together and run a program.
FpaøĀäpì

Laµ‰Āa‰pì SĀáá¾äøpj
Supports Java, Python, C, and JavaScript for diverse programming needs. This wide range of languages allows users to
work on multiple types of projects, from web development to system programming, catering to beginners and
professionals alike.

Oµ«•µp C¾³á•«pä
Compile and run your code directly in the browser without any setup. This feature ensures a seamless development
experience, eliminating the need for local installations and enabling instant feedback and debugging capabilities.

C¾µˆ«•cø Rp쾫ė•µ‰
Automatically resolves editing conflicts by reflecting the most recent update instantly. This real-time synchronization
enhances collaborative coding by preventing overwrites and ensuring that all participants see the latest changes
immediately.
Teammates
Users can add teammates by sending an invitation via email.

Once a teammate is added, a request will be sent to their inbox as an invitation.

The invited user has the option to either accept or reject the invitation.

If the invitation is accepted, the user will be added to the teammates list.

This system ensures collaborative access and easy team management.

Repositories
Users can create repositories which are collections of program files organized in a structured way to manage their projects effectively.
Repositories serve as centralized locations where code and related resources are stored, tracked, and maintained.

Users have the ability to add teammates to their repositories to facilitate collaboration on projects. When a user adds a teammate, an
invitation is sent through the system's notifications or invitations feature. Once the invitation is accepted, the new member becomes
an official teammate with access to the shared repositories.

Team members can then collectively view, edit, and manage the code files within the repositories, promoting seamless teamwork and
version control. This collaborative environment helps teams stay synchronized, enabling multiple users to contribute efficiently in real
time.

Key collaboration features include:

Shared access to project files

Real-time editing and updates
Version control and change tracking
Invitation and notification system for adding teammates