# Frontend Settings

## Overview

Customize how users interact with your streamed experience. The Frontend Settings panel allows you to fine-tune user input, UI elements, and interactivity options for your Unreal Engine application streamed through StreamPixel. This enables a tailored, user-friendly experience aligned with your application type—whether it's simulation, configurator, or multi-user exploration.

***

## What it does?

This module lets you control:

* Which input devices are supported (mouse, keyboard, touch, gamepad, XR)
* Which UI elements appear (volume button, fullscreen, resolution, etc.)
* How users interact with the stream (hover, fake touch, mic, etc.)

***

## **Why It Matters**

Enabling or disabling the right frontend options helps you:

* Deliver a streamlined and distraction-free user interface
* Prevent unintended inputs for kiosk or enterprise setups
* Allow or block advanced control types (e.g., XR, mic, gamepads)
* Customize interactivity per application type (e.g., touch-first vs. keyboard-first)

***

## Key Options & Features

| Setting                     | Description                                                                                                                                                                                                             |
| --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Show Fullscreen Button**  | Toggle visibility of the fullscreen control button in the stream UI.                                                                                                                                                    |
| **Show Volume Button**      | Toggle visibility of the volume  button in the stream UI.                                                                                                                                                               |
| **Show Info Button**        | Toggle Visibility of Info button which displays  stream diagnostic and metadata (FPS, resolution, etc.) for advanced users or debugging.                                                                                |
| **Mic Setting**             | Enable/disable microphone input. Needed only for voice-based interactions.                                                                                                                                              |
| **Mouse Input Setting**     | Toggles mouse input.                                                                                                                                                                                                    |
| **Keyboard Input Setting**  | Toggles keyboard input.                                                                                                                                                                                                 |
| **Touch Input Setting**     | Toggles touch input on devices.                                                                                                                                                                                         |
| **Fake Mouse Touch**        | Simulates mouse input via touch gestures — useful when your application is designed for desktop but accessed on touch devices. Enable this only if your application does not have native touch input logic implemented. |
| **Gamepad Input Setting**   | Enable if your experience supports gamepad controllers.                                                                                                                                                                 |
| **XR Input Setting**        | Enables XR-specific inputs (for WebXR integration). Keep disabled unless using VR/AR.                                                                                                                                   |
| **Hovering Mouse Setting**  | Allows cursor hovering behavior to trigger interactions                                                                                                                                                                 |
| **Show Resolution Setting** | Displays the resolution selector in the UI, allowing users to view and manually change the streaming resolution based on their preferences or network conditions.                                                       |

***

## How to Use

* Go to the Frontend Settings tab in your project dashboard.
* Toggle on/off the elements based on the needs of your experience.
* Click Save to apply changes. These settings update in real time.

***