WebRTC Mouse Cursor Demo

A minimal WebRTC demonstration that shows real-time mouse cursor sharing between multiple users.

• Real-time mouse cursor sharing: See other users' mouse positions in real-time
• Mobile support: Touch and drag support for mobile devices
• Peer-to-peer communication: Uses WebRTC data channels for direct browser-to-browser communication
• HTTP-based signaling: Simple REST API for WebRTC signaling (offers, answers, ICE candidates)
• Automatic connection: Users automatically connect when they visit the page
• Minimal UI: Clean, simple interface with colored cursors for each user
• Debug logging: Comprehensive logging system visible in the frontend for easy debugging
• Error handling: Catches and displays all errors in the frontend log panel

• index.html: Main page with Tailwind CSS styling
• webrtc.js: WebRTC client logic for peer connections and mouse tracking

• index.ts: Hono server with signaling API endpoints

1. User visits page: Automatically generates a unique peer ID
2. Registration: Registers with signaling server and gets list of existing peers
3. WebRTC handshake: Establishes peer-to-peer connections using HTTP polling for signaling
4. Mouse sharing: Broadcasts mouse positions directly between browsers via WebRTC data channels
5. Visual feedback: Shows each user's cursor as a colored dot on screen

• POST /api/register - Register a new peer
• POST /api/offer - Send WebRTC offer
• GET /api/offers/:peerId - Poll for incoming offers
• POST /api/answer - Send WebRTC answer
• GET /api/answers/:peerId - Poll for incoming answers
• POST /api/ice - Send ICE candidate
• GET /api/ice/:peerId - Poll for ICE candidates

• Throttling: Mouse positions are throttled to 50ms intervals
• Cleanup: Automatic cleanup of stale connections and signaling data
• STUN server: Uses Google's public STUN server for NAT traversal
• Data channels: Unordered data channels for low-latency mouse position updates

Simply visit the page and move your mouse around or touch/drag on mobile. Open multiple browser tabs or share the URL with others to see multiple cursors in real-time!

• Show/Hide Logs: Click the "Show Logs" button to see detailed connection progress and debug information
• Error Logging: All errors are caught and displayed in the log panel for easy debugging
• Mobile Testing: Touch and drag gestures work on mobile devices for cursor sharing

The debug logs show:

• Peer registration and discovery
• WebRTC connection states (connecting, connected, disconnected)
• Data channel status
• ICE candidate exchanges
• Any errors that occur during the process