Inici Ràpid del SDK

Posa en marxa el reproductor PWA en 5 minuts.

Prerequisits

  • Node.js 22+ i pnpm
  • Accés a una instància de Xibo
  • Clau secreta del CMS (des de Configuració del CMS → Configuració de Pantalla)

Requisit de Mateix Origen

El reproductor PWA s'ha de servir des del mateix domini que el Xibo. Totes les crides a l'API van a l'origen del CMS, i els navegadors bloquegen les peticions d'origen creuat.

Per a ús local/quiosc, utilitza l'Electron wrapper que gestiona CORS a nivell de sessió de Chromium.

Compilació

# Clone the PWA repo
git clone https://github.com/xibo-players/xiboplayer-pwa.git
cd xiboplayer-pwa

# Install dependencies
pnpm install

# Build for production
pnpm run build    # Output → dist/

Desplegament al CMS

Copia dist/* al directori web/chromeos/ del CMS:

podman cp dist/. xibo-cms-web:/var/www/cms/web/chromeos/

El .htaccess del CMS reescriu /player/pwa/*web/chromeos/*.

Accedir al Reproductor

Obre: https://your-cms.example.com/player/pwa/

Configura amb:

  • Adreça del CMS: https://your-cms.example.com (mateix domini)
  • Clau del CMS: La teva clau secreta del CMS
  • Nom de la Pantalla: El nom de la teva pantalla

Autoritzar al CMS

  1. Obre la interfície d'administració del CMS
  2. Ves a Pantalles
  3. Troba la teva pantalla (estat: En espera)
  4. Autoritza-la
  5. Actualitza la pàgina del reproductor

El reproductor començarà a descarregar fitxers i mostrar dissenys.

Alternativa: Electron (per a quiosc/escriptori)

Per a desplegaments on l'allotjament de mateix origen no és disponible:

sudo dnf install xiboplayer-electron
xiboplayer-electron --cms-url=https://your-cms.example.com --cms-key=KEY

Consulta Reproductor Electron per a més detalls.

Resolució de Problemes

"Connection failed: NetworkError"

  • Verifica que l'adreça del CMS coincideix amb el domini des d'on es serveix el reproductor
  • Comprova la consola del navegador per errors de CORS (significa que el reproductor no és del mateix origen)
  • Utilitza Electron per a configuracions d'origen creuat

"Display not authorized"

  • Ves a CMS → Pantalles → Autoritza la teva pantalla
  • Actualitza la pàgina del reproductor

Els dissenys no es mostren

  • Comprova la consola del navegador per errors de descàrrega
  • Verifica que la programació té dissenys actius assignats a la pantalla

Propers Passos