Enabling On-Screen Touch Controllers for Mobile Browsers in Unreal Engine

PureWeb -

Overview

When streaming from Unreal (or Unity) on our platform detecting the type of device consuming the pixel stream needs to be done on the client side in the web browser.

  1. Detect the client device type using JavaScript.
  2. Send the device information to Unreal using the data channel.
  3. Process the received device information in Unreal and enable or disable the virtual joystick accordingly.
  4. Enable native touch events for a smoother experience on mobile devices.

Following these steps will help you enable the on-screen touch controllers for mobile browsers while keeping them disabled for desktop browsers.

Detecting the Client Device

The first step is to determine whether the client device is a mobile device or a desktop. You can achieve this using various methods in JavaScript. For instance, you can follow the approaches outlined in this Medium article. These methods generally involve checking the user agent string of the browser to identify the device type.

function isMobile() {
    return /Mobi|Android/i.test(navigator.userAgent);
}

Sending Device Information to the Unreal Application

Once you have the type of client device, you need to send this information to your Unreal application. This can be done using the data channel. Detailed instructions for this process are available in the PureWeb documentation here.

let deviceType = isMobile() ? 'mobile' : 'desktop';
dataChannel.send(JSON.stringify({ type: 'DeviceType', device: deviceType }));

Handling Device Information in Unreal

On the Unreal side, you need to process the received message and enable or disable the virtual joystick based on device type.

void AYourPlayerController::ProcessWebClientMessage(const FString& Message)
{
    TSharedPtr<FJsonObject> JsonObject;
    TSharedRef<TJsonReader<>> Reader = TJsonReaderFactory<>::Create(Message);

    if (FJsonSerializer::Deserialize(Reader, JsonObject))
    {
        FString MessageType = JsonObject->GetStringField("type");

        if (MessageType == "DeviceType")
        {
            FString DeviceType = JsonObject->GetStringField("device");

            if (DeviceType == "mobile")
            {
                // Enable virtual joystick
                bEnableVirtualJoystick = true;
                EnableNativeTouchEvents();
            }
            else
            {
                // Disable virtual joystick
                bEnableVirtualJoystick = false;
            }
        }
    }
}

Enabling Native Touch Events

When using the on-screen joystick for mobile devices, it's recommended to enable native touch events for smoother interactivity. You can enable native touch events in Unreal by setting the appropriate flags or configuration in your project settings.

void AYourPlayerController::EnableNativeTouchEvents()
{
    // Code to enable native touch events
}

By following the steps above, you can effectively enable on-screen touch controllers for mobile browsers while keeping them disabled for desktop browsers. This approach ensures that the user experience is optimized for each device type.