Remote View

Remote View è una funzionalità Remote Ops per visualizzare una scheda browser di Guida da un altro client. Usa il bridge Chrome DevTools Protocol di WebView2 per catturare i frame della scheda e uno stream WebSocket per inviare frame e messaggi di input.

Remote View è utile per dashboard browser, interfacce di controllo leggere e osservatori su rete privata che devono vedere cosa sta facendo un nodo Guida senza essere davanti al desktop.

Requisiti

• La Remote Ops API deve essere abilitata.
• Il client deve poter raggiungere indirizzo di bind e porta di Remote Ops.
• L’input viene accettato solo quando la sessione viene avviata con allowInput: true.

Guida non autentica i client Remote View separatamente da Remote Ops. Proteggi il canale con controlli esterni.

Avviare una sessione

Chiama browser.remoteView.start tramite 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
  }
}

Ometti tabId per usare la scheda browser attiva.

Il risultato include sessionId, tabId, webSocketUrl, frameFormat, inputEnabled, availableTransports, nodeId e nodeName.

Messaggi WebSocket

Collegati al webSocketUrl restituito.

I messaggi server-client includono:

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

I messaggi frame contengono dati JPEG e metadati del viewport, incluse le dimensioni necessarie per mappare le coordinate del puntatore dal client al viewport di input di Guida.

I messaggi client-server includono:

{ "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" }

Mappatura delle coordinate

Il client deve mappare le coordinate dell’immagine visualizzata sui metadati del viewport inviati con ogni frame. Non assumere che dimensione dell’elemento immagine, dimensioni JPEG e viewport di input del browser siano identici.

Questo è importante soprattutto quando:

• il client adatta il frame a un pannello ridimensionabile
• Guida usa un viewport desktop adattato al pannello
• Guida usa un preset mobile o tablet con emulazione dispositivo
• il frame trasmesso include offset del browser o del dispositivo

Mantieni questa mappatura in una sola utility lato client. L’input del puntatore va inviato nello spazio di coordinate di input di Guida, non nei pixel CSS grezzi dell’interfaccia web circostante.

Input mobile e touch

Quando la scheda Guida usa un preset mobile o tablet, Guida abilita emulazione dispositivo e touch. Remote View inoltra quindi l’input in stile puntatore come input touch CDP dove opportuno.

I gesti di rotella possono essere tradotti in gesti di scorrimento touch per viewport mobili. I client devono comunque inviare gli stessi messaggi del protocollo Remote View; Guida decide come inviarli a CDP in base alla modalità viewport corrente della scheda.

Indicatore sulla scheda osservata

Mentre una sessione Remote View è attiva, Guida mostra un indicatore nell’interfaccia della scheda osservata, così l’utente locale può vedere che la scheda è visualizzata o controllata da remoto.

Le sessioni in sola visualizzazione indicano la visualizzazione remota. Le sessioni con input abilitato indicano il controllo remoto. L’indicatore fa parte della chrome del browser di Guida, non è contenuto HTML arbitrario della pagina, e viene rimosso quando la sessione termina.

Fermare una sessione

Chiama browser.remoteView.stop:

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

Usa browser.remoteView.status per ispezionare le sessioni attive.

Confine del trasporto

Il primo trasporto è WebSocket perché è semplice e funziona bene su reti private come NetBird. Il comando Remote View e il protocollo di input sono separati dal trasporto, così un futuro trasporto WebRTC può riutilizzare lo stesso modello di sessione.

Passi successivi

• Remote Ops API - abilita la superficie di controllo e chiama metodi RPC
• Modalità di automazione - modalità di avvio per sistemi di test basati su CDP
• Browser e DOM - API viewport e input DOM