Sincronitzacio multipantalla

XiboPlayer es l'unic reproductor de Xibo amb sincronitzacio entre dispositius. Multiples pantalles — a la mateixa maquina o a traves de la LAN — es mantenen perfectament sincronitzades: transicions de layout coordinades, inici sincronitzat de video i descobriment automatic de seguidors.

Dos modes de sincronitzacio

Mode mirall (per defecte)

Totes les pantalles mostren el mateix layout al mateix temps. El lider decideix quin layout mostrar i tots els seguidors carreguen el mateix contingut.

Cas d'us: multiples pantalles en un vestibul, botiga o aeroport — totes mostrant contingut identic amb transicions perfectament sincronitzades.

Lider mostra layout 42 ──→ Seguidor 1 mostra layout 42
                        ──→ Seguidor 2 mostra layout 42
                        ──→ Seguidor 3 mostra layout 42

Mode wall (amb layoutMap)

Cada pantalla mostra un layout diferent per posicio, pero les transicions son coordinades pel lider. Aixi es com es construeix un video wall on cada pantalla mostra una porcio d'una composicio mes gran.

Es dissenyen layouts individuals per a cada posicio de pantalla al CMS, i despres es mapegen a la configuracio del seguidor:

Lider mostra layout 42 ──→ Seguidor 1 mapeja 42 → 101 (dalt-dreta)
                        ──→ Seguidor 2 mapeja 42 → 102 (baix-esquerra)
                        ──→ Seguidor 3 mapeja 42 → 103 (baix-dreta)

config.json del seguidor (sync.layoutMap):

{
  "cmsUrl": "https://cms.example.com",
  "cmsKey": "laTevaCLau",
  "displayName": "vestibul-dalt-dreta",
  "sync": {
    "layoutMap": {
      "42": 101,
      "43": 105,
      "44": 109
    }
  }
}

Cada clau es l'ID del layout del lider, cada valor es l'ID del layout corresponent d'aquesta pantalla. Si un layout no esta al mapa, la pantalla fa fallback al mode mirall per a aquell layout.

Com configurar un video wall:

Al CMS, dissenyeu N layouts (un per posicio de pantalla) — p.ex., layout 42 (lider/dalt-esquerra), 101 (dalt-dreta), 102 (baix-esquerra), 103 (baix-dreta)
Programeu el layout 42 al lider — ell controla el temps
Programeu els layouts 101, 102, 103 als seguidors perque es descarreguin (o confieu en la programacio del lider per enviar-los via RequiredFiles)
Afegiu sync.layoutMap al config.json de cada seguidor
Totes les pantalles transicionen al mateix moment, cadascuna mostrant el contingut de la seva posicio

Com funciona

                    Reproductor lider (Pantalla 1)
                    ┌────────────────────────┐
                    │  SyncManager (lider)    │
                    │  ┌──────────────────┐   │
                    │  │  Servidor Proxy  │   │
                    │  │  ┌────────────┐  │   │
                    │  │  │ Sync Relay │  │   │
                    │  │  │  /sync WS  │  │   │
                    │  │  └─────┬──────┘  │   │
                    │  └────────┼──────────┘   │
                    └───────────┼──────────────┘
                                │
              ┌─────────────────┼─────────────────┐
              │ WebSocket       │ WebSocket        │ WebSocket
              ▼                 ▼                  ▼
    ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
    │  Seguidor 1     │ │  Seguidor 2     │ │  Seguidor 3     │
    │  (Pantalla 2)   │ │  (Pantalla 3)   │ │  (Pantalla 4)   │
    │  SyncManager    │ │  SyncManager    │ │  SyncManager    │
    └─────────────────┘ └─────────────────┘ └─────────────────┘

El reproductor lider orquestra les transicions de layout. El seu servidor proxy inclou un relay WebSocket integrat — els seguidors s'hi connecten per la LAN, sense infraestructura addicional.

Dues capes de transport

Transport	Abast	Cas d'us	Com
BroadcastChannel	Mateixa maquina	Multiples pestanyes o finestres en un dispositiu	API nativa del navegador, zero configuracio
Relay WebSocket	LAN entre dispositius	Dispositius separats a la mateixa xarxa	Es connecta al proxy del lider a `/sync`

El transport es selecciona automaticament segons la configuracio. Si relayUrl esta definit, s'utilitza WebSocket; en cas contrari, BroadcastChannel.

Aillament de grups

Quan multiples grups de pantalles comparteixen el mateix servidor relay, l'aillament de grups assegura que els missatges es mantenen dins del seu grup. Cada pantalla declara el seu grup de sincronitzacio en connectar-se, i el relay nomes reenvia als companys del mateix grup.

Servidor relay (port 9590)
├── Grup "vestibul"
│   ├── vestibul-lider (Pantalla 1)
│   ├── vestibul-esquerra (Pantalla 2)
│   └── vestibul-dreta (Pantalla 3)
│
└── Grup "cafeteria"
    ├── cafe-lider (Pantalla 4)
    └── cafe-dreta (Pantalla 5)

Un canvi de layout a vestibul-lider arriba a vestibul-esquerra i vestibul-dreta pero mai a cafe-lider ni cafe-dreta.

Compatible cap enrere: Les pantalles que no declaren un grup fan fallback al comportament de difusio a tothom.

Protocol de sincronitzacio

Lider                              Seguidor(s)
─────                              ──────────
layout-change(layoutId, showAt)  →  rep, carrega layout (o layout mapejat)
                                 ←  layout-ready(layoutId, displayId)
(espera que tots els seguidors estiguin llestos)
layout-show(layoutId)            →  mostra el layout simultaneament
video-start(layoutId, regionId)  →  despausa el video simultaneament

Heartbeat: cada 5s, cada node difon la seva presencia. El lider fa seguiment dels seguidors actius.
Deteccio d'inactivitat: si un seguidor no respon durant 15s, s'exclou de l'espera de preparacio.
Temps maxim d'espera: el lider espera fins a 10s pels seguidors, despres continua sense els que no responen.
Delegacio d'estadistiques: els seguidors envien les seves estadistiques/registres al lider, que els envia al CMS en nom seu.

Exemples de configuracio

Sincronitzacio a la mateixa maquina (dues pestanyes)

No cal configuracio especial. Obre el reproductor en dues pestanyes del navegador — BroadcastChannel gestiona la sincronitzacio automaticament. Les dues pestanyes mostren el mateix contingut (mode mirall).

Pantalles mirall entre dispositius (3 pantalles a la LAN)

Reproductor lider (config.json a 192.168.1.100):

{
  "cmsUrl": "https://cms.example.com",
  "cmsKey": "laTevaCLau",
  "displayName": "vestibul-lider",
  "serverPort": 8765
}

El grup de sincronitzacio del lider es configura des del CMS via RegisterDisplay. El servidor proxy a :8765/sync actua com a relay.

Seguidor 1 (config.json a 192.168.1.101):

{
  "cmsUrl": "https://cms.example.com",
  "cmsKey": "laTevaCLau",
  "displayName": "vestibul-esquerra"
}

Les tres pantalles mostren el mateix contingut amb transicions sincronitzades.

Video wall (graella 2x2, contingut per posicio)

Lider (dalt-esquerra) — configuracio normal, executa la programacio:

{
  "displayName": "wall-dalt-esquerra",
  "serverPort": 8765
}

Seguidor (dalt-dreta) — mapeja els layouts del lider a la seva posicio:

{
  "displayName": "wall-dalt-dreta",
  "sync": {
    "layoutMap": {
      "42": 101,
      "43": 105
    }
  }
}

Seguidor (baix-esquerra):

{
  "displayName": "wall-baix-esquerra",
  "sync": {
    "layoutMap": {
      "42": 102,
      "43": 106
    }
  }
}

Seguidor (baix-dreta):

{
  "displayName": "wall-baix-dreta",
  "sync": {
    "layoutMap": {
      "42": 103,
      "43": 107
    }
  }
}

Quan el lider transiciona del layout 42 al layout 43, les quatre pantalles transicionen simultaneament — cadascuna al seu layout especific de posicio.

Servidor relay independent

Per a desplegaments grans, executa un relay dedicat en lloc d'utilitzar el proxy del lider:

# Instal·lar
npm install @xiboplayer/proxy

# Executar relay independent
npx xiboplayer-relay --port=9590

O amb el paquet RPM:

xiboplayer-relay --port=9590

El relay es un hub WebSocket lleuger (~100 linies) sense cap dependencia del CMS. Gestiona l'aillament de grups, el monitoratge de heartbeats i la neteja de clients inactius.

Multiples grups de pantalles, un relay

Configureu les pantalles de cada grup amb el mateix syncGroup al CMS. El relay ailla els missatges per grup automaticament:

Grup "vestibul"   → syncGroup: "vestibul"   → relay a relay.lan:9590
Grup "cafeteria"  → syncGroup: "cafeteria"  → relay a relay.lan:9590

Funcionalitats

Mode mirall — totes les pantalles mostren el mateix layout (per defecte)
Mode wall — cada pantalla mostra un layout per posicio via layoutMap
Transicions de layout coordinades — totes les pantalles canvien de layout simultaneament
Inici sincronitzat de video — els videos es despausen al mateix moment en totes les pantalles
Descobriment automatic de seguidors — basat en heartbeats, sense registre manual
Delegacio d'estadistiques — els seguidors encaminen estadistiques/registres a traves del lider cap al CMS
Aillament de grups — multiples grups de pantalles comparteixen un relay sense interferencies
Reconnexio automatica — backoff exponencial (1s a 30s) amb re-unio automatica al grup
Degradacio graciosa — el lider continua despres del temps maxim si un seguidor no respon
Independent del transport — la mateixa API SyncManager per a BroadcastChannel i WebSocket

Comparacio amb altres reproductors

Funcionalitat	Windows v4	XLR	Arexibo	XiboPlayer
Sincronitzacio mateixa maquina	No	BroadcastChannel	No	BroadcastChannel
Sincronitzacio entre dispositius	No	No	No	Relay WebSocket
Mode mirall	No	Si (mateixa pestanya)	No	Si (mateixa maquina + LAN)
Mode wall (layoutMap)	No	No	No	Layouts per posicio
Aillament de grups	N/A	N/A	N/A	Encaminament per grup
Relay independent	N/A	N/A	N/A	CLI `xiboplayer-relay`
Delegacio d'estadistiques	No	Si (nomes BC)	No	Si (BC + WebSocket)
Reconnexio automatica	N/A	N/A	N/A	Backoff exponencial
Sincronitzacio inici video	No	No	No	Despausa coordinada

XiboPlayer es l'unic reproductor de Xibo que suporta sincronitzacio entre dispositius. L'XLR oficial utilitza BroadcastChannel per a pestanyes del mateix origen pero no te capacitat entre dispositius ni mode wall.

Arquitectura

El sistema de sincronitzacio es divideix entre dos paquets del SDK:

@xiboplayer/sync — SyncManager (logica de protocol), BroadcastChannelTransport, WebSocketTransport
@xiboplayer/proxy — attachSyncRelay() (relay del servidor), CLI xiboplayer-relay

La interficie de transport es connectable:

interface SyncTransport {
  send(msg: object): void;
  onMessage(callback: (msg: object) => void): void;
  close(): void;
  readonly connected: boolean;
}

Es poden injectar transports personalitzats (p.ex., WebRTC per a latencia ultra-baixa) via l'opcio transport del constructor.