# Input Controls

The SDK captures browser input events and forwards them to the Unreal Engine application.

## Video Tutorial

{% embed url="<https://youtube.com/watch?v=aR49pH5gJUM>" %}
Toggle Mouse Visibility in Pixel Streaming
{% endembed %}

## Configuration

Enable or disable input types during initialization:

```javascript
await StreamPixelApplication({
  appId: 'your-project-id',
  mouseInput: true,
  keyBoardInput: true,
  touchInput: true,
  gamepadInput: true,
  xrInput: true,
  hoverMouse: true,
  fakeMouseWithTouches: false,
});
```

All input options default to their dashboard-configured values.

## Mouse Input

When `mouseInput` is enabled, the SDK captures mouse clicks, movement, and scroll events on the video element and sends them to UE.

### Hover Mouse Mode

When `hoverMouse` is enabled, mouse movement events are sent to UE even when the mouse button is not pressed. This is useful for hover effects, tooltips, and cursor-driven UI in the UE application.

Toggle at runtime:

```javascript
UIControl.toggleHoveringMouse(true);   // Enable hover events
UIControl.toggleHoveringMouse(false);  // Disable hover events
```

## Keyboard Input

When `keyBoardInput` is enabled, keypress and keydown events are forwarded to UE.

The SDK includes special handling for the **Backspace** key, which is explicitly sent via the `KeyPress` handler to ensure it works correctly across browsers.

### Active Key Release

The SDK automatically releases all active keys when:

* The browser tab loses focus (`blur` event)
* The page visibility changes (user switches to another tab)

This prevents keys from getting "stuck" in UE when the user switches away from the stream.

{% hint style="info" %}
You don't need to handle key release manually. The SDK automatically releases all held keys when the user switches tabs or the window loses focus, preventing "stuck key" issues in UE.
{% endhint %}

## Touch Input

When `touchInput` is enabled, touch events on the video element are sent to UE. This enables interaction with UE applications on mobile and tablet devices.

### Fake Mouse with Touches

Set `fakeMouseWithTouches: true` to convert touch events into mouse events. This is useful when the UE application only handles mouse input and you want it to work on touch devices.

{% hint style="warning" %}
Only enable `fakeMouseWithTouches` when your UE application does **not** handle touch input natively. If your app already processes touch events, enabling this will cause duplicate or conflicting input.
{% endhint %}

## Gamepad Input

When `gamepadInput` is enabled, the SDK detects connected gamepads/controllers and forwards their input to UE.

## WebXR Input

When `xrInput` is enabled, WebXR controller input (VR/AR headsets and controllers) is forwarded to UE.

## Text Input

UE can request text input from the user by sending a `showOnScreenKeyboard` command. The SDK responds by displaying a floating text input modal (EditTextModal). When the user submits text, it's sent back to UE via the `TextboxEntry` handler.

You can also send text programmatically:

```javascript
// Send text to UE's focused text field
pixelStreaming.streamMessageController
  .toStreamerHandlers.get('TextboxEntry')?.(['Hello from the web!']);
```