Core Integration UI Patterns

Core Integration UI Patterns

When using CoreSetup, the Arcware WebSDK runs in a headless mode. This means the SDK does not provide any UI components such as:

• control buttons

• overlays

• status indicators

• queue screens

• AFK warnings

All UI must be implemented by the application.

This page provides reference patterns for the most important UI components that are typically implemented when building a Core integration.

The three areas that most Core integrations need to handle are:

1. Stream control UI

2. Queue management UI

3. AFK handling UI

These are the most essential interaction points when building a fully custom interface around the WebSDK.

---

Base Core Setup Example

Before building UI controls, initialize the SDK.

import { CoreSetup } from "@arcware-cloud/pixelstreaming-websdk/core";

const { PixelStreaming } = CoreSetup(
  {
    shareId: "<your-share-id>"
  },
  {
    initialSettings: {
      AutoConnect: true,
      AutoPlayVideo: true,
      StartVideoMuted: true
    }
  }
);

document
  .getElementById("video-container")
  .appendChild(PixelStreaming.rootElement);

---

1. Stream Control UI

The default UI integration normally provides buttons for:

• fullscreen

• audio toggle

• microphone toggle

• reconnect

• Unreal interaction buttons

When using CoreSetup, these must be implemented manually.

---

Example Control Panel

Example HTML:

<div id="controls">
  <button id="btn-fullscreen">Fullscreen</button>
  <button id="btn-audio">Toggle Audio</button>
  <button id="btn-mic">Toggle Mic</button>
  <button id="btn-reconnect">Reconnect</button>
</div>

Example implementation:

let audioEnabled = true;
let micEnabled = false;

document
  .getElementById("btn-fullscreen")
  .addEventListener("click", () => {
    PixelStreaming.rootElement.requestFullscreen();
  });

document
  .getElementById("btn-audio")
  .addEventListener("click", () => {
    audioEnabled = !audioEnabled;
    PixelStreaming.setAudioEnabled(audioEnabled);
  });

document
  .getElementById("btn-mic")
  .addEventListener("click", () => {
    micEnabled = !micEnabled;
    PixelStreaming.toggleMic(micEnabled, false);
  });

document
  .getElementById("btn-reconnect")
  .addEventListener("click", () => {
    PixelStreaming.reconnect();
  });

---

Sending Commands to Unreal Engine

Most custom UI interactions send commands to Unreal Engine.

Example:

document
  .getElementById("btn-action")
  .addEventListener("click", () => {
    PixelStreaming.emitUIInteraction({
      action: "OpenMenu"
    });
  });

Receiving responses:

PixelStreaming.applicationResponseHandler = (response) => {
  console.log("Unreal response:", response);
};

---

2. Queue Management UI

If all streaming instances are currently occupied, the user may enter the Arcware queue.

Without the default UI integration, Core applications must implement queue UI themselves.

---

Example Queue Overlay

HTML:

<div id="queue-overlay" style="display:none">
  <h2>Waiting for available stream</h2>
  <p id="queue-position"></p>
  <p id="queue-waited"></p>
</div>

---

Handling Queue Updates

PixelStreaming.queueHandler.add((message) => {
  const queue = message.queue;

  const overlay = document.getElementById("queue-overlay");

  overlay.style.display = "block";

  const index = queue.index ?? 0;
  const queueLength = queue.queueLength ?? 0;

  document.getElementById("queue-position").innerText =
    `Position in queue: ${index + 1} / ${queueLength}`;

  if (queue.waited !== undefined) {
    document.getElementById("queue-waited").innerText =
      `Already waited: ${queue.waited} ${queue.valueType}`;
  }
});

---

Hiding Queue Overlay When Stream Starts

PixelStreaming.videoInitializedHandler.add(() => {
  document.getElementById("queue-overlay").style.display = "none";
});

This ensures the queue UI disappears when the stream becomes available.

---

3. AFK Handling UI

Arcware streams may terminate sessions when users are inactive.

The backend detects inactivity and emits AFK events through Pixel Streaming.

Core integrations should react to these events to inform users and give them a chance to stay connected.

---

Example AFK Overlay

HTML:

<div id="afk-overlay" style="display:none">
  <h2>You are inactive</h2>
  <p id="afk-countdown"></p>
</div>

---

AFK Warning Activation

PixelStreaming.addEventListener("afkWarningActivate", () => {
  document.getElementById("afk-overlay").style.display = "block";
});

---

AFK Countdown Updates

PixelStreaming.addEventListener("afkWarningUpdate", (event) => {
  document.getElementById("afk-countdown").innerText =
    `Disconnecting in ${event.remainingTime}`;
});

---

AFK Warning Cancelled

PixelStreaming.addEventListener("afkWarningDeactivate", () => {
  document.getElementById("afk-overlay").style.display = "none";
});

---

AFK Timeout

PixelStreaming.addEventListener("afkTimedOut", () => {
  document.getElementById("afk-overlay").innerText =
    "Session ended due to inactivity.";
});

---

Optional: File Transfer Handling

Unreal Engine can send files to the browser.

Example use cases:

• screenshots

• exported assets

• generated reports

---

Automatic Download

PixelStreaming.fileTransferHandler.add(() => {
  PixelStreaming.fileDownload();
});

---

Fully Custom File Handling

PixelStreaming.fileTransferHandler.add(() => {
  const file = PixelStreaming.getIncomingFile();

  const blob = new Blob(file.data, {
    type: file.mimetype
  });

  console.log("Received file:", blob);
});

This allows applications to:

• preview files

• upload files to a server

• process them programmatically

---

Typical Core UI Structure

Most Core integrations implement at least the following components:

Component	Purpose
Stream container	Rendering the video stream
Control panel	Stream controls and commands
Queue overlay	Inform user when waiting for capacity
AFK overlay	Handle inactivity warnings
File handling	Optional asset downloads

---

Minimal Example Layout

<div id="video-container"></div>

<div id="controls"></div>

<div id="queue-overlay"></div>

<div id="afk-overlay"></div>

This structure gives applications full control over how the streaming interface behaves.

---

Summary

When using CoreSetup, developers must implement the UI components that the UI integration normally provides automatically.

The most important UI areas to handle are:

• stream controls

• queue handling

• AFK handling

Together with emitUIInteraction() and applicationResponseHandler, these components form the core interaction model for most headless integrations.