Component Architecture

Comprehensive breakdown of Playcast's component architecture, including detailed specifications, interface definitions, dependency relationships, and inter-component communication patterns.

Core Components

🖥️

Host Frontend

Presentation Layer • React Application

Stable

Modern React-based frontend application providing the primary user interface for game streaming, real-time controls, and user interaction management.

📋 Specifications
  • Framework React 18.3.1
  • Language TypeScript
  • Styling Tailwind CSS
  • State Management React Context + Hooks
  • Build Tool Vite
🏷️ Technologies
React TypeScript Tailwind Clerk Auth Radix UI WebRTC
Interface Definitions ▼
IStreamManager.connect(config: StreamConfig)
Establishes WebRTC connection with signaling server
IInputHandler.sendInput(input: InputEvent)
Sends user input events through data channel
IAuthProvider.authenticate(credentials)
Handles user authentication via Clerk
⚡

Electron Host

Application Layer • Desktop Runtime

Stable

Cross-platform desktop application runtime providing system integration, native API access, and bridge between web frontend and system resources.

📋 Specifications
  • Runtime Electron 36.2.0
  • Node Version Node.js 20+
  • Architecture Multi-process
  • Communication IPC (Inter-Process)
  • Security Context Isolation
🏷️ Technologies
Electron Node.js IPC Native APIs File System
Interface Definitions ▼
IPCMain.handle('system-info')
Provides system information to renderer process
IPCMain.handle('launch-game', gameConfig)
Launches game processes with specified configuration
IPCMain.handle('file-dialog', options)
Opens native file selection dialogs
🔄

Realtime API

Service Layer • Java WebRTC Server

Stable

High-performance Java service handling WebRTC signaling, real-time communication protocols, and peer connection management for low-latency streaming.

📋 Specifications
  • Runtime Java 17+
  • Framework Spring Boot
  • Protocol WebRTC, WebSocket
  • Threading Multi-threaded
  • Memory Model Optimized GC
🏷️ Technologies
Java Spring Boot WebRTC WebSocket JSON
Interface Definitions ▼
SignalingServer.handleOffer(offer: RTCOffer)
Processes WebRTC offer and negotiates peer connection
ConnectionManager.createSession(userId, gameId)
Creates new streaming session with quality monitoring
QualityMonitor.adaptBitrate(connectionStats)
Adjusts streaming quality based on network conditions
🎮

Playjector Engine

System Layer • C++ Game Capture

Stable

Native C++ engine responsible for game process capture, hardware-accelerated video encoding, and virtual input device management for seamless gaming experiences.

📋 Specifications
  • Language C++ 17
  • Graphics API DirectX 11/12
  • Input System ViGEm Bus Driver
  • Encoding Hardware Accelerated
  • Memory Management Custom Allocators
🏷️ Technologies
C++ DirectX ViGEm NVAPI Win32 API
Interface Definitions ▼
ICaptureEngine.startCapture(processId, config)
Begins capturing specified game process with optimization settings
IInputInjector.injectInput(virtualDevice, inputData)
Injects user input through virtual controller or keyboard
IEncoder.encodeFrame(frameData, quality)
Encodes captured frames using hardware acceleration
🚀

Node Service

Service Layer • Backend API

Stable

RESTful API service providing business logic, user management, game catalog operations, and integration with external services and databases.

📋 Specifications
  • Runtime Node.js 20+
  • Framework Express.js
  • Database PostgreSQL
  • Cache Redis
  • Documentation Swagger/OpenAPI
🏷️ Technologies
Node.js Express PostgreSQL AWS SDK Swagger
Interface Definitions ▼
GET /api/games - getGameCatalog()
Returns available games with metadata and compatibility info
POST /api/sessions - createSession(gameId, userId)
Creates new gaming session with resource allocation
GET /api/users/{id}/profile - getUserProfile()
Retrieves user profile with gaming history and preferences
📊

Metrics Service

Service Layer • Analytics Pipeline

Beta

Analytics and monitoring service collecting performance metrics, user behavior data, and system health information for insights and optimization.

📋 Specifications
  • Runtime Node.js 20+
  • Telemetry OpenTelemetry
  • Storage BigQuery
  • Processing Stream + Batch
  • Visualization Custom Dashboards
🏷️ Technologies
OpenTelemetry BigQuery Cloud Functions Prometheus Grafana
Interface Definitions ▼
MetricsCollector.track(event, metadata)
Collects custom events with contextual metadata
PerformanceMonitor.recordLatency(operation, duration)
Records operation timing for performance analysis
AnalyticsAPI.query(sql, parameters)
Executes analytical queries against collected data

Component Dependencies

Host Frontend React • TypeScript Electron Host Node.js • IPC Realtime API Java • WebRTC Node Service Express • PostgreSQL Playjector C++ • DirectX Metrics Service Analytics • BigQuery IPC Communication Service Calls API Requests Game Control Metrics Collection

Component Lifecycle

1
Initialization Phase
Components bootstrap in dependency order: Node Service starts first, followed by Realtime API, then Electron Host loads and initializes the React Frontend with authentication.
2
Service Discovery
Components register with service registry, establish health checks, and verify connectivity. WebRTC signaling server begins listening for peer connections.
3
User Session Creation
User authentication triggers session creation, game selection, and resource allocation. Playjector engine initializes with target game configuration.
4
Streaming Establishment
WebRTC peer connection negotiation, media stream setup, and quality optimization. Game capture begins with hardware-accelerated encoding pipeline.
5
Active Streaming
Real-time game streaming with continuous quality monitoring, adaptive bitrate adjustment, and metrics collection for performance optimization.
6
Session Cleanup
Graceful session termination, resource deallocation, metrics finalization, and component state reset for next session.

Inter-Component Communication

🔗 Synchronous Communication
Direct API calls and function invocations for immediate responses and data retrieval where real-time interaction is required.
  • Frontend → Electron IPC calls
  • Node Service → Database queries
  • Realtime API → Connection management
  • Playjector → Game process API
⚡ Asynchronous Messaging
Event-driven communication using message queues and event emitters for decoupled, scalable component interactions.
  • WebRTC signaling events
  • Game state change notifications
  • User input event streams
  • System health monitoring
🌊 Real-time Streaming
Continuous data flow patterns for video streams, audio channels, and control inputs optimized for minimal latency.
  • WebRTC media stream transport
  • Game video frame pipeline
  • Input event data channels
  • Audio stream synchronization
🔄 Publish-Subscribe
Event broadcasting system allowing multiple components to react to state changes without tight coupling between publishers and subscribers.
  • Session lifecycle events
  • Quality metric updates
  • Error reporting system
  • Configuration changes
🎯 Request-Response
Traditional client-server communication pattern for API endpoints, data queries, and service integration points.
  • RESTful API endpoints
  • Authentication requests
  • Game catalog queries
  • User profile management
📊 Batch Processing
Periodic bulk data processing for analytics, logging, and maintenance operations that don't require real-time processing.
  • Analytics data aggregation
  • Performance report generation
  • Log file processing
  • Usage statistics compilation