Remote Control plugin - DOM Mirroring
npm install @u-devtools/plugin-remote-controlRemote Control plugin for Universal DevTools using optimized screenshot streaming with full mouse emulation and visual feedback.
- Live Screenshot Streaming: Real-time pixel-perfect screenshots of the remote page using html-to-image
- Adaptive FPS: Smart frame rate control - only captures when page changes (MutationObserver) or after previous frame is sent
- Interactive Control: Full mouse emulation (pointerdown, mousedown, pointerup, mouseup, click) for compatibility with React/Vue components
- Visual Feedback:
- Phantom cursor (red with "Admin" label) on remote screen
- Ripple effect on clicks
- Local cursor always visible in viewer
- Smart Click Detection: Automatically finds interactive parent elements (buttons, links) even when clicking on nested elements
- Quality Settings: Adjustable quality (Low/Medium/High) for performance vs quality trade-off
- Real-time Statistics: FPS counter and frame size display
- Mouse Movement Tracking: Throttled mouse position updates (50ms) for smooth cursor following
1. Broadcast Mode (Share): The target page captures screenshots and streams them to all connected viewers
2. View Mode (View): Connects to a broadcaster and displays the remote screen with full control
- Server Side (app.ts):
- Uses html-to-image (toJpeg) for screenshot capture
- MutationObserver tracks DOM changes
- Only captures when changes detected or as heartbeat
- Adaptive frame rate (max 10 FPS by default)
- Phantom cursor rendering on remote screen
- Client Side (RemoteControlPanel.vue):
- Displays screenshots with local cursor overlay
- Handles user interactions (click, scroll, type, mousemove)
- Sends percentage-based coordinates (0.0-1.0) for screen-size independence
- Quality selector for dynamic adjustment
- Server Relay (server.ts):
- Broadcasts frames and input events to all connected clients
- Ensures all viewers receive the same stream
1. Share This Tab: Click "Share" to start broadcasting your current page
2. View Remote: Click "View" to connect to a remote broadcaster
3. Enter WebSocket URL (default: ws://localhost:5173/__u-devtools-ws)
- Click: Click anywhere on the screenshot to interact with the remote page
- Smart detection finds interactive parents (buttons, links) automatically
- Full event sequence emulation for React/Vue compatibility
- Mouse Movement: Move mouse over screenshot to control remote cursor
- Local cursor (crosshair) moves instantly
- Remote cursor (red "Admin") follows with network delay
- Type: Enter text in the input field and press Enter or click send button
- Text is sent to active input/textarea on remote page
- React/Vue compatible value setting
- Scroll: Use mouse wheel over the screenshot to scroll the remote page
- Low (Fast): 30% quality, 40% scale - Best for slow connections
- Medium (Balanced): 60% quality, 50% scale - Default, good balance
- High (Sharp): 80% quality, 80% scale - Best quality, higher bandwidth
``typescript`
'stream:frame': (payload: {
image: string; // Base64 JPEG
w: number; // Viewport width
h: number; // Viewport height
}) => { ok: boolean };
`typescript`
'stream:input': (payload: {
type: 'click' | 'type' | 'scroll' | 'config' | 'mousemove';
x?: number; // 0.0-1.0 percentage
y?: number; // 0.0-1.0 percentage
dx?: number; // Scroll delta X
dy?: number; // Scroll delta Y
text?: string; // Text to type
quality?: number; // 0.1-1.0
scale?: number; // 0.1-1.0
}) => { ok: boolean };
, a, input, [role="button"], [onclick])
- Works with nested elements (e.g., inside