PhantomStream.

Ein Live-Spiegel, der sparsam, exakt und adressierbar ist

Wenn ein AI-Agent einen Browser steuert, benötigt die beaufsichtigende Person eine Live-Ansicht dessen, was der Agent tut. PhantomStream streamt das DOM selbst statt Pixeln. Es erfasst die Seite einmal als Snapshot mit inline eingebetteten Stilen, weist in einer WeakMap stabile Kennungen zu, überwacht die Seite anschließend mit einem MutationObserver und sendet nur kleine Diffs (add, rm, attr, text) – nach Knoten-ID geordnet und im Zeichentakt der Seite gebündelt.

Das Ergebnis ist ein Spiegel, dessen Bandbreite den tatsächlichen Änderungen der Seite statt der Bildrate folgt. Text wird bei jeder Auflösung nativ dargestellt, und die Fernsteuerung spricht reale Elemente über ihre stabilen IDs an, statt Koordinaten zu erraten.

Das Problem mit Pixeln

Für eine Live-Ansicht liegen videobasierte Werkzeuge nahe. WebRTC, ein CDP-Screencast oder eine Folge von Bildschirmaufnahmen – sie alle übertragen Pixel. Pixel sind datenintensiv. Jedes Bild verbraucht Bandbreite, unabhängig davon, ob sich die Seite geändert hat. Kodierung und Dekodierung erhöhen die Latenz, und das Ergebnis ist verlustbehaftet und an eine Auflösung gebunden.

Schlimmer noch: Pixel sind undurchsichtig. Die überwachende Person kann weder ermitteln, welches Element der Agent berührt, noch einen Knoten hervorheben, die Ansicht kommentieren oder die Seite zuverlässig fernsteuern. Fernsteuerung über einen Videostream bedeutet, Pixelkoordinaten in einem möglicherweise bereits veralteten Bild anzuklicken – ein versetzter Klick landet daher am falschen Ziel.

Warum DOM-Streaming statt Video

Ein strukturiertes DOM statt einzelner Bilder zu streamen, verändert Wirtschaftlichkeit und Fähigkeiten des Spiegels in jeder Hinsicht, die für die Beaufsichtigung eines Agenten zählt.

Eine vierstufige Pipeline

Die Seite wird erfasst, das Hostsystem verpackt jede Nachricht für den Transport, ein Vermittlungsdienst verteilt Nachrichten an Ansichten, und die Ansicht baut sie neu auf und wendet sie an. Die Fernsteuerung durchläuft denselben Weg in umgekehrter Richtung.

Kernmechanismen

Was sofort verfügbar ist

Der Erfassungskern besteht aus reinem JavaScript und wird als Inhaltsskript, als addInitScript oder als Bookmarklet injiziert – ohne Buildschritt zur Laufzeit. Erfassung, Ansicht und Vermittlung kommunizieren über eine schlanke Transportschnittstelle.

Der Sicherheitsvertrag für die Einbettung

Erfassen, spiegeln, vermitteln

PhantomStream stellt für jede Stufe einen eigenen Unterpfad bereit. Verbinden Sie eine Erfassung im Seitenkontext, eine Ansicht im entfernten Kontext und einen Vermittlungsdienst unter Node, um Nachrichten zwischen ihnen zu verteilen.

import { createCapture } from '@full-self-browsing/phantom-stream/capture';
import { createWebSocketTransport } from '@full-self-browsing/phantom-stream/transport/websocket';

const transport = createWebSocketTransport({
  url: 'wss://relay.example.com/ws?room=ROOM&role=source',
  role: 'source'
});

const capture = createCapture({
  transport,
  skipElement: (el) => el.id === 'my-own-overlay' // eigene Benutzeroberfläche ausschließen
});

capture.start(); // einmal einen Snapshot erstellen, dann Diffs streamen

import { createViewer } from '@full-self-browsing/phantom-stream/renderer';
import { createWebSocketTransport } from '@full-self-browsing/phantom-stream/transport/websocket';

const transport = createWebSocketTransport({
  url: 'wss://relay.example.com/ws?room=ROOM&role=viewer',
  role: 'viewer'
});

const viewer = createViewer({
  container: document.getElementById('mirror'),
  transport
});

viewer.on('state', (e) => console.log('Viewer ist', e.state));
// connecting | live | stale | disconnected

import http from 'node:http';
import { createRelay, createWebSocketRelayBackend } from '@full-self-browsing/phantom-stream/relay';

const relay = createRelay();   // 1-MiB-Limit pro Nachricht, bei Backpressure verwerfen
const server = http.createServer();
createWebSocketRelayBackend({ server, relay, path: '/ws' });
server.listen(8787);

// Clients verbinden sich über ?room=<id>&role=source|viewer

Dokumentation

Die ausführlichere Darstellung befindet sich neben dem Quellcode. Jedes Dokument ist eigenständig.