Ir al contenido
Guida

Remote View

Remote View es una función de Remote Ops para ver una pestaña de navegador de Guida desde otro cliente. Usa el puente Chrome DevTools Protocol de WebView2 para capturar frames de la pestaña y un flujo WebSocket para enviar frames y mensajes de entrada.

Remote View es útil para paneles de navegador, interfaces ligeras de control y observadores de red privada que necesitan ver qué hace un nodo Guida sin estar en el escritorio.

Requisitos

Sección titulada «Requisitos»
  • La API Remote Ops debe estar habilitada.
  • El cliente debe poder alcanzar la dirección de enlace y el puerto de Remote Ops.
  • La entrada solo se acepta cuando la sesión se inicia con allowInput: true.

Guida no autentica clientes Remote View por separado de Remote Ops. Proteja el canal externamente.

Iniciar una sesión

Sección titulada «Iniciar una sesión»

Llame a browser.remoteView.start mediante POST /api/ops/rpc.

{
  "jsonrpc": "2.0",
  "id": "view-1",
  "method": "browser.remoteView.start",
  "params": {
    "tabId": "optional-tab-id",
    "transport": "websocket",
    "allowInput": true,
    "quality": 75,
    "maxFps": 15
  }
}

Omita tabId para usar la pestaña activa del navegador.

El resultado incluye sessionId, tabId, webSocketUrl, frameFormat, inputEnabled, availableTransports, nodeId y nodeName.

Mensajes WebSocket

Sección titulada «Mensajes WebSocket»

Conéctese al webSocketUrl devuelto.

Los mensajes del servidor al cliente incluyen:

  • session.started
  • frame
  • error
  • pong
  • session.stopped

Los mensajes frame contienen datos JPEG y metadatos del viewport, incluidas las dimensiones necesarias para mapear las coordenadas del puntero del cliente al viewport de entrada de Guida.

Los mensajes del cliente al servidor incluyen:

{ "type": "ping" }
{ "type": "session.stop" }
{ "type": "input.pointer", "event": "down", "x": 120, "y": 80, "button": "left", "clickCount": 1 }
{ "type": "input.pointer", "event": "up", "x": 120, "y": 80, "button": "left", "clickCount": 1 }
{ "type": "input.wheel", "x": 120, "y": 80, "deltaX": 0, "deltaY": -240 }
{ "type": "input.key", "event": "down", "key": "Enter", "code": "Enter" }
{ "type": "input.text", "text": "hello" }

Mapeo de coordenadas

Sección titulada «Mapeo de coordenadas»

El cliente debe mapear las coordenadas de la imagen renderizada a los metadatos de viewport enviados con cada frame. No asuma que el tamaño del elemento de imagen, las dimensiones JPEG y el viewport de entrada del navegador son idénticos.

Esto importa especialmente cuando:

  • el cliente encaja el frame en un panel redimensionable
  • Guida usa un viewport ajustado al escritorio
  • Guida usa un preset de emulación móvil o tableta
  • el frame transmitido incluye desplazamientos de navegador/dispositivo

Mantenga este mapeo en una única utilidad del lado cliente. La entrada de puntero debe enviarse en el espacio de coordenadas de entrada de Guida, no en píxeles CSS brutos de la interfaz web envolvente.

Entrada móvil y táctil

Sección titulada «Entrada móvil y táctil»

Cuando la pestaña de Guida usa un preset móvil o tableta, Guida habilita emulación de dispositivo y táctil. Remote View reenvía entonces entrada de estilo puntero como entrada táctil CDP cuando corresponde.

Los gestos de rueda pueden traducirse a gestos de desplazamiento táctil para viewports móviles. Los clientes deben seguir enviando los mismos mensajes del protocolo Remote View; Guida decide cómo despacharlos a CDP según el modo de viewport actual de la pestaña.

Indicador de pestaña observada

Sección titulada «Indicador de pestaña observada»

Mientras una sesión Remote View está activa, Guida muestra un indicador dentro de la aplicación en la pestaña observada para que el usuario local pueda ver que la pestaña está siendo vista o controlada.

Las sesiones de solo vista indican visualización remota. Las sesiones con entrada habilitada indican control remoto. El indicador forma parte del chrome del navegador de Guida, no del contenido arbitrario de la página, y se retira cuando la sesión se detiene.

Detener una sesión

Sección titulada «Detener una sesión»

Llame a browser.remoteView.stop:

{
  "jsonrpc": "2.0",
  "id": "view-stop-1",
  "method": "browser.remoteView.stop",
  "params": {
    "sessionId": "remote-view-session-id",
    "reason": "operator closed viewer"
  }
}

Use browser.remoteView.status para inspeccionar sesiones activas.

Límite de transporte

Sección titulada «Límite de transporte»

El primer transporte es WebSocket porque es simple y funciona bien en redes privadas como NetBird. El comando Remote View y el protocolo de entrada están deliberadamente separados del transporte para que un futuro transporte WebRTC pueda reutilizar el mismo modelo de sesión.

Siguientes pasos

Sección titulada «Siguientes pasos»