@kodenique/game-sdk

React SDK for real-time game streaming with WebSocket updates and WebRTC video player.

Features

• 🎮 Real-time Game Updates - WebSocket integration with automatic reconnection
• 📹 WebRTC Video Streaming - Ultra-low latency WHEP protocol support
• 🎯 Winner Animations - Automatic full-screen animations when rounds finish
• 📊 Live Score Overlays - Beautiful score displays with team logos and colors
• 🌐 Network Monitoring - Real-time latency and bitrate tracking
• ⚡ Auto-Subscribe - Just pass a game object and SDK handles everything
• 🎨 Customizable UI - Show/hide overlays, custom titles, and styling
• 📱 Responsive - Works on desktop and mobile

Installation

npm install @kodenique/game-sdk
# or
yarn add @kodenique/game-sdk

Quick Start

import { GameProvider, GamePlayer } from '@kodenique/game-sdk';

function App() {
  return (
    <GameProvider
      access_token="your-access-token"
      socketToken="your-socket-token"
      environment="production"
    >
      <GamePlayer
        game={gameObject}
        showScoreOverlay={true}
        showWinnerAnimation={true}
        width="100%"
        height="600px"
      />
    </GameProvider>
  );
}

Props

GamePlayer

| Prop | Type | Default | Description | |------|------|---------|-------------| | game | Game | - | Game object (auto-subscribes to updates) | | gameId | string | - | Game ID (auto-subscribes to updates) | | streamUrl | string | - | Direct WHEP stream URL | | showScoreOverlay | boolean | true | Show score overlay | | showWinnerAnimation | boolean | true | Show winner animation when round finishes | | showNetworkIndicator | boolean | true | Show network quality indicator | | showGameTitle | boolean | true | Show game title | | showRound | boolean | true | Show round information | | gameTitle | string | - | Custom game title | | width | string | number | "100%" | Player width | | height | string | number | "600px" | Player height | | autoPlay | boolean | true | Auto-play video | | muted | boolean | true | Mute video by default | | controls | boolean | true | Show video controls |

Documentation

• API Documentation - Complete API reference
• Integration Guide - Implementation details

Features

Winner Animations

Automatically shows full-screen animations when rounds finish:

• Trophy icon for wins, handshake for draws
• Team color highlights
• Confetti animation
• Auto-dismisses after 5 seconds
• Can be disabled with showWinnerAnimation={false}

WebSocket Integration

Real-time updates via SocketCluster:

• Automatic decompression of messages
• Supports multiple message formats
• Auto-reconnection on disconnect
• Subscribes to 3 channels per game

Video Streaming

WebRTC with WHEP protocol:

• Ultra-low latency streaming
• Automatic quality detection
• Network stats monitoring
• Retry on connection failure

TypeScript

Fully typed with TypeScript. All interfaces and types are exported.

import type { Game, Team, Round, GamePlayerProps } from '@kodenique/game-sdk';

Examples

Disable Winner Animation

<GamePlayer
  game={game}
  showWinnerAnimation={false}  // Disable winner animation
/>

Custom Title

<GamePlayer
  game={game}
  gameTitle="Championship Finals"
  showGameTitle={true}
/>

Hide Score Overlay

<GamePlayer
  game={game}
  showScoreOverlay={false}  // Hide all overlays
/>

Manual WebSocket Control

import { useGameStream } from '@kodenique/game-sdk';

function CustomComponent() {
  const { game, isConnected, subscribe, unsubscribe } = useGameStream({
    gameId: 'game-123',
    autoSubscribe: true
  });

  return (
    <div>
      <p>Connected: {isConnected ? 'Yes' : 'No'}</p>
      <p>Round: {game?.rounds.length}</p>
    </div>
  );
}

Browser Support

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)
• Mobile browsers with WebRTC support

License

MIT

Support

For issues or questions, please open an issue on GitHub.