# webrtc/firebasertc architecture

> Architecture diagram of the GitHub repository webrtc/firebasertc, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/webrtc/firebasertc
- Repository: https://github.com/webrtc/firebasertc

## Overview

This repository is a Firebase/WebRTC video-chat codelab. Its intended workflow is to capture local camera and microphone media, create or join a room, exchange WebRTC signaling through Firestore, and establish a peer connection for remote media. The sampled app shows media capture, peer setup, room lookup and cleanup; room creation and signaling sections are placeholders, so their detailed wiring cannot be confirmed. The README documents Firestore signaling as the intended capability.

Main entry points: [`public/app.js`](https://github.com/webrtc/firebasertc/blob/master/public/app.js) (Call controller), [`public/index.html`](https://github.com/webrtc/firebasertc/blob/master/public/index.html) (Chat interface)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Browser client"]
  node_page["Chat interface<br/>[index.html]"]
  node_app["Call controller<br/>[app.js]"]
end

subgraph group_connection["Call connection"]
  node_media["Camera and microphone"]
  node_rtc["WebRTC peer"]
  node_remote["Remote media playback<br/>[index.html]"]
end

subgraph group_signaling["Room signaling"]
  node_firestore["Firebase Firestore"]
  node_rooms[("Room and candidate data")]
end

node_participant(("Participant"))

node_participant -->|"uses"| node_page
node_page -->|"dispatches actions"| node_app
node_app -->|"updates controls"| node_page
node_app -->|"requests media"| node_media
node_media -->|"returns stream"| node_app
node_app -->|"creates peer"| node_rtc
node_app -->|"adds tracks"| node_rtc
node_rtc -->|"delivers remote tracks"| node_app
node_app -->|"sets video streams"| node_remote
node_app -->|"reads room; deletes on hangup"| node_firestore
node_firestore -->|"reads and deletes"| node_rooms
node_app -.->|"uses for signaling"| node_firestore

click node_page "https://github.com/webrtc/firebasertc/blob/master/public/index.html"
click node_app "https://github.com/webrtc/firebasertc/blob/master/public/app.js"
click node_remote "https://github.com/webrtc/firebasertc/blob/master/public/index.html"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_page,node_app toneBlue
class node_media,node_rtc,node_remote toneAmber
class node_firestore,node_rooms toneMint
class node_participant toneIndigo
```

## Components

### Browser client

- [Chat interface](https://github.com/webrtc/firebasertc/blob/master/public/index.html): `public/index.html`
- [Call controller](https://github.com/webrtc/firebasertc/blob/master/public/app.js): `public/app.js`

### Call connection

- **Camera and microphone**
- **WebRTC peer**
- [Remote media playback](https://github.com/webrtc/firebasertc/blob/master/public/index.html): `public/index.html`

### Room signaling

- **Firebase Firestore**
- **Room and candidate data**

### Other components

- **Participant**

## Connections

- Participant → Chat interface: uses
- Chat interface → Call controller: dispatches actions
- Call controller → Chat interface: updates controls
- Call controller → Camera and microphone: requests media
- Camera and microphone → Call controller: returns stream
- Call controller → WebRTC peer: creates peer
- Call controller → WebRTC peer: adds tracks
- WebRTC peer → Call controller: delivers remote tracks
- Call controller → Remote media playback: sets video streams
- Call controller → Firebase Firestore: reads room; deletes on hangup
- Firebase Firestore → Room and candidate data: reads and deletes
- Call controller → Firebase Firestore: uses for signaling