Unreal Web Remote Control (Optional)

Overview

Web Remote Control is an excellent way to control many parameters of Unreal Engine through a web browser.

This way you can give an iPad to a Gaffer and allow them to make changes to the Sun and Skylight, for example.

Web Control goes a lot deeper and there are many things to learn, this training will only talk about setting up Web Remote Control for use with Live FX, it will not teach you how to use Web Remote Control in depth.

This plugin makes it easy to control UE through a web browser, and is helpful for Virtual Production in general, but is not required for Live FX to work properly.

Not all parameters work when you package your project, even if they work in the editor. And not all parameters work when you use the -RenderOffscreen option.

Custom Blueprints with Construction scripts that control variables don't seem to work when packaging games.

For more information on Web Remote Control, visit the documentation: https://docs.unrealengine.com/5.3/en-US/remote-control-web-application-for-unreal-engine/

If WebRemote by any chance doesn't start, if UE says "Failed to build WebApp" error, this is what steps you need to do:

Navigate to WebApp folder in (your local installation path >UE_5.3/Engine/Plugins/VirtualProduction/RemotecontrolWebInterface/Webapp In WebApp folder, delete the Node-v16.17.0 (in my case what it was called) UE expects Node.js minimum version: 8. - maximum version: 14.15.5.

Start up UE, in your project double-click on your WebRemote Preset and UE should start building WebRemote dependencies.

1. Install Web Remote Control

1. Go to Plugins and search for Remote Control.

2. Enable the plugin, Remote Control API (built-in).

3. Enable the plugin, Remote Control Web Interface (built-in).

4. Restart Unreal Engine.

You must enable both plugins for it to work properly!

2. Set up Remote Control

1. Somewhere in your Content browser, right-click, go down to “Remote Control” and click on “Remote Control Preset”.

1. Drag the Remote Control Preset into the level.

   

This is important if you want to package your project later.

1. Double-click on the newly created Remote Control Preset. This opens a new window and now, an eyeball icon shows up next to any items that you can remotely control in the outliner. ℹ️ A closed eyeball icon means that this parameter is not exposed in your Web Remote Control. An open eyeball icon means that this parameter is exposed, and you can control it.

1. The Description name is what is visible, so make sure to rename this to something that will be obvious what it is like "Sun Rotation".

   
2. Click on an item you want to be able to control to see what you can control. For this example, let’s click on the Directional Light, and turn the Light Color and Intensity eyeballs on.

1. Now click on “Web App”

1. Choose whichever you want, I will use Build Your Own UI.

   
2. Toggle “Control” to “Design” and click on the “Properties” tab.

   
3. Click and Drag “Light Color” and “Intensity” to the middle of the right side of the screen to start building your UI.

   

3. Control Unreal Engine through Web Remote

1. Switch back to Control. You can now control the Light Color and Intensity of the Directional Light, from your web browser!

1. Open a browser. Type in 127.0.0.1:30000 Control through your browser!

If you want to control from a different device on the same network, enter the host's ip address:30000 into the browser. For example, it would look something like 192.168.1.23:30000 To find your computer's IP Address you can follow the steps here.

4. iPad or iPhone App (Optional)

If you have a compatible iPhone or iPad and are connected to the same network as your Unreal Engine machine, you can use the application from the App Store: https://apps.apple.com/us/app/unreal-remote-2/id1374517532

5. Copy Webapp into Executable

If you are planning on using the Remote Control with an executable, make sure to follow these steps at this link.