WebRTC Workbench

A browser-only WebRTC debugging toolbox. No backend, no signaling server.

Open in Browser →

---

Features

Panel	What it does
Signaling	Manual SDP offer/answer exchange with validation and line-by-line SDP annotator
Media	Camera, mic, and screen capture with track controls and device selection
ICE Servers	Add/test STUN and TURN servers; per-server connectivity test
ICE Candidates	Real-time candidate list (host/srflx/relay), manual remote candidate paste
Data Channel	In-page loopback test — no second device needed
Metrics	getStats() polling with canvas sparklines (bitrate, RTT, packet loss)
Connection Timeline	Canvas-rendered state-change timeline
Event Log	Filterable event log with export
Snapshot Export	LLM-friendly Markdown or JSON session export for AI-assisted debugging

---

Local development

npm install
npm run dev          # http://localhost:3000
npm run build        # static export to out/
npm run test:e2e     # Playwright tests

Camera/microphone/screen sharing require HTTPS or localhost.

Manual two-peer test (same machine, two tabs)

1. Tab A — set role to Caller, Start Session, then Create Offer. Copy the SDP.
2. Tab B — set role to Callee, paste the offer, Set Offer, then Create Answer. Copy the answer SDP.
3. Tab A — paste the answer, Set Answer.
4. Watch the header status indicators turn green.

AI-assisted debugging

Open the Snapshot Export panel → Generate (Markdown) → copy → paste into Claude/ChatGPT.

---

Deployment

Pushes to master auto-deploy to GitHub Pages via .github/workflows/deploy.yml.

One-time setup: Settings → Pages → Source: GitHub Actions.

---

Browser support

Chrome 90+, Firefox 90+, Edge 90+. Safari 15+ (limited getStats() support).

---

License

MIT