hitl-cdp-browser-provider 0.1.0__tar.gz

hitl_cdp_browser_provider-0.1.0/.gitignore

@@ -0,0 +1,4 @@
+__pycache__/
+*.egg-info/
+build/
+dist/

hitl_cdp_browser_provider-0.1.0/PKG-INFO

@@ -0,0 +1,100 @@
+Metadata-Version: 2.4
+Name: hitl-cdp-browser-provider
+Version: 0.1.0
+Summary: Bridge any CDP-capable browser session (agent-browser, Playwright, Puppeteer, plain Chrome) into an HTTP+WebSocket endpoint for human-in-the-loop remote viewing/control, e.g. HITL Broker's Browser Gateway.
+Project-URL: Homepage, https://github.com/aqiu9/HITL-Broker
+Project-URL: Repository, https://github.com/aqiu9/HITL-Broker
+License: MIT
+Keywords: agent-browser,browser-automation,cdp,chrome-devtools-protocol,hitl,human-in-the-loop,playwright,puppeteer
+Requires-Python: >=3.9
+Requires-Dist: websockets<14,>=13
+Description-Content-Type: text/markdown
+
+# hitl-cdp-browser-provider
+
+Bridges **any** Chrome DevTools Protocol (CDP) browser session into a plain
+HTTP page + WebSocket endpoint — the shape [HITL Broker](https://github.com/aqiu9/HITL-Broker)'s
+Browser Gateway (and similar systems) expect a task's `internal_url` to
+serve.
+
+Works with anything that exposes a CDP remote-debugging endpoint:
+[agent-browser](https://github.com/keithamus/agent-browser), Playwright,
+Puppeteer, or a plain `chrome --remote-debugging-port=...`. It talks CDP's
+own standard primitives (`Page.startScreencast`, `Input.dispatchMouseEvent`,
+`Input.dispatchKeyEvent`) — not any tool-specific protocol — so one bridge
+covers all of them. Functionally identical to the
+[Node package of the same name](https://github.com/aqiu9/HITL-Broker/tree/main/packages/node/hitl-cdp-browser-provider);
+pick whichever fits your automation stack (e.g. Playwright-Python/Selenium-Python
+users won't need Node at all).
+
+## Install
+
+```bash
+pip install hitl-cdp-browser-provider
+```
+
+## Use
+
+```bash
+# Point it at a CDP HTTP base -- it auto-picks the first "page" target
+hitl-cdp-browser-provider --cdp-http http://127.0.0.1:9222 --bind 0.0.0.0:18234
+
+# Or an exact page WebSocket URL if you already have one
+hitl-cdp-browser-provider --cdp-url ws://127.0.0.1:9222/devtools/page/ABC123 --bind 0.0.0.0:18234
+```
+
+Then point your HITL Source's `browser_endpoint` (or any equivalent
+"internal_url for browser tasks" field) at `<bind-host>:<bind-port>`.
+
+### Finding a CDP endpoint
+
+- **agent-browser**: `agent-browser get cdp-url --session <name>` gives a
+  `ws://127.0.0.1:<port>/devtools/browser/<id>` browser-level URL — pass its
+  `http://127.0.0.1:<port>` base as `--cdp-http` (screencast needs a page
+  target, which `--cdp-http` auto-discovers via `/json/list`).
+- **Chrome/Chromium directly**: launch with `--remote-debugging-port=9222`,
+  use `--cdp-http http://127.0.0.1:9222`.
+- **Playwright (Python)**: launch Chromium with
+  `args=["--remote-debugging-port=9222"]`, then point `--cdp-http` at that
+  port. (`browser.new_cdp_session(page)` also works if you'd rather wire
+  the CDP session up yourself instead of using this CLI.)
+- **Selenium (Python)**: Chrome launched with `--remote-debugging-port`
+  works the same way; Selenium 4's own `driver.execute_cdp_cmd` isn't
+  needed here since this bridge connects directly.
+
+## Library use
+
+```python
+import asyncio
+from hitl_cdp_browser_provider import serve
+
+asyncio.run(serve({
+    "cdp_http": "http://127.0.0.1:9222",
+    "cdp_url": None,
+    "bind": "0.0.0.0:18234",
+    "quality": 60,
+    "max_width": 1280,
+    "max_height": 800,
+}))
+```
+
+## Protocol
+
+The viewer page renders `{"t":"frame","data":"<base64 jpeg>"}` messages onto
+a `<canvas>` and sends back `{"t":"mouse",...}` / `{"t":"key",...}` messages,
+which this bridge translates 1:1 into `Input.dispatchMouseEvent` /
+`Input.dispatchKeyEvent` CDP calls.
+
+## Not CDP? Use noVNC instead
+
+If your browser session isn't driven by anything CDP-capable (or you want a
+screen-level rather than browser-API-level handoff — e.g. an arbitrary GUI
+app in a container, not just a browser), see the
+[noVNC recipe](https://github.com/aqiu9/HITL-Broker/blob/main/docs/browser-provider-novnc.md)
+in the HITL-Broker repo instead — noVNC + websockify already implements the
+same "HTTP page + WS" contract with zero custom code, at the cost of needing
+an X server (Xvfb) + VNC server in the container.
+
+## License
+
+MIT

hitl_cdp_browser_provider-0.1.0/README.md

@@ -0,0 +1,88 @@
+# hitl-cdp-browser-provider
+
+Bridges **any** Chrome DevTools Protocol (CDP) browser session into a plain
+HTTP page + WebSocket endpoint — the shape [HITL Broker](https://github.com/aqiu9/HITL-Broker)'s
+Browser Gateway (and similar systems) expect a task's `internal_url` to
+serve.
+
+Works with anything that exposes a CDP remote-debugging endpoint:
+[agent-browser](https://github.com/keithamus/agent-browser), Playwright,
+Puppeteer, or a plain `chrome --remote-debugging-port=...`. It talks CDP's
+own standard primitives (`Page.startScreencast`, `Input.dispatchMouseEvent`,
+`Input.dispatchKeyEvent`) — not any tool-specific protocol — so one bridge
+covers all of them. Functionally identical to the
+[Node package of the same name](https://github.com/aqiu9/HITL-Broker/tree/main/packages/node/hitl-cdp-browser-provider);
+pick whichever fits your automation stack (e.g. Playwright-Python/Selenium-Python
+users won't need Node at all).
+
+## Install
+
+```bash
+pip install hitl-cdp-browser-provider
+```
+
+## Use
+
+```bash
+# Point it at a CDP HTTP base -- it auto-picks the first "page" target
+hitl-cdp-browser-provider --cdp-http http://127.0.0.1:9222 --bind 0.0.0.0:18234
+
+# Or an exact page WebSocket URL if you already have one
+hitl-cdp-browser-provider --cdp-url ws://127.0.0.1:9222/devtools/page/ABC123 --bind 0.0.0.0:18234
+```
+
+Then point your HITL Source's `browser_endpoint` (or any equivalent
+"internal_url for browser tasks" field) at `<bind-host>:<bind-port>`.
+
+### Finding a CDP endpoint
+
+- **agent-browser**: `agent-browser get cdp-url --session <name>` gives a
+  `ws://127.0.0.1:<port>/devtools/browser/<id>` browser-level URL — pass its
+  `http://127.0.0.1:<port>` base as `--cdp-http` (screencast needs a page
+  target, which `--cdp-http` auto-discovers via `/json/list`).
+- **Chrome/Chromium directly**: launch with `--remote-debugging-port=9222`,
+  use `--cdp-http http://127.0.0.1:9222`.
+- **Playwright (Python)**: launch Chromium with
+  `args=["--remote-debugging-port=9222"]`, then point `--cdp-http` at that
+  port. (`browser.new_cdp_session(page)` also works if you'd rather wire
+  the CDP session up yourself instead of using this CLI.)
+- **Selenium (Python)**: Chrome launched with `--remote-debugging-port`
+  works the same way; Selenium 4's own `driver.execute_cdp_cmd` isn't
+  needed here since this bridge connects directly.
+
+## Library use
+
+```python
+import asyncio
+from hitl_cdp_browser_provider import serve
+
+asyncio.run(serve({
+    "cdp_http": "http://127.0.0.1:9222",
+    "cdp_url": None,
+    "bind": "0.0.0.0:18234",
+    "quality": 60,
+    "max_width": 1280,
+    "max_height": 800,
+}))
+```
+
+## Protocol
+
+The viewer page renders `{"t":"frame","data":"<base64 jpeg>"}` messages onto
+a `<canvas>` and sends back `{"t":"mouse",...}` / `{"t":"key",...}` messages,
+which this bridge translates 1:1 into `Input.dispatchMouseEvent` /
+`Input.dispatchKeyEvent` CDP calls.
+
+## Not CDP? Use noVNC instead
+
+If your browser session isn't driven by anything CDP-capable (or you want a
+screen-level rather than browser-API-level handoff — e.g. an arbitrary GUI
+app in a container, not just a browser), see the
+[noVNC recipe](https://github.com/aqiu9/HITL-Broker/blob/main/docs/browser-provider-novnc.md)
+in the HITL-Broker repo instead — noVNC + websockify already implements the
+same "HTTP page + WS" contract with zero custom code, at the cost of needing
+an X server (Xvfb) + VNC server in the container.
+
+## License
+
+MIT

hitl_cdp_browser_provider-0.1.0/pyproject.toml

@@ -0,0 +1,25 @@
+[build-system]
+requires = ["hatchling"]
+build-backend = "hatchling.build"
+
+[project]
+name = "hitl-cdp-browser-provider"
+version = "0.1.0"
+description = "Bridge any CDP-capable browser session (agent-browser, Playwright, Puppeteer, plain Chrome) into an HTTP+WebSocket endpoint for human-in-the-loop remote viewing/control, e.g. HITL Broker's Browser Gateway."
+readme = "README.md"
+requires-python = ">=3.9"
+license = { text = "MIT" }
+keywords = ["hitl", "cdp", "chrome-devtools-protocol", "browser-automation", "human-in-the-loop", "playwright", "puppeteer", "agent-browser"]
+dependencies = [
+    "websockets>=13,<14",
+]
+
+[project.scripts]
+hitl-cdp-browser-provider = "hitl_cdp_browser_provider.cli:main"
+
+[project.urls]
+Homepage = "https://github.com/aqiu9/HITL-Broker"
+Repository = "https://github.com/aqiu9/HITL-Broker"
+
+[tool.hatch.build.targets.wheel]
+packages = ["src/hitl_cdp_browser_provider"]

hitl_cdp_browser_provider-0.1.0/src/hitl_cdp_browser_provider/__init__.py

@@ -0,0 +1,5 @@
+from .bridge import resolve_cdp_ws_url, serve
+from .viewer import VIEWER_HTML
+
+__all__ = ["serve", "resolve_cdp_ws_url", "VIEWER_HTML"]
+__version__ = "0.1.0"

hitl_cdp_browser_provider-0.1.0/src/hitl_cdp_browser_provider/bridge.py

@@ -0,0 +1,236 @@
+"""Bridge a Chrome DevTools Protocol (CDP) browser session into a plain
+HTTP page + WebSocket endpoint.
+
+Talks CDP's own standard primitives (Page.startScreencast,
+Input.dispatchMouseEvent, Input.dispatchKeyEvent) -- not any
+automation-tool-specific protocol -- so this works against agent-browser,
+Playwright, Puppeteer, or a plain `chrome --remote-debugging-port=...`.
+Functionally identical to the Node implementation
+(`hitl-cdp-browser-provider` npm package); pick whichever language fits
+your automation stack.
+"""
+
+from __future__ import annotations
+
+import asyncio
+import json
+import urllib.error
+import urllib.request
+from typing import Any, Optional
+
+import websockets
+
+from .viewer import VIEWER_HTML
+
+_MOUSE_EVENT_TYPE_MAP = {
+    "down": "mousePressed",
+    "up": "mouseReleased",
+    "move": "mouseMoved",
+    "wheel": "mouseWheel",
+}
+
+
+async def resolve_cdp_ws_url(cdp_url: Optional[str], cdp_http: Optional[str]) -> str:
+    """Resolve a concrete CDP page WebSocket URL.
+
+    Accepts either an exact ws://.../devtools/page/<id> URL, or an http(s)
+    CDP base (e.g. http://127.0.0.1:9222) from which the first "page"
+    target is picked via the standard GET /json/list endpoint.
+    """
+    if cdp_url:
+        return cdp_url
+    assert cdp_http is not None
+    base = cdp_http.rstrip("/")
+    try:
+        with urllib.request.urlopen(f"{base}/json/list", timeout=5) as resp:
+            targets = json.loads(resp.read())
+    except urllib.error.URLError as exc:
+        raise RuntimeError(f"GET {base}/json/list failed: {exc}") from exc
+    page = next((t for t in targets if t.get("type") == "page"), None)
+    if page is None and targets:
+        page = targets[0]
+    if page is None or not page.get("webSocketDebuggerUrl"):
+        raise RuntimeError(f"No CDP page target found at {base}/json/list")
+    return page["webSocketDebuggerUrl"]
+
+
+class CdpSession:
+    """Thin JSON-RPC wrapper around a CDP WebSocket connection."""
+
+    def __init__(self, ws: Any, on_event) -> None:
+        self._ws = ws
+        self._on_event = on_event
+        self._next_id = 1
+        self._pending: dict[int, asyncio.Future] = {}
+        self._reader_task = asyncio.ensure_future(self._reader())
+
+    @classmethod
+    async def connect(cls, cdp_ws_url: str, on_event) -> "CdpSession":
+        ws = await websockets.connect(cdp_ws_url, max_size=None)
+        return cls(ws, on_event)
+
+    async def send(self, method: str, params: Optional[dict] = None) -> Any:
+        msg_id = self._next_id
+        self._next_id += 1
+        fut: asyncio.Future = asyncio.get_event_loop().create_future()
+        self._pending[msg_id] = fut
+        await self._ws.send(json.dumps({"id": msg_id, "method": method, "params": params or {}}))
+        return await fut
+
+    async def _reader(self) -> None:
+        try:
+            async for raw in self._ws:
+                msg = json.loads(raw)
+                if "id" in msg and msg["id"] in self._pending:
+                    fut = self._pending.pop(msg["id"])
+                    if fut.done():
+                        continue
+                    if "error" in msg:
+                        fut.set_exception(RuntimeError(msg["error"].get("message", "CDP error")))
+                    else:
+                        fut.set_result(msg.get("result"))
+                elif "method" in msg:
+                    self._on_event(msg["method"], msg.get("params") or {})
+        except websockets.ConnectionClosed:
+            pass
+        finally:
+            for fut in self._pending.values():
+                if not fut.done():
+                    fut.set_exception(RuntimeError("CDP connection closed"))
+            self._pending.clear()
+
+    async def close(self) -> None:
+        self._reader_task.cancel()
+        try:
+            await self._ws.close()
+        except Exception:
+            pass
+
+
+async def _handle_viewer(viewer_ws: Any, cdp_ws_url: str, opts: dict) -> None:
+    def on_event(method: str, params: dict) -> None:
+        if method != "Page.screencastFrame":
+            return
+        asyncio.ensure_future(_on_frame(params))
+
+    async def _on_frame(params: dict) -> None:
+        data = params.get("data")
+        session_id = params.get("sessionId")
+        try:
+            await viewer_ws.send(json.dumps({"t": "frame", "data": data}))
+        except Exception:
+            pass
+        try:
+            await cdp.send("Page.screencastFrameAck", {"sessionId": session_id})
+        except Exception:
+            pass
+
+    cdp = await CdpSession.connect(cdp_ws_url, on_event)
+
+    try:
+        await cdp.send("Page.enable")
+        # See the Node implementation's comment: Chrome only treats
+        # Input.dispatchMouseEvent as a trusted user gesture (able to
+        # trigger anchor navigation, focus changes, etc.) when the target
+        # tab/window is actually foregrounded at the OS level. A headed
+        # Chrome left in the background otherwise accepts every dispatch
+        # call with no error but silently drops the gesture.
+        try:
+            await cdp.send("Page.bringToFront")
+        except Exception:
+            pass
+        await cdp.send(
+            "Page.startScreencast",
+            {
+                "format": "jpeg",
+                "quality": opts["quality"],
+                "maxWidth": opts["max_width"],
+                "maxHeight": opts["max_height"],
+                "everyNthFrame": 1,
+            },
+        )
+        await viewer_ws.send(json.dumps({"t": "status", "state": "connected"}))
+    except Exception as exc:
+        try:
+            await viewer_ws.send(json.dumps({"t": "status", "state": "error", "message": str(exc)}))
+        except Exception:
+            pass
+        await cdp.close()
+        return
+
+    try:
+        async for raw in viewer_ws:
+            try:
+                msg = json.loads(raw)
+            except Exception:
+                continue
+            try:
+                if msg.get("t") == "mouse":
+                    cdp_type = _MOUSE_EVENT_TYPE_MAP.get(msg.get("event"))
+                    if not cdp_type:
+                        continue
+                    await cdp.send(
+                        "Input.dispatchMouseEvent",
+                        {
+                            "type": cdp_type,
+                            "x": msg.get("x", 0),
+                            "y": msg.get("y", 0),
+                            "button": msg.get("button", "none"),
+                            "clickCount": 1 if msg.get("event") in ("down", "up") else 0,
+                            "deltaX": msg.get("deltaX", 0),
+                            "deltaY": msg.get("deltaY", 0),
+                        },
+                    )
+                elif msg.get("t") == "key":
+                    cdp_type = "keyDown" if msg.get("event") == "down" else "keyUp"
+                    await cdp.send(
+                        "Input.dispatchKeyEvent",
+                        {
+                            "type": cdp_type,
+                            "key": msg.get("key"),
+                            "code": msg.get("code"),
+                            "text": msg.get("text") or None,
+                            "unmodifiedText": msg.get("text") or None,
+                        },
+                    )
+            except Exception:
+                pass  # best-effort input forwarding
+    except websockets.ConnectionClosed:
+        pass
+    finally:
+        try:
+            await cdp.send("Page.stopScreencast")
+        except Exception:
+            pass
+        await cdp.close()
+
+
+def _make_process_request(html_bytes: bytes):
+    async def process_request(path: str, request_headers):
+        upgrade = request_headers.get("Upgrade", "")
+        if upgrade.lower() != "websocket":
+            return (200, [("Content-Type", "text/html; charset=utf-8")], html_bytes)
+        return None
+
+    return process_request
+
+
+async def serve(opts: dict) -> None:
+    cdp_ws_url = await resolve_cdp_ws_url(opts.get("cdp_url"), opts.get("cdp_http"))
+    host, port_str = opts["bind"].split(":")
+    port = int(port_str)
+    html_bytes = VIEWER_HTML.encode("utf-8")
+
+    async def handler(websocket, *_path_arg):
+        # older/newer websockets versions differ on whether the handler
+        # receives a second positional `path` argument; accept both.
+        await _handle_viewer(websocket, cdp_ws_url, opts)
+
+    async with websockets.serve(
+        handler,
+        host,
+        port,
+        process_request=_make_process_request(html_bytes),
+    ):
+        print(f"hitl-cdp-browser-provider listening on http://{host}:{port} -> {cdp_ws_url}", flush=True)
+        await asyncio.Future()

hitl_cdp_browser_provider-0.1.0/src/hitl_cdp_browser_provider/cli.py

@@ -0,0 +1,48 @@
+import argparse
+import asyncio
+import sys
+
+from .bridge import serve
+
+
+def main() -> None:
+    parser = argparse.ArgumentParser(
+        prog="hitl-cdp-browser-provider",
+        description=(
+            "Bridge ANY Chrome DevTools Protocol (CDP) browser session -- agent-browser, "
+            "Playwright, Puppeteer, or a plain 'chrome --remote-debugging-port=...' -- into "
+            "a plain HTTP page + WebSocket endpoint (the shape HITL Broker's Browser Gateway, "
+            "or any similar system, expects)."
+        ),
+    )
+    group = parser.add_mutually_exclusive_group(required=True)
+    group.add_argument("--cdp-url", help="Exact CDP page WebSocket URL")
+    group.add_argument(
+        "--cdp-http",
+        help="CDP HTTP base (e.g. http://127.0.0.1:9222); auto-picks the first 'page' target via /json/list",
+    )
+    parser.add_argument("--bind", default="127.0.0.1:18234", help="host:port to listen on (default 127.0.0.1:18234)")
+    parser.add_argument("--quality", type=int, default=60, help="JPEG quality for the screencast (default 60)")
+    parser.add_argument("--max-width", type=int, default=1280, help="Screencast max width in px (default 1280)")
+    parser.add_argument("--max-height", type=int, default=800, help="Screencast max height in px (default 800)")
+    args = parser.parse_args()
+
+    opts = {
+        "cdp_url": args.cdp_url,
+        "cdp_http": args.cdp_http,
+        "bind": args.bind,
+        "quality": args.quality,
+        "max_width": args.max_width,
+        "max_height": args.max_height,
+    }
+    try:
+        asyncio.run(serve(opts))
+    except KeyboardInterrupt:
+        pass
+    except Exception as exc:  # pragma: no cover - top-level CLI error path
+        print(f"Failed to start bridge: {exc}", file=sys.stderr)
+        sys.exit(1)
+
+
+if __name__ == "__main__":
+    main()

hitl_cdp_browser_provider-0.1.0/src/hitl_cdp_browser_provider/viewer.py

@@ -0,0 +1,100 @@
+"""Self-contained viewer page served on any GET request.
+
+Renders CDP screencast frames on a <canvas> and forwards mouse/keyboard
+events back over the same-origin WebSocket. Identical wire protocol to the
+Node implementation (`hitl-cdp-browser-provider` npm package) -- both talk
+the same {"t": "frame"/"mouse"/"key", ...} JSON shape, so either bridge
+works with either viewer.
+
+No absolute-path assets (inline CSS/JS only) so this still works when
+served behind an arbitrary path prefix, e.g. HITL Broker's
+/browser/{token}/... proxy.
+"""
+
+VIEWER_HTML = """<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>HITL Browser Session</title>
+<style>
+  html,body{margin:0;height:100%;background:#111;overflow:hidden}
+  #c{display:block;width:100%;height:100%;object-fit:contain;cursor:crosshair;outline:none}
+  #status{position:fixed;top:8px;left:8px;color:#0f0;font:12px monospace;background:#000a;padding:4px 8px;border-radius:4px;pointer-events:none}
+</style>
+</head>
+<body>
+<div id="status">connecting…</div>
+<canvas id="c" tabindex="0"></canvas>
+<script>
+(function () {
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+  var status = document.getElementById('status');
+  var img = new Image();
+  var naturalW = 0, naturalH = 0;
+  var proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+  var ws = new WebSocket(proto + '//' + location.host + location.pathname);
+
+  img.onload = function () {
+    naturalW = img.naturalWidth;
+    naturalH = img.naturalHeight;
+    if (canvas.width !== naturalW || canvas.height !== naturalH) {
+      canvas.width = naturalW;
+      canvas.height = naturalH;
+    }
+    ctx.drawImage(img, 0, 0);
+  };
+
+  ws.onopen = function () { status.textContent = 'connected'; };
+  ws.onclose = function () { status.textContent = 'disconnected'; };
+  ws.onerror = function () { status.textContent = 'error'; };
+  ws.onmessage = function (ev) {
+    var msg;
+    try { msg = JSON.parse(ev.data); } catch (e) { return; }
+    if (msg.t === 'frame') {
+      img.src = 'data:image/jpeg;base64,' + msg.data;
+    } else if (msg.t === 'status') {
+      status.textContent = msg.message || msg.state;
+    }
+  };
+
+  function toBrowserCoords(clientX, clientY) {
+    var rect = canvas.getBoundingClientRect();
+    var scaleX = naturalW ? naturalW / rect.width : 1;
+    var scaleY = naturalH ? naturalH / rect.height : 1;
+    return { x: (clientX - rect.left) * scaleX, y: (clientY - rect.top) * scaleY };
+  }
+  function send(o) { if (ws.readyState === 1) ws.send(JSON.stringify(o)); }
+  function btnName(b) { return b === 2 ? 'right' : b === 1 ? 'middle' : 'left'; }
+
+  canvas.addEventListener('mousedown', function (e) {
+    var p = toBrowserCoords(e.clientX, e.clientY);
+    send({ t: 'mouse', event: 'down', x: p.x, y: p.y, button: btnName(e.button) });
+    canvas.focus();
+    e.preventDefault();
+  });
+  canvas.addEventListener('mouseup', function (e) {
+    var p = toBrowserCoords(e.clientX, e.clientY);
+    send({ t: 'mouse', event: 'up', x: p.x, y: p.y, button: btnName(e.button) });
+  });
+  canvas.addEventListener('mousemove', function (e) {
+    var p = toBrowserCoords(e.clientX, e.clientY);
+    send({ t: 'mouse', event: 'move', x: p.x, y: p.y, button: 'none' });
+  });
+  canvas.addEventListener('wheel', function (e) {
+    var p = toBrowserCoords(e.clientX, e.clientY);
+    send({ t: 'mouse', event: 'wheel', x: p.x, y: p.y, deltaX: e.deltaX, deltaY: e.deltaY });
+    e.preventDefault();
+  }, { passive: false });
+  canvas.addEventListener('keydown', function (e) {
+    send({ t: 'key', event: 'down', key: e.key, code: e.code, text: e.key.length === 1 ? e.key : '' });
+    e.preventDefault();
+  });
+  canvas.addEventListener('keyup', function (e) {
+    send({ t: 'key', event: 'up', key: e.key, code: e.code });
+    e.preventDefault();
+  });
+})();
+</script>
+</body>
+</html>"""