PhantomStream.

Una réplica en vivo económica, exacta y direccionable

Cuando un agente de AI controla un navegador, la persona que lo supervisa necesita ver en directo lo que hace. PhantomStream transmite el propio DOM en lugar de píxeles. Captura la página una vez como una instantánea con estilos integrados, asigna identificadores estables en un WeakMap, luego observa la página con un MutationObserver y envía solo pequeños cambios (add, rm, attr, text) identificados por ID de nodo y agrupados al ritmo de renderizado de la propia página.

La ventaja es una réplica cuyo uso de ancho de banda depende de cuánto cambia realmente la página, no de la frecuencia de fotogramas. El texto se renderiza de forma nativa en cualquier resolución y el control remoto actúa sobre elementos reales mediante sus ID estables, en lugar de adivinar coordenadas.

El problema de los píxeles

Las herramientas más obvias para ofrecer una vista en directo recurren al vídeo. WebRTC, una transmisión de pantalla de CDP o una secuencia de capturas de pantalla envían píxeles. Transmitir píxeles requiere muchos recursos. Cada fotograma consume ancho de banda tanto si la página ha cambiado como si no; la codificación y decodificación añaden latencia, y el resultado tiene pérdidas y queda limitado por la resolución.

Peor aún, los píxeles son opacos. Quien supervisa no puede preguntar qué elemento está manipulando el agente, resaltar un nodo, anotar la vista ni controlar la página de forma fiable. El control remoto sobre un flujo de vídeo implica hacer clic en coordenadas de píxeles de un fotograma que quizá ya esté obsoleto; por eso, un clic desalineado termina en el elemento equivocado.

Por qué transmitir el DOM en lugar de vídeo

Transmitir un DOM estructurado en lugar de fotogramas cambia los costes y las capacidades de la réplica en todos los aspectos importantes para supervisar a un agente.

Un proceso de cuatro etapas

Se captura la página, el servidor encapsula cada mensaje para transportarlo, un relé distribuye los mensajes a los visores y el visor los reconstruye y aplica. El control remoto recorre el mismo camino en sentido inverso.

Mecanismos principales

Todo lo que incluye

El núcleo de captura es JavaScript puro que se inyecta como script de contenido, addInitScript o un marcador ejecutable, sin ningún paso de compilación en tiempo de ejecución. La captura, el visor y el relé se comunican mediante una pequeña interfaz de transporte.

El contrato de seguridad del contenido incrustado

Captura, réplica y relé

PhantomStream ofrece una subruta por etapa. Conecta una captura en el contexto de la página, un visor en el contexto remoto y un relé en Node para distribuir mensajes entre ellos.

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' // excluir tu propia UI
});

capture.start(); // tomar una sola instantánea y después transmitir las diferencias

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('el visor está', e.state));
// connecting | live | stale | disconnected

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

const relay = createRelay();   // límite de 1 MiB por mensaje; descarte ante contrapresión
const server = http.createServer();
createWebSocketRelayBackend({ server, relay, path: '/ws' });
server.listen(8787);

// los clientes se unen con ?room=<id>&role=source|viewer

Documentación

La documentación detallada se encuentra junto al código fuente. Cada documento es independiente.