Unreal Engine Pixel Streaming Setup: Bring Your Project to the Browser

What will you learn in this guide?

Unreal Engine Pixel Streaming streams an application's image and audio to a remote device while also allowing input from that device. This makes it possible to view an Unreal Engine project in a web page and interact with it using a keyboard, mouse, or touch input on a desktop or mobile device. No additional software needs to be installed on the browser side.

This guide covers preparing a project for streaming, running the server components, and connecting from a browser on the same local network. Epic Games' getting started guide uses Windows as its example and notes that the server scripts are located in a different folder on Linux and Mac.

Requirements and preparation

The Pixel Streaming plugin can encode video on computers running Windows, Linux, or Mac, with certain supported GPU hardware. The source guide refers readers to the Pixel Streaming Reference for details about compatible hardware types. Since it does not list specific GPU models here, check compatibility separately before streaming.

For a basic local network setup, ports 80 and 8888 need to be open for communication. If other web servers are running on the computer, the guide recommends stopping them before proceeding. Connecting over the internet or across different networks may require additional network configuration. For a first test, using localhost or 127.0.0.1 on the same computer is a simpler starting point.

The guide does not mention a user account requirement. The server infrastructure is obtained from Epic Games' Pixel Streaming Infrastructure repository on GitHub. The project should be run either as a packaged application or from Unreal Editor using the Standalone Game option; the plugin's use is explained with these two launch methods.

Setup: prepare the project and servers

1. Open the project in Unreal Editor. From the main menu, go to Edit > Plugins; under the Graphics category, enable the Pixel Streaming or Pixel Streaming 2 plugin and restart the project. If your project includes a character and needs mobile touch controls, you can use the Always Show Touch Interface option under Engine > Input in Edit > Project Settings. This setting is not required, and the character's Player Controller component must also support touch input.

2. Set the launch parameter for the project. From Edit > Editor Preferences..., go to the Level Editor > Play category and add the local connection address in the Additional Launch Parameters field:

-PixelStreamingURL=ws://127.0.0.1:8888

This parameter specifies the address the application will use to connect to the Pixel Streaming server. If you are packaging the project for Windows, go to Files > Package Project > Windows (64-bit) in the Unreal Editor menu and select the output folder. The application must receive the same parameter each time it launches. The guide also explains how to add the parameter to the Target field of a launch shortcut.

1. Get the Pixel Streaming server components. The guide says you can get the infrastructure directly from the GitHub repository or use the following command in your preferred terminal. Replace UEX.Y with the branch you want to use; the document gives 5.7 as an example.

git clone --branch UEX.Y https://github.com/EpicGamesExt/PixelStreamingInfrastructure.git

Alternatively, go to \Engine\Plugins\Media\PixelStreaming\Resources\WebServers in your Unreal Engine installation and run the get_ps_servers script with the .bat extension on Windows or .sh on Linux or Mac. This downloads the relevant infrastructure branch into the folder.

1. For the Windows example, run the setup script in the downloaded infrastructure's SignallingWebServer folder from PowerShell opened as an administrator:

SignallingWebServer\platform_scripts\cmd\setup.bat

Once setup is complete, run the server startup script in the same folder structure:

SignallingWebServer\platform_scripts\cmd\start_with_stun.bat

For Linux and Mac, the guide says to use the scripts in the SignallingWebServer\platform_scripts\bash folder. When the server is ready, the console should display listening messages for the streamer connection on port 8888, the player connection on port 80, and the HTTP service.

Launch the application and connect from a browser

With the servers running, launch the packaged application using the Pixel Streaming connection address parameter. Example command:

MyPixelStreamingApplication.exe -PixelStreamingURL=ws://127.0.0.1:8888

MyPixelStreamingApplication.exe is an example filename; use the name of your own packaged application. When the application connects to the server, you should see the Streamer connected message in the server console.

Open a supported browser on the same computer and go to http://127.0.0.1. Epic's guide lists Google Chrome and Mozilla Firefox as suitable options. Click the page, then press the play button to start the stream. The default player page can relay keyboard, mouse, and touch input to the Unreal Engine application.

To connect from another computer or mobile device on the same local network, enter the streaming computer's IP address in the browser. All connected devices will see the same view of the same scene in the Unreal Engine instance; by default, input from those devices is also sent to the same application. Connecting over the internet or from different subnets may require more advanced network configuration. The source guide mentions STUN/TURN server settings for these types of connections.

Common issues and where it fits in an architectural workflow

If the connection fails, first check that the server components are running, the application was launched with the correct PixelStreamingURL parameter, and ports 80 and 8888 are accessible. Another web server running on the same computer can also affect the initial setup. If the input stream stops when the application window is minimized, the guide notes that the -RenderOffScreen parameter lets the application run without a visible window.

In architecture, interior design, and archviz workflows, this setup can be useful for teams that want to show the same scene on multiple computers or mobile devices and deliver an interactive presentation through a browser. Rendering happens on the host computer where the application is running; connected devices receive the same view. This makes the host computer's GPU compatibility and network configuration important. The guide says settings such as resolution, screen size, IP addresses, and ports can be configured. The sources do not explain the product's licensing and pricing terms or its compatibility with any specific archviz software.

Next steps

Once basic streaming is working, the player web page can be customized for the project. It is also possible to validate users who send input or add HTML5 interface elements to the page. Epic provides a streaming optimization guide covering settings that balance quality, latency, and connection resilience. For requirements such as multiple servers, different clients, or serving users over the internet, consult the Hosting and Networking Guide.

If you plan to modify infrastructure files, the guide recommends editing the original installation location rather than the copy in the packaged folder. Changes to files in the packaged folder may be overwritten during the next packaging process. After completing the initial local network setup, review the project requirements and network settings you plan to use before moving on to more extensive connection scenarios.

Sources and license

This guide was adapted into Turkish based on information in Epic Games' Unreal Engine Pixel Streaming documentation and Pixel Streaming getting started guide. Both sources are provided under a free license.