Example app walkthrough

Streampixel-SDK-Example/
├── public/
│   ├── index.html            # HTML entry point
│   ├── favicon.png
│   └── manifest.json         # PWA manifest
├── src/
│   ├── index.js              # React entry point
│   ├── index.css             # All styling (548 lines)
│   └── components/
│       └── App.js            # Main application component (706 lines)
├── config-overrides.js       # Webpack polyfills for the SDK
├── package.json
└── package-lock.json

const SHOW_DEV_TOOLS = true;  // Set to false to hide the Developer Tools panel

const LOADING_CONFIG = {
  backgroundColor: '#18181A',
  accentColor: '#4e9cff',
  logoUrl: null,                    // Path to a logo image
  title: 'Connecting to Stream',
  subtitle: 'Please wait while we set up your experience...',
  disconnectedSubtitle: 'The stream session has ended.',
  showSpinner: true,
  queueMessage: (position) => `You are in queue at position ${position}`,

  statusMessages: {
    initializing:     'Initializing...',
    connecting:       'Connecting to server...',
    webRtcConnecting: 'Establishing WebRTC connection...',
    sdpNegotiation:   'Negotiating stream parameters...',
    webRtcConnected:  'WebRTC connected, loading stream...',
    streamLoading:    'Stream is loading...',
    playingStream:    'Starting video playback...',
    inQueue:          'Waiting in queue...',
    failed:           'Connection failed. Please try again.',
    disconnected:     'Disconnected from stream.',
    reconnecting:     'Reconnecting to stream...',
    retrying:         'Retrying connection...',
    reconnected:      'Reconnected! Loading stream...',
    reconnectFailed:  'Unable to reconnect. Please refresh the page.',
  },

  reconnectingTitle:       'Reconnecting',
  reconnectingSubtitle:    'Please wait while we restore your session...',
  reconnectedTitle:        'Reconnected',
  reconnectFailedTitle:    'Reconnection Failed',
  reconnectFailedSubtitle: 'We were unable to restore your session.',
};

useEffect(() => {
  if (!projectId) return;

  const startPlay = async () => {
    const { appStream, pixelStreaming, queueHandler, UIControl, reconnectStream } =
      await StreamPixelApplication({
        appId: projectId,
        AutoConnect: true,
        streamerId,
        sfuHost,
        sfuPlayer,
        forceTurn: true,
      });

    // Store refs for use in event handlers
    pixelStreamingRef.current = pixelStreaming;
    appStreamRef.current = appStream;
    uiControlRef.current = UIControl;

    // ... register events ...
  };

  startPlay();
}, [projectId, streamerId, sfuHost, sfuPlayer]);

pixelStreaming.addEventListener('webRtcConnecting', () => {
  setLoadingStatus(LOADING_CONFIG.statusMessages.webRtcConnecting);
  setLoadingProgress(30);
});

// ... similar for each event ...

appStream.onVideoInitialized = () => {
  videoRef.current.append(appStream.rootElement);
  setLoadingProgress(100);
  setTimeout(() => setIsLoading(false), 300);
};

reconnectStream.on('state', (data) => {
  switch (data.status) {
    case 'reconnecting':
      setIsLoading(true);
      setLoadingTitle(LOADING_CONFIG.reconnectingTitle);
      break;
    case 'connected':
      setLoadingTitle(LOADING_CONFIG.reconnectedTitle);
      break;
    case 'failed':
      setLoadingTitle(LOADING_CONFIG.reconnectFailedTitle);
      break;
  }
});

pixelStreaming.addEventListener('afkWarningActivate', (e) => {
  setAfkWarning(true);
  setAfkCountdown(e.data.countDown);
  dismissAfkRef.current = e.data.dismissAfk;
});

pixelStreaming.addEventListener('afkWarningUpdate', (e) => {
  setAfkCountdown(e.data.countDown);
});

pixelStreaming.addEventListener('afkWarningDeactivate', () => {
  setAfkWarning(false);
});