xiboplayerxiboplayer
CA

SDK Quick Start

Get the PWA player running in 5 minutes.

Prerequisites

  • Node.js 22+ and pnpm
  • Access to a Xibo CMS instance
  • CMS secret key (from CMS Settings → Display Settings)

Same-Origin Requirement

The PWA player must be served from the same domain as the Xibo CMS. All API calls go to the CMS origin, and browsers block cross-origin requests.

For local/kiosk use, use the Electron wrapper which handles CORS at the Chromium session level.

Build

# Clone the SDK monorepo
git clone https://github.com/xibo-players/xiboplayer.git
cd xiboplayer

# Install dependencies
pnpm install

# Build PWA for production
pnpm --filter @xiboplayer/pwa build    # Output → packages/pwa/dist/

Deploy to CMS

Copy dist/* to the CMS web/chromeos/ directory:

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

The CMS .htaccess rewrites /player/pwa/* → web/chromeos/*.

Access Player

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

Configure with:

  • CMS Address: https://your-cms.example.com (same domain)
  • CMS Key: Your CMS secret key
  • Display Name: Your display name

Authorize in CMS

  1. Open your CMS admin UI
  2. Go to Displays
  3. Find your display (status: Waiting)
  4. Authorize it
  5. Refresh the player page

The player starts downloading files and displaying layouts.

Alternative: Electron (for kiosk/desktop)

For deployments where same-origin hosting isn't available:

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

See Electron Player for details.

Troubleshooting

"Connection failed: NetworkError"

  • Verify the CMS address matches the domain the player is served from
  • Check browser console for CORS errors (means player is not same-origin)
  • Use Electron for cross-origin setups

"Display not authorized"

  • Go to CMS → Displays → Authorize your display
  • Refresh the player page

Layouts don't show

  • Check browser console for download errors
  • Verify schedule has active layouts assigned to the display

Next Steps