# galaxy-s10/billd-live architecture > Architecture diagram of the GitHub repository galaxy-s10/billd-live, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-30). It is an AI-made overview: check details against the source. - Interactive diagram: https://gitdiagram.com/galaxy-s10/billd-live - Repository: https://github.com/galaxy-s10/billd-live ## Overview Billd-Live is a Vue 3 browser livestream frontend. The main workflow is a host publishing camera/screen media, joining a room through Socket.IO signaling, and establishing WebRTC peer connections; viewers join the room and receive those streams. The README also documents SRS/MSR and third-party ingest/pull, PK rooms, multistreaming, and commerce/account capabilities, but their implementation is not shown in the sampled files. Those branches are represented conservatively; unsampled feature wiring is not inferred. Main entry points: [`src/router/index.ts`](https://github.com/galaxy-s10/billd-live/blob/master/src/router/index.ts) (Route Dispatcher), [`src/network/webSocket.ts`](https://github.com/galaxy-s10/billd-live/blob/master/src/network/webSocket.ts) (Room Signaling), [`src/network/webRtc.ts`](https://github.com/galaxy-s10/billd-live/blob/master/src/network/webRtc.ts) (WebRTC Peer), [`src/views/pull/index.vue`](https://github.com/galaxy-s10/billd-live/blob/master/src/views/pull/index.vue) (Live Room Viewer) ## Diagram (Mermaid) ```mermaid flowchart TD subgraph group_app["Web Application"] node_entry["Vue App Entry
[main.ts]"] node_router["Route Dispatcher
[index.ts]"] node_home["Home Page
[index.vue]"] node_room_layout["Shared Layout
[index.vue]"] node_app_state["App State
[index.ts]"] node_user_state["User State
[index.ts]"] end subgraph group_live["Live Room"] node_publisher["Live Publisher
[index.vue]"] node_viewer_room["Live Room Viewer
[index.vue]"] node_srs_demo["SRS Demo
[index.vue]"] node_test_stream["Stream Test Page
[index.vue]"] node_media_sdk["SRS Media SDK
[srs.sdk.js]"] node_srs_player["SRS Player
[srs.player.js]"] node_srs_publisher["SRS Publisher
[srs.publisher.js]"] end subgraph group_transport["Realtime Transport"] node_rtc["WebRTC Peer
[webRtc.ts]"] node_socket["Room Signaling
[webSocket.ts]"] node_net_state["Connection State
[index.ts]"] end subgraph group_features["Product Features"] node_bili_push["Bilibili Push
[index.vue]"] node_other_features["Other Listed Capabilities"] end node_viewer(("Viewer")) node_host(("Host")) node_server["Live Backend"] node_srs["SRS Media Server"] node_external_platforms["External Platforms"] node_host -->|"opens app"| node_entry node_viewer -->|"opens app"| node_entry node_entry -->|"installs router"| node_router node_entry -.->|"mounts app"| node_room_layout node_router -->|"routes through"| node_room_layout node_router -->|"routes to"| node_home node_router -->|"routes to"| node_publisher node_router -->|"routes to"| node_viewer_room node_router -->|"routes to"| node_bili_push node_router -->|"routes to"| node_srs_demo node_router -->|"routes to"| node_test_stream node_host -->|"publishes media"| node_publisher node_viewer -->|"joins room"| node_viewer_room node_publisher -.->|"sends signaling"| node_socket node_viewer_room -->|"sends signaling"| node_socket node_publisher -.->|"creates peer"| node_rtc node_viewer_room -->|"creates peer"| node_rtc node_rtc -->|"sends candidates"| node_socket node_socket -->|"updates map"| node_net_state node_rtc -->|"updates map"| node_net_state node_socket -->|"exchanges room events"| node_server node_srs_demo -->|"signals room"| node_socket node_srs_demo -->|"creates peers"| node_rtc node_srs_demo -.->|"uses SDK"| node_media_sdk node_media_sdk -.->|"provides playback"| node_srs_player node_media_sdk -.->|"provides publishing"| node_srs_publisher node_bili_push -->|"signals room"| node_socket node_bili_push -->|"creates peers"| node_rtc node_test_stream -->|"signals room"| node_socket node_test_stream -->|"creates peers"| node_rtc node_host -.->|"publishes via SRS"| node_srs node_viewer -.->|"pulls streams"| node_srs node_external_platforms -.->|"receives relay"| node_bili_push node_host -.->|"uses listed services"| node_other_features node_other_features -.->|"depends on backend"| node_server node_viewer_room -->|"reads app state"| node_app_state click node_entry "https://github.com/galaxy-s10/billd-live/blob/master/src/main.ts" click node_router "https://github.com/galaxy-s10/billd-live/blob/master/src/router/index.ts" click node_home "https://github.com/galaxy-s10/billd-live/blob/master/src/views/home/index.vue" click node_room_layout "https://github.com/galaxy-s10/billd-live/blob/master/src/layout/index.vue" click node_publisher "https://github.com/galaxy-s10/billd-live/blob/master/src/views/push/index.vue" click node_viewer_room "https://github.com/galaxy-s10/billd-live/blob/master/src/views/pull/index.vue" click node_rtc "https://github.com/galaxy-s10/billd-live/blob/master/src/network/webRtc.ts" click node_socket "https://github.com/galaxy-s10/billd-live/blob/master/src/network/webSocket.ts" click node_net_state "https://github.com/galaxy-s10/billd-live/blob/master/src/store/network/index.ts" click node_srs_demo "https://github.com/galaxy-s10/billd-live/blob/master/src/views/srs-demo1/index.vue" click node_bili_push "https://github.com/galaxy-s10/billd-live/blob/master/src/views/bilibiliPush/index.vue" click node_test_stream "https://github.com/galaxy-s10/billd-live/blob/master/src/views/test1/index.vue" click node_media_sdk "https://github.com/galaxy-s10/billd-live/blob/master/src/assets/js/srs.sdk.js" click node_srs_player "https://github.com/galaxy-s10/billd-live/blob/master/src/assets/js/srs.player.js" click node_srs_publisher "https://github.com/galaxy-s10/billd-live/blob/master/src/assets/js/srs.publisher.js" click node_app_state "https://github.com/galaxy-s10/billd-live/blob/master/src/store/app/index.ts" click node_user_state "https://github.com/galaxy-s10/billd-live/blob/master/src/store/user/index.ts" click node_other_features "https://github.com/galaxy-s10/billd-live/tree/master/src" 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_entry,node_router,node_home,node_room_layout,node_app_state,node_user_state,node_viewer toneBlue class node_publisher,node_viewer_room,node_srs_demo,node_test_stream,node_media_sdk,node_srs_player,node_srs_publisher toneAmber class node_rtc,node_socket,node_net_state,node_srs toneMint class node_bili_push,node_other_features toneRose class node_host,node_server,node_external_platforms toneIndigo ``` ## Components ### Web Application - [Vue App Entry](https://github.com/galaxy-s10/billd-live/blob/master/src/main.ts): `src/main.ts` - [Route Dispatcher](https://github.com/galaxy-s10/billd-live/blob/master/src/router/index.ts): `src/router/index.ts` - [Home Page](https://github.com/galaxy-s10/billd-live/blob/master/src/views/home/index.vue): `src/views/home/index.vue` - [Shared Layout](https://github.com/galaxy-s10/billd-live/blob/master/src/layout/index.vue): `src/layout/index.vue` - [App State](https://github.com/galaxy-s10/billd-live/blob/master/src/store/app/index.ts): `src/store/app/index.ts` - [User State](https://github.com/galaxy-s10/billd-live/blob/master/src/store/user/index.ts): `src/store/user/index.ts` ### Live Room - [Live Publisher](https://github.com/galaxy-s10/billd-live/blob/master/src/views/push/index.vue): `src/views/push/index.vue` - [Live Room Viewer](https://github.com/galaxy-s10/billd-live/blob/master/src/views/pull/index.vue): `src/views/pull/index.vue` - [SRS Demo](https://github.com/galaxy-s10/billd-live/blob/master/src/views/srs-demo1/index.vue): `src/views/srs-demo1/index.vue` - [Stream Test Page](https://github.com/galaxy-s10/billd-live/blob/master/src/views/test1/index.vue): `src/views/test1/index.vue` - [SRS Media SDK](https://github.com/galaxy-s10/billd-live/blob/master/src/assets/js/srs.sdk.js): `src/assets/js/srs.sdk.js` - [SRS Player](https://github.com/galaxy-s10/billd-live/blob/master/src/assets/js/srs.player.js): `src/assets/js/srs.player.js` - [SRS Publisher](https://github.com/galaxy-s10/billd-live/blob/master/src/assets/js/srs.publisher.js): `src/assets/js/srs.publisher.js` ### Realtime Transport - [WebRTC Peer](https://github.com/galaxy-s10/billd-live/blob/master/src/network/webRtc.ts): `src/network/webRtc.ts` - [Room Signaling](https://github.com/galaxy-s10/billd-live/blob/master/src/network/webSocket.ts): `src/network/webSocket.ts` - [Connection State](https://github.com/galaxy-s10/billd-live/blob/master/src/store/network/index.ts): `src/store/network/index.ts` ### Product Features - [Bilibili Push](https://github.com/galaxy-s10/billd-live/blob/master/src/views/bilibiliPush/index.vue): `src/views/bilibiliPush/index.vue` - [Other Listed Capabilities](https://github.com/galaxy-s10/billd-live/tree/master/src): `src` ### Other components - **Viewer** - **Host** - **Live Backend** - **SRS Media Server** - **External Platforms** ## Connections - Host → Vue App Entry: opens app (evidence: `README.md`) - Viewer → Vue App Entry: opens app (evidence: `README.md`) - Vue App Entry → Route Dispatcher: installs router (evidence: `src/main.ts`) - Vue App Entry → Shared Layout: mounts app - Route Dispatcher → Shared Layout: routes through (evidence: `src/router/index.ts`) - Route Dispatcher → Home Page: routes to (evidence: `src/router/index.ts`) - Route Dispatcher → Live Publisher: routes to (evidence: `src/router/index.ts`) - Route Dispatcher → Live Room Viewer: routes to (evidence: `src/router/index.ts`) - Route Dispatcher → Bilibili Push: routes to (evidence: `src/router/index.ts`) - Route Dispatcher → SRS Demo: routes to (evidence: `src/router/index.ts`) - Route Dispatcher → Stream Test Page: routes to (evidence: `src/router/index.ts`) - Host → Live Publisher: publishes media (evidence: `README.md`) - Viewer → Live Room Viewer: joins room (evidence: `README.md`) - Live Publisher → Room Signaling: sends signaling (evidence: `src/views/push/index.vue`) - Live Room Viewer → Room Signaling: sends signaling (evidence: `src/views/pull/index.vue`) - Live Publisher → WebRTC Peer: creates peer (evidence: `src/views/push/index.vue`) - Live Room Viewer → WebRTC Peer: creates peer (evidence: `src/views/pull/index.vue`) - WebRTC Peer → Room Signaling: sends candidates (evidence: `src/network/webRtc.ts`) - Room Signaling → Connection State: updates map (evidence: `src/network/webSocket.ts`) - WebRTC Peer → Connection State: updates map (evidence: `src/network/webRtc.ts`) - Room Signaling → Live Backend: exchanges room events - SRS Demo → Room Signaling: signals room (evidence: `src/views/srs-demo1/index.vue`) - SRS Demo → WebRTC Peer: creates peers (evidence: `src/views/srs-demo1/index.vue`) - SRS Demo → SRS Media SDK: uses SDK (evidence: `src/views/srs-demo1/index.vue`) - SRS Media SDK → SRS Player: provides playback - SRS Media SDK → SRS Publisher: provides publishing - Bilibili Push → Room Signaling: signals room (evidence: `src/views/bilibiliPush/index.vue`) - Bilibili Push → WebRTC Peer: creates peers (evidence: `src/views/bilibiliPush/index.vue`) - Stream Test Page → Room Signaling: signals room (evidence: `src/views/test1/index.vue`) - Stream Test Page → WebRTC Peer: creates peers (evidence: `src/views/test1/index.vue`) - Host → SRS Media Server: publishes via SRS (evidence: `README.md`) - Viewer → SRS Media Server: pulls streams (evidence: `README.md`) - External Platforms → Bilibili Push: receives relay (evidence: `README.md`) - Host → Other Listed Capabilities: uses listed services (evidence: `README.md`) - Other Listed Capabilities → Live Backend: depends on backend (evidence: `README.md`) - Live Room Viewer → App State: reads app state (evidence: `src/views/pull/index.vue`)