Aller au contenu
Guida

Remote View

Remote View est une fonctionnalité Remote Ops qui permet de voir un onglet de navigateur Guida depuis un autre client. Elle utilise le pont Chrome DevTools Protocol de WebView2 pour capturer les images de l’onglet et un flux WebSocket pour envoyer les images et les messages d’entrée.

Remote View est utile pour les tableaux de bord de navigateur, les interfaces de contrôle légères et les observateurs de réseau privé qui doivent voir ce qu’un nœud Guida fait sans être assis devant le bureau.

Prérequis

Section intitulée « Prérequis »
  • L’API Remote Ops doit être activée.
  • Le client doit pouvoir atteindre l’adresse et le port d’écoute de Remote Ops.
  • Les entrées ne sont acceptées que si la session est démarrée avec allowInput: true.

Guida n’authentifie pas les clients Remote View séparément de Remote Ops. Sécurisez le canal à l’extérieur de Guida.

Démarrer une session

Section intitulée « Démarrer une session »

Appelez browser.remoteView.start via 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
  }
}

Omettez tabId pour utiliser l’onglet de navigateur actif.

Le résultat inclut sessionId, tabId, webSocketUrl, frameFormat, inputEnabled, availableTransports, nodeId et nodeName.

Messages WebSocket

Section intitulée « Messages WebSocket »

Connectez-vous au webSocketUrl renvoyé.

Messages serveur vers client :

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

Les messages frame contiennent des données JPEG et les métadonnées du viewport, notamment les dimensions nécessaires pour convertir les coordonnées du pointeur client vers le viewport d’entrée de Guida.

Messages client vers serveur :

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

Correspondance des coordonnées

Section intitulée « Correspondance des coordonnées »

Le client doit convertir les coordonnées de l’image affichée vers les métadonnées de viewport envoyées avec chaque image. Ne supposez pas que la taille de l’élément image, les dimensions JPEG et le viewport d’entrée du navigateur sont identiques.

C’est particulièrement important lorsque :

  • le client ajuste l’image dans un panneau redimensionnable ;
  • Guida utilise un viewport adapté au bureau ;
  • Guida utilise un préréglage d’émulation mobile ou tablette ;
  • l’image diffusée inclut des décalages de navigateur ou de périphérique.

Gardez cette conversion dans un utilitaire côté client unique. Les entrées de pointeur doivent être envoyées dans l’espace de coordonnées d’entrée de Guida, pas en pixels CSS bruts de l’interface web environnante.

Entrée mobile et tactile

Section intitulée « Entrée mobile et tactile »

Lorsque l’onglet Guida utilise un préréglage mobile ou tablette, Guida active l’émulation d’appareil et tactile. Remote View transmet alors les entrées de type pointeur sous forme d’entrées tactiles CDP lorsque c’est approprié.

Les gestes de molette peuvent être traduits en gestes de défilement tactile pour les viewports mobiles. Les clients doivent continuer à envoyer les mêmes messages du protocole Remote View ; Guida décide comment les envoyer à CDP selon le mode de viewport actuel de l’onglet.

Indicateur d’onglet observé

Section intitulée « Indicateur d’onglet observé »

Pendant qu’une session Remote View est active, Guida affiche un indicateur dans l’application sur l’onglet observé pour que l’utilisateur local voie que l’onglet est consulté ou contrôlé.

Les sessions en lecture seule indiquent une consultation distante. Les sessions avec entrée activée indiquent un contrôle distant. L’indicateur fait partie du chrome de navigateur de Guida, pas du contenu arbitraire de la page, et il disparaît lorsque la session s’arrête.

Arrêter une session

Section intitulée « Arrêter une session »

Appelez browser.remoteView.stop :

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

Utilisez browser.remoteView.status pour inspecter les sessions actives.

Limite du transport

Section intitulée « Limite du transport »

Le premier transport est WebSocket parce qu’il est simple et fonctionne bien sur les réseaux privés comme NetBird. La commande Remote View et le protocole d’entrée sont volontairement séparés du transport, afin qu’un transport WebRTC ultérieur puisse réutiliser le même modèle de session.

Étapes suivantes

Section intitulée « Étapes suivantes »