Running Unreal Games in the Browser with Pixel Streaming

Enable the Pixel Streaming Plugin

Open your Unreal Engine project in the editor and navigate to Edit, then Plugins. In the search bar, type "Pixel Streaming" to find the available plugins. For UE 5.4 and later, you will see two options: the original Pixel Streaming plugin and Pixel Streaming 2. New projects should enable Pixel Streaming 2, which uses a refactored architecture with better modularity, improved WebRTC handling, and more extensible frontend integration.

Check the Enabled box next to your chosen plugin and click Restart Now when prompted. The editor will restart with the plugin loaded and ready for configuration.

If you are working with an older project that already uses the original Pixel Streaming plugin, it will continue to work. However, migrating to Pixel Streaming 2 is recommended for new deployments because Epic Games is concentrating development effort on the newer version.

Configure Your Project for Streaming

After enabling the plugin, open Project Settings and find the Pixel Streaming category. The key settings to configure are:

Streamer Resolution: Set the resolution at which the application renders and streams. 1920x1080 is the standard choice for desktop viewers, balancing quality and bandwidth. For applications targeting mobile devices primarily, 1280x720 reduces bandwidth requirements without noticeable quality loss on small screens.

Frame Rate: Set the target frame rate, typically 60fps for interactive applications and 30fps for visualization or exploration experiences where smooth animation is less critical. Higher frame rates consume more bandwidth and encoding resources.

Encoder Settings: Configure the video encoder bitrate range. A minimum of 5 Mbps and maximum of 20 Mbps works well for most applications. The encoder will adapt within this range based on scene complexity. Choose H.264 for maximum browser compatibility or H.265 for better quality at lower bitrates on supported browsers.

Input Configuration: Decide how browser input maps to Unreal input. The default configuration routes mouse and keyboard events directly to the application's input system. For touch-enabled applications, you may need to configure touch input mapping separately or handle it in the frontend JavaScript.

Also configure the WebRTC settings, including the signaling server URL, the ICE server list (for STUN and TURN servers), and the UDP port range for media transport. The default port range of 49152 to 65535 works in most environments but may need to be narrowed for restrictive firewall configurations.

Package the Application for Server Deployment

Packaging for pixel streaming follows the standard Unreal Engine packaging workflow with a few important considerations. Select your target platform: Windows for development and testing, Linux for production cloud deployment. Linux builds are preferred in production because they have lower overhead, better container support, and are compatible with all major cloud GPU instance types.

Use the Shipping build configuration for production deployments. Development builds include debugging features that consume additional resources. Ensure that the Pixel Streaming plugin is included in the package by verifying it is enabled in the plugin list before packaging.

For Linux packaging from a Windows development machine, you need the cross-compilation toolchain installed. Epic provides instructions for setting up the Linux cross-compilation environment in the Unreal documentation.

The packaged output includes the game executable, all content assets, and the engine runtime. The package size can be large (several gigabytes for content-heavy projects), but this only affects initial deployment to the server, not the end-user experience since users never download any assets.

Deploy the Signaling Server

The signaling server is the connection broker between browser clients and the Unreal application. It handles the WebRTC handshake, exchanging SDP offers and answers and ICE candidates between the two parties so they can establish a direct media connection.

Epic provides a reference signaling server written in Node.js as part of the Pixel Streaming Infrastructure plugin. To run it, install Node.js on your server, navigate to the signaling server directory in the plugin, install dependencies with npm, and start the server. By default, it listens on port 80 for HTTP (serving the frontend) and port 8888 for WebSocket connections (signaling protocol).

For production deployments, place the signaling server behind a reverse proxy like Nginx or a load balancer that handles TLS termination. WebRTC requires HTTPS in production browsers (except localhost), so you need a valid SSL certificate for your domain. The reverse proxy terminates TLS and forwards plain HTTP and WebSocket traffic to the signaling server.

Configure the signaling server to point at your running Unreal application instance. The signaling server and Unreal application communicate over a local WebSocket connection, so they typically run on the same machine or within the same network.

Serve the Frontend Client

The frontend is the web page that users load in their browser. It contains the HTML structure, a video element for displaying the stream, and JavaScript for managing the WebRTC connection and capturing user input.

Epic's reference frontend is functional but minimal. For production use, you will want to customize it extensively: add your application's branding, implement responsive design for different screen sizes, add loading screens and connection status indicators, handle disconnection and reconnection gracefully, and add any UI overlays your application needs.

The frontend JavaScript handles several critical tasks. It connects to the signaling server via WebSocket, negotiates the WebRTC peer connection, receives the video stream and attaches it to the video element, captures mouse, keyboard, touch, and gamepad events from the browser, serializes those events into the format the Unreal application expects, and sends them over the WebRTC data channel. The reference code provides all of this functionality, and you can extend it with custom input handling, analytics, or UI logic.

For touch-friendly applications, add on-screen controls (virtual joysticks, buttons) as HTML elements positioned over the video. These controls capture touch events and translate them into the keyboard or gamepad inputs your Unreal application expects.

Connect and Test from a Browser

With the Unreal application, signaling server, and frontend all running, open the frontend URL in a browser to test the stream. For local testing, this is typically http://localhost or http://your-server-ip. For production, use your domain name with HTTPS.

Verify these aspects of the streaming experience during testing: the video stream should display without corruption or excessive artifacts, input should feel responsive with no noticeable delay on a local network, audio should play clearly without stuttering, and the application should handle the browser tab being backgrounded and foregrounded without breaking the connection.

Use the browser's developer tools to inspect WebRTC statistics. The built-in WebRTC internals page (chrome://webrtc-internals in Chrome) shows detailed metrics including frame rate, bitrate, packet loss, jitter, and round-trip time. These metrics help identify bottlenecks in encoding, network, or decoding.

Test from multiple browsers (Chrome, Firefox, Safari, Edge) to verify compatibility. Test from mobile devices to verify touch input and adaptive quality. Test over a constrained network (use browser throttling or a network shaping tool) to verify how the experience degrades under poor conditions.