Hide / unhide touch controls

The Streampixel share page (share.streampixel.io, and any page that embeds it in an iframe) detects whether the viewer is on a touch device (phone or tablet) and sends a JSON message to your Unreal Engine app. Listen for that message to show or hide your touch controls. With the Web SDK, send it yourself (see Sending the message manually).

How it works

As soon as the video starts, on every connection and every reconnect, the share page sends this message to your app as a UI interaction (the same way emitUIInteraction sends JSON):

{ "type": "isTouchDevice", "value": true }

value is true for phone and tablet browsers (iPad included, also when Safari presents itself as a Mac) and false for desktops, touch-screen laptops included. Use it to toggle your in-game touch HUD. It is sent once per video start. It is not sent by guests in a shared (SFU) room, since one Unreal app serves everyone in the room.

Unreal blueprint setup

Bind to PixelStreamingInputComponent's OnInputEvent

On your PlayerController (or wherever your touch HUD lives), add a PixelStreamingInputComponent. Bind to its OnPixelStreamingInputEvent delegate.

Parse the JSON

The delegate hands you a Descriptor string. Use the JsonUtilities plugin or a parse node to extract type and value.

Branch on type

If type == "isTouchDevice", set a Boolean variable on your HUD (e.g. bShowTouchUI = value).

Bind your HUD widget visibility

Drive the widget’s Visibility property from bShowTouchUI. Touch viewers see the HUD; desktop viewers don’t.

See JSON message communication for the full blueprint walkthrough on parsing JSON messages from the frontend.

Sending the message manually

You can also force the touch HUD on or off from your own frontend code, regardless of device detection:

Web SDK
Iframe (postMessage)

import { StreamPixelApplication } from 'streampixelsdk';

const { appStream } = await StreamPixelApplication({
  appId: 'YOUR_PROJECT_ID',
  AutoConnect: true,
});

// Force-show the touch HUD
appStream.stream.emitUIInteraction({
  type: 'isTouchDevice',
  value: true,
});

const iframe = document.querySelector('iframe');

iframe.contentWindow.postMessage({
  command: 'sendUIInteraction',
  data: { type: 'isTouchDevice', value: true },
}, '*');

On the share page and in an iframe of it, the automatic message is sent first, when the video starts. Send your override after that (listen for loadingComplete in the iframe). The Web SDK sends no automatic message: send it yourself after the videoInitialized event.

Common pitfalls

HUD shows briefly on desktop before hiding

The message arrives when the video starts. Hide the HUD by default and show it only when the message arrives.

The app waits for the message forever

Never block your first HUD on the message: if nothing has arrived within about 3 seconds, show the desktop HUD, and switch whenever an isTouchDevice message arrives (it can arrive again after a reconnect).

HUD never appears on iPad

iPadOS Safari presents itself as a Mac; the share page detects it from its touch points and sends true. If your own page uses the Web SDK, detect it the same way (a Mac user agent with navigator.maxTouchPoints > 1).

Touch input doesn't reach UE

Make sure touchInput: true is set in your SDK config. See input controls.

Next steps

JSON messaging (UE side)

The full blueprint pattern for receiving JSON from the frontend.

Mobile streaming recipe

Optimize codecs, bitrate, and UI for mobile viewers.

Account

Project

Project settings

Built-in features

Cloud builds

Runtime Asset Storage

Unreal Engine extras

Hide / unhide touch controls

How it works

Unreal blueprint setup

Sending the message manually

Common pitfalls

Next steps

JSON messaging (UE side)

Mobile streaming recipe

​How it works

​Unreal blueprint setup

​Sending the message manually

​Common pitfalls

​Next steps

JSON messaging (UE side)

Mobile streaming recipe

How it works

Unreal blueprint setup

Sending the message manually

Common pitfalls

Next steps