WS CDP Screencast + Canvas Interactions - ScrapperTool

Date: 05/02/2026 Status: PARTIELLEMENT TERMINE Projets: browser-connector, connectors-front

Objectif

Remplacer le refresh screenshot REST par un flux WebSocket temps reel via CDP (Chrome DevTools Protocol) Screencast. Ajouter des interactions directes sur le canvas (click, scroll, clavier).

Ce qui fonctionne

WS Screencast (TERMINE)

• Endpoint WS /ws/screencast sur browser-connector
• Auth JWT via query param ?token=xxx
• CDP Page.startScreencast envoie frames JPEG base64 en continu
• Frontend receive-only pattern : WS pour les frames, REST pour les actions legacy
• Viewport 1920x1080, quality 80
• Badge "Live" / "REST" dans la barre d'URL

Click gauche direct (TERMINE)

• Event listener click vanilla JS sur le canvas dans useVisibleTask$
• Envoie { type: 'click', x, y } via WS
• Coordonnees converties canvas → viewport

Scroll molette (TERMINE)

• Event listener wheel sur le canvas
• Envoie { type: 'scroll', direction, amount } via WS
• Toggle on/off via bouton "Scroll" dans la barre d'URL

Clavier (TERMINE)

• Event listener keydown sur le canvas (tabIndex=0)
• Caracteres imprimables → { type: 'type', text }
• Touches speciales → { type: 'keypress', key }
• Toggle on/off via bouton "KB" dans la barre d'URL
• Ring bleu sur le canvas quand actif

Captures Screenshot/PDF/HTML (TERMINE)

• URLs prefixees avec https://browser.33800.nowhere84.com (etaient relatives → 404)

Ce qui ne fonctionne PAS

Clic droit (NON RESOLU)

• Tentative 1: contextmenu event sur canvas → ne fire pas
• Tentative 2: mousedown avec e.button === 2 sur canvas → ne fire pas
• Tentative 3: document.addEventListener('contextmenu', ..., true) capture phase → ne fire pas
• Tentative 4: bounds check au lieu de e.target comparison → ne fire pas
• Tentative 5: bouton "R-Click" UI (mode toggle comme Click) → le mode s'active mais le clic gauche suivant n'envoie pas le right-click (a investiguer)
• Hypothese: probleme navigateur/extension ou comportement Qwik specifique
• Rien dans la console du navigateur lors du clic droit

Bugs decouverts et fixes

Commits

browser-connector

• 0e06b4d → WS endpoint initial (session precedente)
• fa6353f → Support button right-click
• 7d6a462 → Map key = token
• adf9f59 → Resolution 1280x960
• f56e63c → Fix parse message + quality 80
• 202bf5a → Viewport 1920x1080

connectors-front

• 0e06b4d → WS receive-only pattern
• fa8f6ae → Fix unicode escapes
• 15b0af6 → Canvas interactions (click, contextmenu, wheel)
• dad0b04 → Fix query param string
• 5c49bc9 → Resolution 1280
• 47efbaa → mousedown pour right-click
• 84e4a91 → Keyboard, scroll toggle, right-click fix
• 2fb48f7 → Fix capture URLs
• b651090 → document capture phase right-click
• 85d8e9f → bounds check right-click
• 962d88d → R-Click button UI

Architecture

Frontend (ScrapperTool.tsx)
    |
    | wss://browser.33800.nowhere84.com/ws/screencast?token=JWT
    |
Nginx (192.168.1.104) -- WebSocket Upgrade -->
    |
Browser-Connector (192.168.1.12:5404)
    |
    | CDP: Page.startScreencast (1920x1080, JPEG q80)
    |
Chromium (Playwright)
    |
    | frames JPEG base64 ~2-5 fps
    |
    --> ws.send({ type: 'frame', image: '...' })

Lecons apprises

1. Elysia/Bun WS: l'objet ws n'est PAS la meme reference entre open, message, close → utiliser une string comme cle de Map
2. Elysia/Bun WS: les messages JSON sont auto-parses en objets → Buffer.from(object) crash, tester le type avant
3. Qwik: useSignal<WebSocket> ne fonctionne pas (pas serialisable). Pattern: WS dans useVisibleTask$ uniquement
4. Qwik canvas: les evenements contextmenu et mousedown button=2 ne firient pas sur un canvas element. Cause inconnue (ni au niveau element, ni au niveau document). A investiguer.
5. connectors-api: schema /api/fetch attend query: Record<string, string> - toutes les valeurs doivent etre des strings