From 061470b3a5a8d6fba431a3b67cd68ade1f82311e Mon Sep 17 00:00:00 2001 From: Larry8668 <114809719+Larry8668@users.noreply.github.com> Date: Sun, 2 Nov 2025 04:13:16 +0530 Subject: [PATCH 1/6] wip screen share architecture --- SCREEN_SHARE_PLAN.md | 253 ++++++ src-tauri/Cargo.lock | 180 ++++- src-tauri/Cargo.toml | 5 + src-tauri/src/lib.rs | 1019 +++++++++++++++++++++++++ src/App.css | 127 +++ src/App.jsx | 2 + src/components/HomeOptions.jsx | 1 + src/components/ScreenSharePage.jsx | 107 +++ target/rust-analyzer/flycheck0/stderr | 47 ++ target/rust-analyzer/flycheck0/stdout | 517 +++++++++++++ 10 files changed, 2257 insertions(+), 1 deletion(-) create mode 100644 SCREEN_SHARE_PLAN.md create mode 100644 src/components/ScreenSharePage.jsx create mode 100644 target/rust-analyzer/flycheck0/stderr create mode 100644 target/rust-analyzer/flycheck0/stdout diff --git a/SCREEN_SHARE_PLAN.md b/SCREEN_SHARE_PLAN.md new file mode 100644 index 0000000..5f12c3f --- /dev/null +++ b/SCREEN_SHARE_PLAN.md @@ -0,0 +1,253 @@ +# Screen Sharing Implementation Plan + +## Overview +Build a WebRTC-based screen sharing system where: +- Tauri app hosts a local signaling server (WebSocket) +- React frontend connects to the server +- Code-based access: sharer generates a code, viewers enter code to connect +- One-to-many: one sharer can share to multiple viewers + +## Architecture + +``` +┌─────────────────────────────────────────────┐ +│ Tauri App (Rust Backend) │ +│ ┌───────────────────────────────────────┐ │ +│ │ WebSocket Signaling Server │ │ +│ │ - Session management (code → session)│ │ +│ │ - WebRTC signaling (offer/answer) │ │ +│ │ - ICE candidate relay │ │ +│ └───────────────────────────────────────┘ │ +└─────────────────────────────────────────────┘ + ↑ WebSocket ↑ WebSocket + │ │ +┌────────┴─────────┐ ┌─────────┴──────────┐ +│ React Frontend │ │ React Frontend │ +│ (Sharer Tab) │ │ (Viewer Tab) │ +│ - Screen capture│ │ - Display stream │ +│ - WebRTC offer │ │ - WebRTC answer │ +└──────────────────┘ └────────────────────┘ + │ │ + └─────────── WebRTC ────────┘ + (Peer-to-Peer Connection) +``` + +## Implementation Goals + +### Goal 1: WebSocket Signaling Server +**What:** Set up a WebSocket server in Rust that handles connections and manages sessions. + +**Deliverables:** +- WebSocket server on `localhost:8765` +- Session management with code generation +- Connection handling for sharer and viewer roles + +**Test:** +- Start server, verify it accepts WebSocket connections +- Generate a session code via command +- Connect two WebSocket clients with the same code + +**Success Criteria:** +- Server starts without errors +- Can generate unique 6-character codes +- WebSocket connections are accepted and stored by session code + +--- + +### Goal 2: Basic React UI for Screen Share Management +**What:** Add a "Screen Share" option in HomeOptions that opens a React page for managing screen sharing. + +**Deliverables:** +- New option in `HomeOptions.jsx`: "Screen Share" +- New React component: `ScreenSharePage.jsx` +- UI for: + - Starting/stopping a screen share session + - Displaying the share code + - Copying the share code + +**Test:** +- Click "Screen Share" option from home +- See the Screen Share management page +- Click "Start Sharing" generates a code + +**Success Criteria:** +- Navigation works +- UI displays correctly +- Code generation works (via Tauri command) + +--- + +### Goal 3: WebSocket Connection in React +**What:** Connect React frontend to WebSocket server and handle basic message exchange. + +**Deliverables:** +- WebSocket client connection in React +- Message sending/receiving +- Connection state management + +**Test:** +- Open Screen Share page, verify WebSocket connects +- Send test message from React, verify server receives it +- Send test message from server, verify React receives it + +**Success Criteria:** +- WebSocket connection established +- Messages can be sent/received in both directions +- Connection errors are handled gracefully + +--- + +### Goal 4: Screen Capture and WebRTC Offer +**What:** Capture screen using `getDisplayMedia` and create WebRTC offer. + +**Deliverables:** +- Screen capture using `getDisplayMedia` API +- Create `RTCPeerConnection` +- Generate WebRTC offer with screen stream +- Send offer via WebSocket + +**Test:** +- Click "Start Sharing", browser prompts for screen selection +- Select screen, verify local preview (optional) +- Verify WebRTC offer is created and sent via WebSocket + +**Success Criteria:** +- Screen capture works (browser prompts) +- WebRTC offer is generated +- Offer is sent to server via WebSocket +- No errors in console + +--- + +### Goal 5: Viewer Connection and WebRTC Answer +**What:** Viewer connects via code, receives offer, creates answer, and establishes connection. + +**Deliverables:** +- Viewer page/UI for entering code +- Viewer WebSocket connection with code +- Receive offer from server +- Create WebRTC answer +- Send answer via WebSocket +- Exchange ICE candidates + +**Test:** +- Sharer starts sharing (Goal 4) +- Viewer enters code in viewer UI +- Viewer receives offer and creates answer +- Answer is sent back to sharer +- Both sides exchange ICE candidates + +**Success Criteria:** +- Viewer can connect with code +- Offer/answer exchange works +- ICE candidates are exchanged +- WebRTC connection state progresses to "connected" + +--- + +### Goal 6: Display Shared Screen +**What:** Display the received screen stream in viewer's video element. + +**Deliverables:** +- Handle `ontrack` event +- Display stream in `