# ionsoft-lab/webrtc-book architecture > Architecture diagram of the GitHub repository ionsoft-lab/webrtc-book, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-10). It is an AI-made overview: check details against the source. - Interactive diagram: https://gitdiagram.com/ionsoft-lab/webrtc-book - Repository: https://github.com/ionsoft-lab/webrtc-book ## Overview webrtc-book is a collection of browser and mobile WebRTC learning samples, with separate Go signaling and TURN server programs. The browser workflow is to choose a routed demonstration and exercise media capture, recording, peer connections, or data channels; the one-to-one calling demo adds login, room/user signaling, and local/remote video views. The README describes a wider course scope, including mesh and SFU, but this tree does not establish their implementation. Edges reflect the shown App routing and P2P component calls; backend wiring and unsampled sample internals are not inferred. Main entry points: [`h5-samples/src/App.jsx`](https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/App.jsx) (Sample router), [`h5-samples/src/p2p/P2PClient.jsx`](https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/p2p/P2PClient.jsx) (P2P calling UI), [`h5-samples/src/Samples.jsx`](https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/Samples.jsx) (Sample index), [`h5-samples/src/Camera.jsx`](https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/Camera.jsx) (Camera) ## Diagram (Mermaid) ```mermaid flowchart TD subgraph group_web["Web sample app"] node_app["Sample router
[App.jsx]"] node_sampleindex["Sample index
[Samples.jsx]"] end subgraph group_media["Media features"] node_camera["Camera
[Camera.jsx]"] node_microphone["Microphone
[Microphone.jsx]"] node_canvas["Canvas capture
[Canvas.jsx]"] node_screenshare["Screen sharing
[ScreenSharing.jsx]"] node_filter["Video filter
[VideoFilter.jsx]"] node_resolution["Resolution
[Resolution.jsx]"] node_devices["Device selection
[DeviceSelect.jsx]"] node_settings["Media settings
[MediaSettings.js]"] node_meter["Audio meter
[AudioVolume.jsx]"] node_recordaudio["Record audio
[RecordAudio.jsx]"] node_recordvideo["Record video
[RecordVideo.jsx]"] node_recordscreen["Record screen
[RecordScreen.jsx]"] node_recordcanvas["Record canvas
[RecordCanvas.jsx]"] node_mediastream["Media stream API
[MediaStreamAPI.jsx]"] node_capturevideo["Capture video
[CaptureVideo.jsx]"] node_capturecanvas["Capture canvas
[CaptureCanvas.jsx]"] end subgraph group_rtc["RTC and calling"] node_peer["Peer connection
[PeerConnection.jsx]"] node_peervideo["Peer video"] node_peercanvas["Peer canvas"] node_data["Data channel
[DataChannel.jsx]"] node_filedata["File transfer"] node_p2pui["P2P calling UI
[P2PClient.jsx]"] node_calllogic["Call signaling
[P2PVideoCall.js]"] node_login["Call login
[P2PLogin.jsx]"] node_localview["Local video view
[LocalVideoView.jsx]"] node_remoteview["Remote video view"] end subgraph group_services["Go services"] node_room["Room state
[room.go]"] node_roomuser["Room user
[user.go]"] node_p2pserver["Signaling server
[server.go]"] node_p2pconn["Socket connection
[conn.go]"] node_turnserver["TURN server
[server.go]"] end subgraph group_mobile["Mobile samples"] end node_user(("Learner")) node_user -->|"opens"| node_app node_app -->|"routes to"| node_sampleindex node_app -->|"routes to"| node_camera node_app -->|"routes to"| node_microphone node_app -->|"routes to"| node_canvas node_app -->|"routes to"| node_screenshare node_app -->|"routes to"| node_filter node_app -->|"routes to"| node_resolution node_app -->|"routes to"| node_devices node_app -->|"routes to"| node_settings node_app -->|"routes to"| node_meter node_app -->|"routes to"| node_recordaudio node_app -->|"routes to"| node_recordvideo node_app -->|"routes to"| node_recordscreen node_app -->|"routes to"| node_recordcanvas node_app -->|"routes to"| node_mediastream node_app -->|"routes to"| node_capturevideo node_app -->|"routes to"| node_capturecanvas node_app -->|"routes to"| node_peer node_app -->|"routes to"| node_peervideo node_app -->|"routes to"| node_peercanvas node_app -->|"routes to"| node_data node_app -->|"routes to"| node_filedata node_app -->|"routes to"| node_p2pui node_p2pui -->|"delegates to"| node_calllogic node_p2pui -->|"renders"| node_login node_p2pui -->|"renders"| node_localview node_p2pui -->|"renders"| node_remoteview click node_app "https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/App.jsx" click node_sampleindex "https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/Samples.jsx" click node_camera "https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/Camera.jsx" click node_microphone "https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/Microphone.jsx" click node_canvas "https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/Canvas.jsx" click node_screenshare "https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/ScreenSharing.jsx" click node_filter "https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/VideoFilter.jsx" click node_resolution "https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/Resolution.jsx" click node_devices "https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/DeviceSelect.jsx" click node_settings "https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/media-settings/MediaSettings.js" click node_meter "https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/volume/AudioVolume.jsx" click node_recordaudio "https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/RecordAudio.jsx" click node_recordvideo "https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/RecordVideo.jsx" click node_recordscreen "https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/RecordScreen.jsx" click node_recordcanvas "https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/RecordCanvas.jsx" click node_mediastream "https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/MediaStreamAPI.jsx" click node_capturevideo "https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/CaptureVideo.jsx" click node_capturecanvas "https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/CaptureCanvas.jsx" click node_peer "https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/PeerConnection.jsx" click node_peervideo "https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/PeerConnectionVideo.jsx" click node_peercanvas "https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/PeerConnectionCanvas.jsx" click node_data "https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/DataChannel.jsx" click node_filedata "https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/DataChannelFile.jsx" click node_p2pui "https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/p2p/P2PClient.jsx" click node_calllogic "https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/p2p/P2PVideoCall.js" click node_login "https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/p2p/P2PLogin.jsx" click node_localview "https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/p2p/LocalVideoView.jsx" click node_remoteview "https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/p2p/RemoteVideoView.jsx" click node_room "https://github.com/ionsoft-lab/webrtc-book/blob/master/p2p-server/pkg/room/room.go" click node_roomuser "https://github.com/ionsoft-lab/webrtc-book/blob/master/p2p-server/pkg/room/user.go" click node_p2pserver "https://github.com/ionsoft-lab/webrtc-book/blob/master/p2p-server/pkg/server/server.go" click node_p2pconn "https://github.com/ionsoft-lab/webrtc-book/blob/master/p2p-server/pkg/server/conn.go" click node_turnserver "https://github.com/ionsoft-lab/webrtc-book/blob/master/turn-server/pkg/server/server.go" 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_app,node_sampleindex toneBlue class node_camera,node_microphone,node_canvas,node_screenshare,node_filter,node_resolution,node_devices,node_settings,node_meter,node_recordaudio,node_recordvideo,node_recordscreen,node_recordcanvas,node_mediastream,node_capturevideo,node_capturecanvas toneAmber class node_peer,node_peervideo,node_peercanvas,node_data,node_filedata,node_p2pui,node_calllogic,node_login,node_localview,node_remoteview toneMint class node_room,node_roomuser,node_p2pserver,node_p2pconn,node_turnserver toneRose class node_user toneIndigo ``` ## Components ### Web sample app - [Sample router](https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/App.jsx): `h5-samples/src/App.jsx` - [Sample index](https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/Samples.jsx): `h5-samples/src/Samples.jsx` ### Media features - [Camera](https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/Camera.jsx): `h5-samples/src/Camera.jsx` - [Microphone](https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/Microphone.jsx): `h5-samples/src/Microphone.jsx` - [Canvas capture](https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/Canvas.jsx): `h5-samples/src/Canvas.jsx` - [Screen sharing](https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/ScreenSharing.jsx): `h5-samples/src/ScreenSharing.jsx` - [Video filter](https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/VideoFilter.jsx): `h5-samples/src/VideoFilter.jsx` - [Resolution](https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/Resolution.jsx): `h5-samples/src/Resolution.jsx` - [Device selection](https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/DeviceSelect.jsx): `h5-samples/src/DeviceSelect.jsx` - [Media settings](https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/media-settings/MediaSettings.js): `h5-samples/src/media-settings/MediaSettings.js` - [Audio meter](https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/volume/AudioVolume.jsx): `h5-samples/src/volume/AudioVolume.jsx` - [Record audio](https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/RecordAudio.jsx): `h5-samples/src/RecordAudio.jsx` - [Record video](https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/RecordVideo.jsx): `h5-samples/src/RecordVideo.jsx` - [Record screen](https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/RecordScreen.jsx): `h5-samples/src/RecordScreen.jsx` - [Record canvas](https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/RecordCanvas.jsx): `h5-samples/src/RecordCanvas.jsx` - [Media stream API](https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/MediaStreamAPI.jsx): `h5-samples/src/MediaStreamAPI.jsx` - [Capture video](https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/CaptureVideo.jsx): `h5-samples/src/CaptureVideo.jsx` - [Capture canvas](https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/CaptureCanvas.jsx): `h5-samples/src/CaptureCanvas.jsx` ### RTC and calling - [Peer connection](https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/PeerConnection.jsx): `h5-samples/src/PeerConnection.jsx` - [Peer video](https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/PeerConnectionVideo.jsx): `h5-samples/src/PeerConnectionVideo.jsx` - [Peer canvas](https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/PeerConnectionCanvas.jsx): `h5-samples/src/PeerConnectionCanvas.jsx` - [Data channel](https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/DataChannel.jsx): `h5-samples/src/DataChannel.jsx` - [File transfer](https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/DataChannelFile.jsx): `h5-samples/src/DataChannelFile.jsx` - [P2P calling UI](https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/p2p/P2PClient.jsx): `h5-samples/src/p2p/P2PClient.jsx` - [Call signaling](https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/p2p/P2PVideoCall.js): `h5-samples/src/p2p/P2PVideoCall.js` - [Call login](https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/p2p/P2PLogin.jsx): `h5-samples/src/p2p/P2PLogin.jsx` - [Local video view](https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/p2p/LocalVideoView.jsx): `h5-samples/src/p2p/LocalVideoView.jsx` - [Remote video view](https://github.com/ionsoft-lab/webrtc-book/blob/master/h5-samples/src/p2p/RemoteVideoView.jsx): `h5-samples/src/p2p/RemoteVideoView.jsx` ### Go services - [Room state](https://github.com/ionsoft-lab/webrtc-book/blob/master/p2p-server/pkg/room/room.go): `p2p-server/pkg/room/room.go` - [Room user](https://github.com/ionsoft-lab/webrtc-book/blob/master/p2p-server/pkg/room/user.go): `p2p-server/pkg/room/user.go` - [Signaling server](https://github.com/ionsoft-lab/webrtc-book/blob/master/p2p-server/pkg/server/server.go): `p2p-server/pkg/server/server.go` - [Socket connection](https://github.com/ionsoft-lab/webrtc-book/blob/master/p2p-server/pkg/server/conn.go): `p2p-server/pkg/server/conn.go` - [TURN server](https://github.com/ionsoft-lab/webrtc-book/blob/master/turn-server/pkg/server/server.go): `turn-server/pkg/server/server.go` ### Other components - **Learner** ## Connections - Learner → Sample router: opens (evidence: `h5-samples/src/App.jsx`) - Sample router → Sample index: routes to (evidence: `h5-samples/src/App.jsx`) - Sample router → Camera: routes to (evidence: `h5-samples/src/App.jsx`) - Sample router → Microphone: routes to (evidence: `h5-samples/src/App.jsx`) - Sample router → Canvas capture: routes to (evidence: `h5-samples/src/App.jsx`) - Sample router → Screen sharing: routes to (evidence: `h5-samples/src/App.jsx`) - Sample router → Video filter: routes to (evidence: `h5-samples/src/App.jsx`) - Sample router → Resolution: routes to (evidence: `h5-samples/src/App.jsx`) - Sample router → Device selection: routes to (evidence: `h5-samples/src/App.jsx`) - Sample router → Media settings: routes to (evidence: `h5-samples/src/App.jsx`) - Sample router → Audio meter: routes to (evidence: `h5-samples/src/App.jsx`) - Sample router → Record audio: routes to (evidence: `h5-samples/src/App.jsx`) - Sample router → Record video: routes to (evidence: `h5-samples/src/App.jsx`) - Sample router → Record screen: routes to (evidence: `h5-samples/src/App.jsx`) - Sample router → Record canvas: routes to (evidence: `h5-samples/src/App.jsx`) - Sample router → Media stream API: routes to (evidence: `h5-samples/src/App.jsx`) - Sample router → Capture video: routes to (evidence: `h5-samples/src/App.jsx`) - Sample router → Capture canvas: routes to (evidence: `h5-samples/src/App.jsx`) - Sample router → Peer connection: routes to (evidence: `h5-samples/src/App.jsx`) - Sample router → Peer video: routes to (evidence: `h5-samples/src/App.jsx`) - Sample router → Peer canvas: routes to (evidence: `h5-samples/src/App.jsx`) - Sample router → Data channel: routes to (evidence: `h5-samples/src/App.jsx`) - Sample router → File transfer: routes to (evidence: `h5-samples/src/App.jsx`) - Sample router → P2P calling UI: routes to (evidence: `h5-samples/src/App.jsx`) - P2P calling UI → Call signaling: delegates to (evidence: `h5-samples/src/p2p/P2PClient.jsx`) - P2P calling UI → Call login: renders (evidence: `h5-samples/src/p2p/P2PClient.jsx`) - P2P calling UI → Local video view: renders (evidence: `h5-samples/src/p2p/P2PClient.jsx`) - P2P calling UI → Remote video view: renders (evidence: `h5-samples/src/p2p/P2PClient.jsx`)