Pixel Streaming React

A React application that integrates with Unreal Engine's Pixel Streaming technology using React Router v7.

Overview

This project provides a React wrapper around Epic Games' Pixel Streaming library, allowing you to embed Unreal Engine content directly in your web application. The implementation uses React Router v7 for routing and Tailwind CSS for styling.

Features

• Seamless integration with Unreal Engine's Pixel Streaming
• React Router v7 for navigation and routing
• Tailwind CSS for styling
• TypeScript support
• Click-to-play overlay for user interaction
• Configurable streaming settings

Prerequisites

• Node.js (latest LTS version recommended - v22)
• An Unreal Engine Pixel Streaming server running (To be included in this repo)

Installation

Clone the repository and install dependencies:

git clone git@github.com:Schlomoh/pixel-streaming-react.git
cd pixel-streaming-react
npm install

Usage

1. Development Start the development server:

   npm run dev

   This will start the application at localhost:5173 by default.

2. Building for Production Build the application:

   npm run build

   Starting the Production Server

   npm run start

Configuration

The PixelStreamingWrapper component accepts configuration options through the initialSettings (See AllSettings) prop:

<PixelStreamingWrapper
  initialSettings={{
    KeyboardInput: true,
    MouseInput: true,
    AutoConnect: true,
    ss: "ws://localhost:80", // WebSocket URL to your Pixel Streaming server
    StartVideoMuted: true,
    WaitForStreamer: true,
  }}
/>

Project Structure

• app/ - Application source code
  • components/ - Reusable components
    • pixel-streaming-wrapper/ - Pixel Streaming integration
  • routes/ - Application routes
  • root.tsx - Root component and layout
  • public/ - Static assets

Dependencies

This project uses:

• @epicgames-ps/lib-pixelstreamingfrontend-ue5.6 - Epic Games' Pixel Streaming frontend library
• React Router v7 - For routing
• Tailwind CSS - For styling