# Arcware Cloud ### Overview Arcware Cloud is a platform designed to simplify the process of streaming Unreal Engine applications to any device, without requiring users to download or install any software. This is achieved through a technology called "pixel streaming," where the application runs on powerful servers in the cloud, and only the video and audio output is sent to the user's device.
* Core Benefits: * Reach a wider audience by streaming to any device with a web browser. * Reduce hardware requirements for end-users. * Enable interactive experiences without downloads or installations. * Scalable infrastructure to support many concurrent users. * Arcware keeps your 3D data secure, only video pixels are streamed. 100% data security guaranteed. * **Target Audience:** * For developers, artists and freelancers. * For agencies, startups and medium-sized companies. * For corporations and brands with a large audience. ### Start your free Trial now Follow the[ Getting Started ](/arcware-cloud-platform/getting-started-with-arcware-cloud)section to learn how to create an account and start streaming your Unreal Engine projects today :) ***
Create your first account/pages/xhjlLQSLECcmVopefKRs/files/JbfjUfbxXFMBZ5azZnEL
UE project settings/pages/WGjfwxZtM4Vuu3kaT2Qr/files/yMJ5qep92R3J791I8MZ2
Arcware UE game template/pages/R3g1jprA9kJwxDtNVS2V/files/bFBWFn2CJDTgD5wU2K2r
Custom web integration/pages/e9v4Rd63GB6YK6jiUdUU/files/nEQRAeHARuu09x6znrGm
### Useful links Arcware website : \ Discord community : \ Arcware game template link :
#### Unreal Engine Anywhere: Arcware Cloud Revolutionizes 3D Experiences | video overview {% embed url="" %} # Getting started with Arcware Cloud Let´s Go ## The following topics will get you set up and ready to stream on the Arcware Cloud platform.
Sign up and sign in/files/dafomu0WBGDW3y4nPD9p
Selecting a Plan & Creating your Tenant/files/9AdVBj4T0ONIIZ7pKQc0
Creating & Managing your projects/files/99swLHhU0YvAAPwElEUN
Sharing your project/files/dJkmkxBx2MtrMGONd44b
Upgrading your Plan/files/EhRMq0iL43KWL8VH9d3H
Tenant/files/uTNW3vuK5NEr6FEFKWRm
Products/files/F3HV8Miq003SUAzyqtQN
Help Center/files/OskxJQe9gJkzSg9bglEn
# Sign up and sign in Getting started with Arcware Cloud To get started on Arcware Cloud, you will first need to create an account. The registration page can be accessed via our [Website](https://www.arcware.com/) or [Platform](https://platform.arcware.cloud/) Proceed by clicking the Create Account link
Fill out the account details and click on **Register**
After clicking register a varification mail will be sent for verification.
Check for the varification mail and verify.
*** Congratulations you have created your first Account ! # Reset your password Sign up and sign in The below steps will show you how to reset your account password In the login page simply click on **Forgot Password**.
Submit your account Email.
You will see the message "**You should recieve an email shortly with further instructions**".
Check your emails for the mail sent from Arcware Cloud and click on the Link to reset credentials.
Enter your new password twice and Submit.
Password changed, you are good to go :) {% hint style="warning" %} To change the account login mail, please contact your account manager. {% endhint %} # Selecting a Plan & Creating your Tenant Getting started with Arcware Cloud After clicking the **Click to Verify** link on the verification mail, you will be directed and logged in to the Platform for the next step, which is selecting your Plan.\ \ We will continue by selecting the **Free** trial plan.
**Enter** the tenant name and click on **Create your tenant.**
Tenant ready!
You will also notice, that when you have created your Tenant, your Trial plan **Minutes Used** and **Expiration Date** insights will appear in the left corner on the Dashboard page.
*** Now that we have created our Tenant we can continue on the Project page and how to upload packages. # Creating & Managing your projects Getting started with Arcware Cloud Once you have set up your tenant, the initial project (**Project 1**) will be automatically created for you to use, feel free to click on the **project** to continue on the Projects page.
## Creating Projects You can create new projects in the 'Projects' tab. Simply click '**Create a new project**'.
Give it a name, click on Create project and you are good to go. :)
{% hint style="warning" %} You can create projects depending on the Plan you have subscribed for your Tenant.\ \- Trial and Lite plans: only 1 project is available.\ \- Core plan: you have 5 projects by default and can reach up to 15 by booking via the Marketplace\ \- Custom plan: can go up to 50 + {% endhint %} *** Now we can continue on the Project dashboard page. # Project Dashboard Creating & Managing your projects First things first, now that we know how to create projects we can delve deeper in the project dashboard.\ \ Simply click on a project to go to the project dashboard page.
On the project dashboard we have 3 sections. * **Quick access** * **Usage** * **Statistics** ## Quick access Here we have the quick access buttons for the Settings, Packages,Preview and Statistics page.
* [Settings](/arcware-cloud-platform/getting-started-with-arcware-cloud/creating-and-managing-your-projects/project-dashboard/project-settings) * [Packages](/arcware-cloud-platform/getting-started-with-arcware-cloud/creating-and-managing-your-projects/project-dashboard/uploading-and-releasing-packages) * [Preview](/arcware-cloud-platform/getting-started-with-arcware-cloud/creating-and-managing-your-projects/project-dashboard/preview-stream) * [Statistics](/arcware-cloud-platform/getting-started-with-arcware-cloud/creating-and-managing-your-projects/project-dashboard/statistics) ## Usage In the Usage section we can see the **Total run time** and **Average watch time** of the current and previous month.
{% hint style="warning" %} The current and previous months insights in the Usage section, are always from the start of a month to the end. \ \ **These periods are not synced with the usage of the actual billing cycle of your Tenant.** {% endhint %} *** Next we will cover the Statistics page in detail. # Project settings Creating & Managing your projects Browse to the project you want to edit in your project list and select it . In the project dashboard page you will find the button for "Settings", click it. In the settings, currently, you will find three tabs "**General**", "**Stream**" and ''**WebSDK**''
## General
1. **Enable / Disable** * Enables / disables your project from streaming. Turning it off will prevent the project from creating costs and from streaming. 2. **Project name** * A friendly name under which your project will be available. Setting up a proper name can be helpful in communication with Arcware support. 3. [**Streaming server location**](/arcware-cloud-platform/getting-started-with-arcware-cloud/creating-and-managing-your-projects/project-dashboard/project-settings/selecting-streaming-servers-eu-and-us) * Switch between EU (Munich) or US (LA) servers for streaming 4. **Display Resolution** * Maximum resolution being used by WebSDK player. By default, the resolution is set to FullHD (1080p). If you need higher resolutions please contact yor account manager. 5. **Dynamic Resolution** * This setting allows your Unreal application to adapt to any resolution or aspect ratio. Typically you will want this setting enabled, but you might have a project that requires a fixed aspect ratio instead. 6. **Hovering Mouse** * Disable this option if you want the mouse to be locked inside the stream window, and means you can not click frontend UI until you press escape. 7. **Remove ''Powered by Arcware'' Logo** * This option is not active on Trail and Lite plans, only on Core plans. It allows you to remove the ''Powered by Arcware'' logo from your stream. 8. Delete project 1. Delete a project permanently ## Stream
1. **Maximum streams** (concurrency) * This is the maximum number of concurrent streams that can run simultaneously for this project. If you have an allowance of concurrent streams provided by your subscription plan, then you can assign them here or distribute them evenly between all of your projects. 2. **Reconnection Threshold** * This is a threshold on how long an instance is kept alive to reconnect. E.g. on an unwanted refresh of the browser page with F5 or on short connectivity loss of your device, you will return to that same session within that time period. Please note, that this time is subject to streaming costs. 3. [**Maximum instance run-time** ](/arcware-cloud-platform/getting-started-with-arcware-cloud/creating-and-managing-your-projects/project-dashboard/project-settings/max-instance-run-time) * Maximum run-time of an instance in minutes. Starts counting, when first client connects. 4. **Starting grace period** * This is the time period in seconds, the system waits for the stream to connect to websocket, meaning it successfully started. Exceeding that time will cause the instance being terminated. 5. [**Queue**](/arcware-cloud-platform/getting-started-with-arcware-cloud/creating-and-managing-your-projects/project-dashboard/project-settings/queue) * This feature displays a queue position to users when when the maximum concurrency is reached. Additionally, the new WebSDK includes built-in queue management functionality. 6. [**Overwrite afk-module**](/arcware-cloud-platform/getting-started-with-arcware-cloud/creating-and-managing-your-projects/project-dashboard/project-settings/afk-module-user-inactivity) * The AFK module is used to automatically disconnect inactive streams. This will help you keep your streaming costs down, to avoid your stream being left open/running by inactive users. Enable this setting if you want to overwrite the standard 'Timeout' values used for the AFK module. 7. **Enable Timeouts** (Editing the timeout values is possible if the 'Overwrite afk-module' is enabled) * **AFK Timeout** - Seconds of inactivity until countdown is shown. * **Countdown** - Timer that gets shown as overlay to call for action after inactivity. If the timer expires without action the stream gets closedseconds that the user will see) ## WebSDK Settings ### **Override the WebSDK Initial settings**
**(**When set to 'Custom', you can then toggle the visibility of the buttons provided by the WebSDK.**)** * **Full-Screen Button** - Toggle visibility of full-screen button. * **Stop Button** - Toggle visibility of stop button, used to stop your stream. * **Audio Button** - Toggle visibility of audio button, used to mute your stream. * **Mic Button** - Toggle visibility of Mic button, used to give access to the microphone input. ### **Override the WebSDK Initial settings**
**(**When set to 'Custom', you can then toggle the inputs accepted by the WebSDK**)** * **Keyboard Input** - Toggle Keyboard Input. * **Mouse Input** - Toggle Mouse Input. * **Touch Input** - Toggle Touch Input. * **GamePad Input** - Toggle GamePad Input. * **XR Controller Input** - Toggle XR Controller Input and VR support. * **Fake Mouse With Touches** - Toggle setting for faking mouse input with touch inputs instead. ### [Styling Customization](/arcware-cloud-platform/getting-started-with-arcware-cloud/creating-and-managing-your-projects/project-dashboard/project-settings/frontend-buttons-positioning)
* Default vs. Custom Toggle By default, the interface uses our standard predefined values. To unlock manual control, switch the toggle from Default to Custom. * Buttons Position Select exactly where the control overlay should sit on the user's screen. Available options in the dropdown include: * Buttons Orientation Define the flow of the button group to match your menu style: * Reverse Order Enable this toggle to flip the sequence of the buttons. This is particularly useful for maintaining UI symmetry when moving the buttons from the left side of the screen to the right. *** Feel free to play around and find optimal settings for your projects. Next, we will go directly to the Share ID page, create some share links and share our projects with the world! # Selecting Streaming Servers EU & US Project settings ## Selecting Munich or Los Angeles servers To select your preferred streaming server region, navigate to Project Settings, choose your region, and click Save.
## Distribution phase After you select your preferred streaming location and save, the system immediately begins distributing your released package to that chosen location. This process can take up to 15 minutes, depending on the size of your package. While your package is in distribution, streaming will be temporarily unavailable. You'll see a "Currently in distribution" message displayed across your Project pages during this time.
The preview and streaming share links will also be inactive in the distribution phase.
{% hint style="info" %} **Important: Plan-Specific Region Limits**\ \ With our Trial, Lite, and Core plans, you can currently select only one streaming location per project. If your project requires multiple regions, please reach out to your account manager. We're actively developing an Enterprise Plan that will include multi-region support per project right out of the box, estimated for release in Q1 2026. {% endhint %} That was it for the streaming location options, enjoy :) # Max instance run-time Arcware Cloud user portal - Advanced Settings In the project settings there is the setting for '**maximum instance run-time'**. This is the maximum time you allow a single stream to run. It can be used to control session times of your users forcefully by limiting the run-time of an instance with this value, regardless of user inactivity. So even an active user will be kicked out of a session if this maximum time was reached.
# AFK Module - User inactivity Arcware Cloud user portal - Advanced Settings ## Description The AFK (away from keyboard) module is used for controlling the behaviour of user inactivity. It is located in Arcware's WebSDK Player and thus tracked and controlled in the browser. Nevertheless, there are three locations from where the WebSDK player can source the AFK settings. 1. Property settings directly in frontend 2. Project settings on platform 3. ShareID from platform If there are no settings in any of the three locations, then no user inactivity is tracked and if someone leaves the stream open in the browser it will continue running until it hits the limit of "**maximum instance run-time**". {% hint style="warning" %} Regardless of the settings of AFK module, if the "**maximum instance run-time**" kicks in, the session will be forcefully disconnected from the platform side. Please see the section on "maximum instance run-time" {% endhint %} ## Properties
* Overwrite afk-module (Only for options in project settings and ShareID) * Enable timeouts * **AFK Timeout** * **Countdown** The "overwrite afk-module" option governs if the settings made in either project settings or share ID should overwrite the settings made in frontend, regardless if they are event present there or not. Whereas the ShareID would on top overwrite the values set in project settings. {% hint style="info" %} **Priority =>** ShareID Settings -> Project Settings -> Frontend Settings if none are present, no user inactivity is tracked {% endhint %} The "Enable timeouts" will tell the frontend module if user inactivity should be tracked or not. This way one can forcefully disable / enable tracking of user inactivity on frontend, regardless of all the settings made there. If "Enable timeouts" is set to true, then frontend will track user inactivity in two stages: AFK timeout and Countdown. **Enable Timeouts** (Editing the timeout values is possible if the 'Overwrite afk-module' is enabled) * **AFK Timeout** - Seconds of inactivity until countdown is shown. * **Countdown** - Timer that gets shown as overlay to call for action after inactivity. If the timer expires without action the stream gets closedseconds that the user will see) The total time from the last user action to session closure is the sum of both AFK timeout and Countdown, measured in seconds. ## Defaults When working with the WebSDK, no defaults are set for the AFK module. The frontend developer is responsible on their own to set up values. When previewing the project via the Arcware platform or with a ShareID link, if no custom AFK values are set, then the defaults AFK values are imposed by Arcware. The AFK module is active with following default values: * AFK Timeout: 600 * Countdown: 10 {% hint style="info" %} Recommendation: Enable the AFK-module in project settings and control the behaviour for user inactivity in accordance with your needs. {% endhint %} Default Arcware Cloud AFK window inactivity is detected. Can be customized using the WebSDK for custom integration.
# Queue Project settings This feature displays a queue position and an estimated waiting time to users when hosted on Arcware Cloud. For developers creating a custom frontend using the WebRTC, queue events need to be implemented individually. Additionally, the new WebSDK includes built-in queue management functionality. ## Enabling the Queue The Queue setting is disabled by default, you can enable it by switching the toggle to on.

Queue option

## Default Queue window The usesrs being queued will see their position in the queue, as shown below.

Default Queue window

{% hint style="info" %} By default the platform will show the default **Queue Window** on Preview and Share links. {% endhint %} ## Customizing the queue window To customise the design to your needs, you have to use the WebSDK.\ For more details about the WebSDK queue handler, check out this section : [Events handlers](/web-integration/new-websdk/in-depth/events-handlers) *** That was all about the Queue feature, have fun utilizing it :) ## YouTube explanatory video | Queueing {% embed url="" %} # Frontend Buttons Positioning As part of our commitment to full interface flexibility, we have introduced Frontend Buttons Positioning. This feature allows you to customize the placement and layout of the default control buttons (such as the Info, Fullscreen, Audio, Mic toggles), ensuring they don't interfere with your application's unique UI design. ### Styling Customization You can find the settings under **Project Settings\ WebSDK** tab by scrolling to the Styling Customization section.
1. **Default vs. Custom Toggle.** By default, the interface uses our standard predefined values. To unlock manual control, switch the toggle from Default to Custom. {% hint style="info" %} \[!NOTE] Switching back to 'Default' at any time will instantly revert the buttons to their original factory positions. {% endhint %} 2. **Buttons Position Select exactly where the control overlay should sit on the user's screen. Available options in the dropdown include:** 1. Bottom-Right (Default) 2. Bottom-Left 3. Top-Left 4. Top-Right 3. **Buttons Orientation Define the flow of the button group to match your menu style:** * Horizontal: Buttons are placed side-by-side. * Vertical: Buttons are stacked on top of one another. (Default)
4. **Reverse Order Enable this toggle to flip the sequence of the buttons.** This is particularly useful for maintaining UI symmetry when moving the buttons from the left side of the screen to the right. *** ### Use Case Example If your Unreal Engine project features a custom navigation menu at the top of the screen, you can use these settings to move the Arcware system buttons to the Bottom-Right and set them to Vertical orientation. This prevents UI overlapping and provides a cleaner, more integrated look for your end-users. # Uploading and releasing packages Creating & Managing your projects The very first step to activate a project for streaming is to upload and release an Unreal Engine packaged app! To do so, you have to navigate to the Packages page.
{% hint style="info" %} Arcware Cloud offers robust support for a broad spectrum of Unreal Engine versions, more details you can find [**Unreal Engine Version Support**](/unreal-engine-setup/unreal-engine-version-support) page. {% endhint %} ## Uploading packages After preparing the package by [enabling the Pixel Streaming plugin](/unreal-engine-setup/set-up-pixel-streaming-in-your-own-project/core-settings/pixel-streaming-plugin), you can start the uploading process. 1. **Drag + drop or browse**\ Once inside the '**Packages**' section, Drag and drop your **zipped** package into the upload box (manual browsing to your package is also possible). The upload will start immediately. 2. **Auto-release**\ This option enables uploaded packages to be automatically released after a successful upload.ion enables the uploaded packages to automaticaly being released after a succesfull upload. 3. **Upload servers** **Thor & Loki**\ This option allows you to choose between two different locations to upload your packages.\ \- Thor (EU)\ \- Loki (USA)
Now that you know the basics, start by uploading your first project.\ Simply drag and drop your zipped package in the **Drag + drop or browse** section for the upload to start. {% hint style="info" %} If you don't yet have an Unreal Engine project, but you would like to test the upload process, our game tamplate is provided here : {% endhint %}

Drag and drop the package

Uploading in progress!

Upload progress

{% hint style="warning" %} Important notice \ Refreshing or leaving the Packages page will interupt the upload. Arcware Cloud has a resume upload function in place to resume the upload from where it stopped. How to [Resume Upload](/arcware-cloud-platform/getting-started-with-arcware-cloud/creating-and-managing-your-projects/project-dashboard/uploading-and-releasing-packages/resume-package-upload) {% endhint %} After the upload is finished the package will pass through the Virus Scanner and the Gauging phase. 1. **Virus Scanner** \ \- In this phase the application will be unzipped and scanned for threats. 2. **Gauging**\ \- Here the system checks if the pixel streaming plugin is enabled and if the package is starting properly without any issues.

Upload pipeline

## Releasing packages After the package has succesfully passed through the upload pipeline, we can click the release button with the Rocket symbol.

Release button

{% hint style="info" %} Note: The default platform behavior is that the package is not released automatically, however, there is a toggle to 'Auto-Release' your package once the upload is finished.
**When you release the package it will stop all current running connections to your stream, thus, you should plan when to do new releases in order not to disrupt your stream users. The disruption time depends on the package size and only the Release phase will have downtime.** {% endhint %} After pressing the release button, it will still take some time to download your package to our system and staged for distribution. It depends on the package size.\ The Arcware Cloud template project with 500MB, takes around 5 mins to be released.

Confirm release

## Enabling projects Now that we have uploaded your first package to your project, you will be able to **'Enable'** your project, to allow it to be streamed.

Enable project button

After enabling the project the released project will start the rolling out phase, in this step the package is being distributed to the GPU servers for streaming.

Rolling out

Lastly, when the upload status is in Active state, you are ready to stream the project

Upload status - Active

## Upload Cleanup Rules ! **Upload Cleanup Rules (Automatic Deletion Policy)** To keep storage clean and predictable, old uploads are automatically deleted based on these simple rules: **Released uploads are never deleted.**\ Any upload that’s currently marked as Released is permanently kept, even if the tenant is unsubscribed or the project is disabled.\ *You can always return to us and enable your project(s) and continue streaming with your latest released package(s).* **Keep the most recent uploads.**\ For each project, the system keeps up to **5 of the most recent uploads** (based on their Last Update time) - including the released package. **Delete uploads older than 90 days.**\ Regardless of how many uploads a project has, anything older than 90 days is automatically marked for deletion, except released uploads, which are always kept. **Keep a few recent failed uploads.**\ The system keeps up to 3 failed uploads from the last 7 days. These are kept in addition to the uploads mentioned above, so you can review recent failures and for debugging. > ⚠️ Important:\ If a **project** is deleted by the client, all uploads belonging to that project are permanently removed immediately.\ This is handled by a separate deletion process and is not part of the regular cleanup cycle. *** You nailed it! Next we will cover the Resume package upload feature. # Resume package upload Uploading and releasing packages As we mentioned in the uploading section, uploads can be interrupted for various reasons.\ In this case, the package resume function allows you to continue the upload from where it left off. ## Resuming package uplaod After an interruption you will see the message "**We have detected that a previous upload was in progress.**" and the option to **Resume upload**.

Resume Upload

After clicking the Resume upload you can simply continue the upload by browsing to the project you want to resume or by drag and drop. \ Keep in mind that you have to resume the same interrupted package!
This option can be a time saver especially in case with 10GB+ projects.\ Use it wisely :) # Preview stream Creating & Managing your projects Now is the time to preview our stream before sharing it with the world. Preview your project Congratulations. After uploading and releasing your package, you're now ready to stream. \ There is always the possibility to **preview** your stream on the **Preview** page. You will be able to see the stream preview, as long as you are logged in and authorized on the platform.
## Preview Starting the preview will spin up an instance of the application and start streaming.\ By default Arcware Cloud provides a branded loading overlay, this can be of course rebranded using the WebSDK for custom frontend integration.

Loading overlay

The preview will show you the stream with almost all availabe buttons\functions being enabled by default and **only for the Preview page**. * Disconnect Stream * Mic input On\Off toggle * Audio Mute\Unmute toggle * Info button * Settings button * Fullscreen button
{% hint style="info" %} Showing or hiding the functions for the preview, can be overriden via the WebSDK settings page, which you will dicover later on your journey. {% endhint %} ## Measuring the latency By clicking the info button, we can run a latency test. \ Sometimes it is an important insight knowing that information and understanding the impact on the streaming quality.
## In preview settings And the final topic on the Preview page we will cover is the settings function.\ Here you will have exposed all the settings and features to play around and test :)
{% hint style="info" %} Keep in mind, these settings will be applied in your current preview session only. {% endhint %} Next, we are going to deep dive into the project settings ! # Statistics Project Dashboard Let´s deep dive in the Statistics section. ## Statistics interval filter You will have the option to filter Date and Time intervals to select a time range.

Statistics interval

{% hint style="warning" %} The statistics section is saving the last 30 days of monitoring data for you to explore.\ \ For longer periods of analytics feel free to contact your account manager. {% endhint %} ## Time until ready This metrics show the unreal application starting time in seconds.\ The starting time metric, can help on optimizing the starting time of your projects.
## Connections The Connections metrics show the ammount of streaming connection a project had, in the selected time range.
## Summed run time Her you can the summed runtime of streaming minutes, in the selected time range.
## Average watch time The Average watch time calculates the average watch time in minutes of all connection, in the selected time range.
## Maximum CCS (Concurrent Streams) reached The Maximum CCS metric shows the maximum concurrent streams your project has reached.
*** The above feature is crucial to have a basic tracking of whats going on with your projects. # Sharing your project Getting started with Arcware Cloud You are almost ready to share your creations with the world, the next steps will explain you the options. ## Creating a Share ID Navigate to the **Share ID** page and click on **Create New Share ID** to create one.

Create New Share ID

Share ID settings.
1. **Name**: Add an appropriate name for this individual Share ID (only you will see the name, in the 'Active Share ID' list) 2. **Start/Expire time**: Specify a time frame for when your Share ID is active/accessible. 3. **Maximum Usages**: Specify the maximum amount of times this Share ID can be used (i.e. how many times your stream can be accessed via this Share ID link) 4. **Selected Projects:** Here you can specify which project the Share ID is linked to. (you can specify multiple projects under the same Share ID, each project is then accessible individually via an extended version of the Share ID, which directs the user to the specific project. 5. **Overwrite afk-module:** Allows you to apply different AFK/Timeout settings, relevant for this Share ID only. (Overrides the default/custom AFK values you used in your project's settings) 6. **White Labeling:** Allows you to change the stream loading Logo, background etc. More details on how to use it here: [White Labeling](/arcware-cloud-platform/getting-started-with-arcware-cloud/sharing-your-project/white-labeling-guide) 7. **Create:** Create Share ID with provided settings and add it to 'Active Share ID Link' list. If you have created a Share ID, it will appear below in your **Active Share ID Link** list. Here you have an overview of your active/inactive Share ID's, and you can manage them anytime from within this list. ## Share ID List sorting and filtering Here we have two options for sorting\filtering, designed to help you find and edit the share id´s you need

Sorting Share ID options

Filtering Share ID´s

## Share Link Dashboard Views You can toggle between these views using the selector at the top left of the Share Links dashboard. #### 1. Card View The Detailed Overview The Card view is the most comprehensive layout. It displays all configuration metrics and statuses for each share link upfront, without requiring any additional clicks. * Key Features: Displays the full Share ID, the associated project name, and quick-action buttons (Copy Share Link, Edit, Delete). * Expanded Metrics: A dedicated "Additional info" section provides immediate visibility into your usage limits (Used / Max), AFK/White label status, creation date, and exact scheduling parameters (Start date/time, End date/time, Remaining time). * Best Used For: Auditing specific share links or when you need to monitor the exact scheduling and capacity limits of a few active streams simultaneously.
#### 2. Card View Compact The Balanced Grid The Card view compact layout condenses the information into a smaller grid, allowing you to see more share links on a single screen while maintaining a card-based structure. * Key Features: Prioritizes the most used controls. You can quickly toggle the active status, copy the link, duplicate, edit, or delete the share. * Streamlined Information: Identifies the share name and associated project. Quick indicators (✓ or ✕) show the AFK and White Label (WL) status. * Collapsible Details: Advanced metrics are hidden by default to save space but can be quickly accessed by clicking the "Details ˅" dropdown on any card. * Best Used For: Everyday management of a moderate number of share links where quick actions are prioritized over deep metric monitoring.
#### 3. List View The High-Density Roster The List view transforms your share links into a highly condensed, horizontal row format. * Key Features: Aligns all critical data and actions into a single horizontal line per share link. * Immediate Actions: Features the active toggle, share name, project name, "Copy link" button, and status indicators (AFK, WL) reading left to right. All management icons (duplicate, edit, delete) are grouped neatly on the far right. * Collapsible Details: Just like the compact card view, in-depth metrics can be expanded via the "Details ˅" dropdown. * Best Used For: Power users managing a large volume of links. This view is ideal for rapid scanning, sorting, and finding specific projects quickly.
## Managing Share ID´s Share ID options

Share ID options

1. **Set as Inactive:** This will deactivate the Share ID, subsequently blocking access to your stream via this link and adding the Share ID to the 'Inactive' list. (Inactive Share ID's are not deleted and can always be re-enabled later) 2. **Edit/Delete:** Allows you to **Edit** the settings currently used for this Share ID link, or permanently **Delete** the Share ID. 3. **Copy Share Link:** In order to share your project with people, you will need to copy the link and then distribute it however you see fit. 4. **Share ID details:** Here is where the details of your share ID are described. {% hint style="info" %} It goes without saying that you should be cautious with whom and where you distribute your Share ID links, in order for you to keep control of your monthly streaming resources. Utilizing the '**Start**/**Expiration time**' and '**Maximum Usages**' can help you limit the maximum amount of resources used by this Share ID. Fear not, if you see that a Share ID link is being used unexpectedly and is causing unwanted streaming costs, you can always deactivate the link or edit the link with optimized settings. {% endhint %} ## Embed your project The more advanced way to display your project, is to use our WebSDK to integrate the stream in your own webpage.

Example of stream embedded in custom webpage

You could simply embed the stream in your web page for a fast preview, or enhance your stream experience by building custom HTML Web Elements to interact with the Unreal application. Interaction between your front-end and Unreal Engine stream happens by sending/receiving Json messages via the WebSDK player. [Setting up Json messages from the Unreal Engine](/unreal-engine-setup/set-up-pixel-streaming-in-your-own-project/core-settings/pixel-streaming-input-json-messages) is the key... ## Watermark and Arcware logo on Share links On **Trial Tenants** you will have a sami transparent Arcware Cloud watermark as shown below.
On Lite Plans the watermark will be removed and you will only have the small Arcware Logo on the bottom left corner of the stream.
{% hint style="warning" %} On **Core Plan** you will have the option to remove the Arcware Logo if needed and go white label.\ \ Additinally, by going WebSDK custom frontend, you can customize everything even as a Lite plan or Trial. {% endhint %} Now that you know how Arcware Cloud works, its time to discover more about the subscription plans and options. # White Labeling Guide Sharing your project ## Feature Overview White Labeling is essential for enterprise-grade deployments where a seamless, unbranded user experience is required. Instead of a generic technical interface, users are greeted with your specific brand colors, custom animations, and clean visuals. These settings are applied globally to the specific Share ID you are configuring, making it easy to create different "branded entries" for the same project.
1. **Loader image URL:** \ Provide a web link to a custom logo or icon (PNG/SVG). This replaces the default Arcware loader icon seen during the initial connection phase. 2. **Loader pulse (ms, max 2000):** \ Controls the animation speed of the loader icon. Setting a value (e.g., `500`) makes the icon "pulse" or scale up and down. A lower value results in a faster pulse. 3. **Splash image/video URL:** \ The URL for the background content displayed while the stream is initializing. It can bean image or a video to keep users engaged before the 3D world appears. 4. **Splash background color:** \ Defines the solid background color of the splash screen. This is visible if the splash image/video is loading or doesn't cover the entire screen. Use hex codes (e.g., `#000000`). 5. **Splash fit:** \ Determines how the splash image or video scales to the browser window. Options typically include Cover (fills the screen) or Contain (shows the full image with letterboxing). 6. **Hide love letters:** \ When enabled, this removes the "default Arcware loading states" (the technical status messages) that usually scrolls across the screen while the stream is connecting. 7. **Hide AFK timeout overlay:** \ Disables the visual warning overlay that appears when a user is inactive. Note: This only hides the UI, the actual AFK logic will still disconnect the user unless modified in the project settings. ### Default Arcware Branding
### White labeled (example)
# Share Links (Password-Protected Access) To provide an added layer of security and cleaner URL management by allowing users to access streams without exposing the unique Share ID directly in the web address. #### The Difference Between Standard and Tokenless Links By default, Arcware Cloud generates a direct share link that includes the access token within the URL itself, allowing for instant, one-click access. * Standard Share Link: [https://share.arcware.cloud/share-d2477d89-0548-4785-9b9f-149071fb4fe3](https://share.ragnarok.arcware.cloud/share-d2477d89-0548-4785-9b9f-149071fb4fe3) While convenient, this exposes the Share ID in the browser's address bar. For a more secure, authenticated approach, you can share only the base URL and provide the Share ID to your user separately. * Share Link without the Share ID: [https://share.arcware.cloud](https://share.ragnarok.arcware.cloud/share-d2477d89-0548-4785-9b9f-149071fb4fe3) #### How to Use the Share Link without the Share ID When a user navigates directly to the base URL [https://share.arcware.cloud](https://share.ragnarok.arcware.cloud/share-d2477d89-0548-4785-9b9f-149071fb4fe3), the stream will not load automatically. Instead, they will be prompted to authenticate their access. Step-by-Step Guide: 1. Share the Base URL: Provide your end-user with the clean link: `https://share.arcware.cloud`. 2. Provide the Share ID: Send the user the unique Share ID (e.g., `share-d2477d89-0548-4785-9b9f-149071fb4fe3` through a separate, secure channel. The Share ID can be found and copied from the Share links created on the platform. 3. Authenticate: Upon visiting the link, the user will see a prompt titled "Enter password to access your stream" (see reference image). 4. Unlock: The user must paste the Share ID into the Password field and click the Unlock Stream button to launch the application.
#### Why Use This Method? * Enhanced Privacy: Because the Share ID is never exposed in the browser's URL bar, it will not be accidentally saved in the user's browser history, bookmarks, or captured in external server referral logs. * Two-Step Authentication Feel: By distributing the base link and the Share ID via different communication channels (e.g., sending the link via email and the token via an internal messaging app), you ensure that only the intended recipient can access your 3D stream. * Cleaner Presentation: The base URL looks much more professional, compact, and trustworthy when shared in presentations, client emails, or marketing materials. # Upgrading your Plan Getting started with Arcware Cloud To upgrade your Trial to a subscription plan, you can click the **Check available plans** button within the trial insights window. You will see the Go Lite and Go Core options for upgrade.
## Upgrading from Trial to Lite Let´s go with the Lite plan. Click on the **Go Lite** button
Agree to the Terms and Conditions with the checkbox and click next.
Enter your billing information and proceed to "**Go to payment method".**
{% hint style="warning" %} ### Important Information Regarding Your Subscription Upgrade Please be aware that your **subscription upgrade will automatically trigger immediately** after you accept the terms and conditions and proceed to "Add payment method." This is because the option to add a payment method remains available at any time after this initial step. *** #### Action Required a subscription is triggered Once your subscription upgrade has been triggered, your streaming projects will be **automatically disabled** until a valid payment method is entered. To avoid any interruption in your service, please ensure you add your payment method promptly after accepting the terms and conditions. {% endhint %} Lastly, fill in your payment information to complete the subscription upgrade by clicing to "**Upgrade to Lite"**.
{% hint style="warning" %} ### Payment Information Currently, we only support **Credit Card** as a payment method for signing up.\ But you can pay via **bank transfer** as well if required. We're actively working to expand our payment options! You can expect support for other methods like PayPal and Google Pay in upcoming platform updates. {% endhint %} {% hint style="info" %} You can edit your payment information anytime from the 'Organization' tab. (Organization tab is only visible after upgrading your Trial subscription) {% endhint %} You did it, now its time to get productive :)
Once you have upgraded your subscription, the project will disabled and have the '**Select Plan**' option available.\ Proceed by enabling the plan on the project. The plan is automatically set to the selected subscription, in this case **Lite.**
Don´t forget to enable the project after selecting the plan.
Finished... Enjoy your new subscription plan. # Tenant Getting started with Arcware Cloud {% hint style="warning" %} This section is only relevant if you have a **Subscription Plan.** {% endhint %} The Tenant Tab contains the below sub pages: * General * [Members](/arcware-cloud-platform/getting-started-with-arcware-cloud/tenant/members-and-invites) * Billing details * Payment Method * Invoices
## General In the General page we can have important **insights** and two **options**. **Insights :** 1. Auto- renewal date. 2. Date started and Status of the subscription. 3. Tenant creation date. 4. Max projects.
**Options:** 1. Rename Tenant 2. [Enable 2FA (For all usesrs)](/arcware-cloud-platform/getting-started-with-arcware-cloud/tenant/two-factor-authentication-2fa) 3. Terminate subscription
## Billing Details The billing details page shows the billing information provided in the subscription preccess.\ Here you will have the option to change the billing information if needed.
{% hint style="warning" %} The billing information will be used for the invoices under your Tenant. {% endhint %} ## Payment Method In the payment method page you can change your credit card information by clicking "Replace credit card" button.
{% hint style="warning" %} Currently, we only support **Credit Card** as a payment method for signing up.\ But you can pay via **bank transfer** as well if required. We're actively working to expand our payment options! You can expect support for other methods like PayPal and Google Pay in upcoming platform updates. {% endhint %} ## Invoices In the invoices page you can: 1. Check all your invoice **Numbers and Payment dates**. 2. **Download the invoice** in PDF format.
*** That was all regarding the Tenant page :) # Members & Invites The Members & Invites page is your central command center for team collaboration within Arcware Cloud. ### Tenant Management: Members & Invites The Members feature provides a centralized hub for managing team access to your Tenant. Available exclusively for Core Plan subscribers, this feature allows Tenant owners to delegate administrative tasks, manage projects, and collaborate by inviting up to 5 team members to their organization. *** ### Accessing the Members Page To manage your team, navigate to the sidebar and select: Tenant > Members > \[!NOTE] > > This feature is exclusive to Core tier accounts. If you do not see the Tenant menu, please verify your subscription status. ***
### Managing Tenant Users The Members page is split into two primary sections: Users and Invites. **1. Seats Overview** At the top of the page, the Seats card provides a real-time count of your team capacity. * Total Capacity: 5 members per Tenant. * Status tracking: Easily see how many seats are used, pending, or remaining. **2. User Roles & Permissions** When inviting a new user, you can assign one of three distinct roles to control their level of access: | **Role** | **Permissions Level** | | -------- | --------------------------------------------------------------------------------------------- | | Owner | Full control over the Tenant, including billing, member management, and project deletion. | | Admin | Can manage projects and invite/remove Members, but cannot modify billing or remove the Owner. | | Member | General access to the dashboard and projects for operational tasks. | **3. Handling Invitations** * Invite Person: Click the "Invite Person" button to send an email invitation. * Invitation States: * Accepted: The user has joined and is active. * Revoked: The invitation was cancelled by an admin before being accepted. * Expired: Invitations naturally expire after 7 days if not accepted. * Actions: Admins and Owners can Resend active invites or Revoke them at any time from the Invites table. *** ### How to Invite a New Member 1. Click the Invite Person button in the top right. 2. Enter the user's Email Address. 3. Select the appropriate Role (Owner, Admin, or Member). 4. Click Send Invite. The user will receive an email with a link to join your Tenant.
*** ### Managing User Roles & Ownership The Owner and Admins have the authority to manage the permission levels of existing team members. These actions are performed directly within the Users table under the Actions column. * Change Roles: Admins and Owners can promote a Member to an Admin to grant them team management permissions. * Transfer Ownership: The current Owner has the exclusive ability to transfer full ownership of the Tenant to any other active user. * *Note: Transferring ownership will downgrade your own status to Admin, as each Tenant can only have one primary Owner.* * Remove Users: Admins and Owners can permanently remove a user from the Tenant, immediately freeing up a seat in the capacity count.
### FAQ **Can I increase my seat limit beyond 5?** Currently, the Core plan is capped at 5 members. For larger team requirements, please contact our sales team regarding Enterprise options. **What happens if I revoke an invite?** The invitation link becomes invalid immediately, and the seat is returned to your "Remaining" pool. # Two-Factor Authentication (2FA) ### 2FA Security is a top priority for Arcware Cloud. We have introduced Two-Factor Authentication (2FA) to provide an extra layer of protection for your Tenant and its associated projects. *** ### Enabling 2FA for the Tenant Tenant Owners and Admins can enforce a higher security standard by requiring all users within the Tenant to use 2FA. * Location: Navigate to Tenant > General. * Requirement: Under the Basic details section, toggle the "Require 2FA for all users" switch. * Effect: Once enabled, any user attempting to access the Tenant will be prompted to set up and verify their identity via a secondary authentication method (such as an authenticator app).
*** ### Managing User 2FA Tokens In cases where a team member loses access to their authentication device, Admins and Owners have the ability to reset security tokens to restore access. * Location: Navigate to Tenant > Members. * Action: 1. Locate the specific user in the Users table. 2. Click the member icon button (Actions) on the right side of their profile. 3. Select Reset 2FA Token. * Result: The user’s current 2FA association will be cleared, allowing them to set up a new 2FA device upon their next login.
> \[!WARNING] Resetting a 2FA token should only be done after verifying the user's identity through an alternative channel to ensure the security of your organization. # Products Getting started with Arcware Cloud {% hint style="warning" %} This section is only relevant if you have a **Subscription Plan.** {% endhint %} In the Products section we have two subpages * Marketlace * Your Plan ## [Marketplace](#marketplace) The Marketplace will give you access to self service scaling options.
## Your Plan In this page you can see your active subscription plan and the package details.
# The Marketplace Getting started with Arcware Cloud The Marketplace cantains two sections, **Extras** and **Tools** * Extras * Tools
{% hint style="info" %} Extras are only available in Core plan. Upgrade today to unlock the full potential. {% endhint %} ## Extras The Marketplace will give you access to self service scaling options. ### More concurrent streams When you project is proving more successful than expected, you can secure more concurrent streams, so everyone can enjoy your content when they please.
### Prepaid Streaming Minutes Buy up to 50.000 streaming minutes in the marketplace on Monthly basis. The more you book, the bigger the discount.
### Add more projects If you need more to stream more than 5 projects at the same time, you can easily buy additional projects in the market place.
{% hint style="success" %} Marketplace options are billed monthly. {% endhint %} ## Tools ### [**Direct Flow**](/arcware-cloud-platform/getting-started-with-arcware-cloud/products/the-marketplace/direct-flow) With Direct Flow, you have the power to effortlessly link your local Unreal projects to Arcware Cloud. Using Direct Flow speeds up your development process, as it removes the need to upload your package to Arcware Cloud for testing. ### [**Asset Management**](/arcware-cloud-platform/getting-started-with-arcware-cloud/products/the-marketplace/asset-management) Asset Management is an Add-On to Arcware Cloud that gives you access to the file server located in the same LAN as the GPU servers running your projects. Typical, intended use-case for that feature would be to load assets that are not part of the UE application (3D models, textures, scenes etc.) dynamically, at runtime, with very high speed. But you are also free to use access to this server for other purposes - there are no artificial limitations from Arcware side. {% hint style="warning" %} **The Asset Management service is in early access. Not available via marketplace.** {% endhint %} *** ## Youtube explanatory video | The Marketplace {% embed url="" %} # Direct Flow Arcware Cloud user portal - Add-ons guide {% hint style="info" %} This guide assumes that you have purchased the Direct Flow Add-on. If you would like to learn how to purchase Add-ons for your plan, please read the '[**10. Add-ons**](broken://pages/thShCu1xo4X7S82QThgg)' section... {% endhint %} With Direct Flow, you have the power to effortlessly link your local Unreal projects to Arcware Cloud. Using Direct Flow speeds up your development process, as it removes the need to upload your package to Arcware Cloud for testing.
## Understanding Direct Flow's settings
1. **Direct Flow information:**\ This information here shows you the name, license number and activation status of this specific Direct Flow. 2. **Project:**\ Here you can select which one of your projects in Arcware Cloud you want to link this Direct Flow to. The project you select will provide the configuration for the Direct Flow stream, meaning you will use the settings from the chosen Arcware Cloud project, but the application from your local machine. 3. **Token:**\ The token is a generated unique ID, which is present in the **Share Link** and **Start Parameter,** it's used to link your Unreal Project to Arcware Cloud. \ \ You have the possibility here to generate a new token if needed, but understandably, this will mean any previous connections you set up with this token are now invalid and you need to copy the **Share Link** and **Start Parameter** again. \ \ It would be a good practice to regenerate your **Token** after every time you share the **Share Link** with someone, as this will remove access for all users and prevent anyone from accidentally blocking your Direct Flow connection by using the link themselves. 4. **Share Link:**\ Clicking this button will open your Direct Flow stream via a new tab in your web browser. The **Share Link** can be used to view your stream (as long as your Unreal Project/application is still running on your local machine). 5. **Preview Link:** \ Clicking this button will open your Direct Flow stream as a preview window inside Arcware Cloud (only viewable by you) 6. **Copy Start Parameter:**\ This will automatically copy the **Start Pararemeter** to your clipboard. The **Start Parameter** is what you will need to copy/paste into the 'Launch Parameters' of your Unreal project or your packaged Unreal application, to allow connection to Arcware Cloud. This parameter uses the previously mentioned '**Token'**, so naturally if you regenerate the **Token** you will need to copy the **Start Parameter** to Unreal again. 7. **Manage Subscription:**\ Clicking this button will direct you to the **Manage Subscriptions** page, where you can view or make changes to your Direct Flow Add-on. ## How to use Direct Flow:
1. **Click 'Add new Direct Flow'** (you can of course use an existing Direct Flow instead)
2. **Give the Direct Flow a name** 3. **Click 'Create Direct Flow'**
4. **Click 'Copy Start Parameter'** 5. Then either paste the **Start Parameter** into your Unreal project or into a packaged Unreal application... \ \ **How to add Start Parameter to Unreal Engine project:**\ \- Open your Unreal Engine project\ \ \- Navigate to '**Advanced Settings**'.\ \ \ \- Paste the **Start Parameter** into '**Additional Start Parameters'**.\ ![](/files/qqJcE2rZuUfBinYvNT3b)\ \ \- Launch the project as **'Standalone Game'**.\ ![](/files/mN0PscxDaHxdHRWPvm2h)\ \ \- Your Unreal Project is now ready for Direct Flow.\ \ \ \ **How to add Start Parameter to Unreal Engine packaged application:**\ \- Create a Shortcut to your application. (right click > Create Shortcut)\ \ \- Open the properties of the Shortcut. (right click > Properties)\ \ \- Paste the **Start Parameter** into the '**Target**' field and click OK. You will need to leave a single empty space after the existing path and then paste the **Start Parameter** there.\ ![](/files/cWn1xptG6f5FNWy6ZPKQ)\ \ \- Run the Shortcut.\ \ \- Your Unreal application is now ready for Direct Flow.
6. **Open Share Link:** \ Once you have pasted the **Start Parameter** into your Unreal project/application and it is launched/running, you can then open the **Share Link** belonging to the Direct Flow.
7. **Finished!**\ Now you have successfully connected your local Unreal project to Arcware Cloud via DirectFlow. *** ### Youtube explanatory video | Direct Flow {% embed url="" fullWidth="false" %} # Asset Management Arcware Cloud user portal - Add-ons guide {% hint style="warning" %} Note: Asset Management is currently in limited, closed Beta. \ If you would like to use this feature please [**contact us**](https://www.arcware.com/contact). {% endhint %} ### What is Asset Management? Asset Management is an Add-On to Arcware Cloud that gives you access to the file server located in the same LAN as the GPU servers running your projects. Typical, intended use-case for that feature would be to load assets that are not part of the UE application (3D models, textures, scenes etc.) dynamically, at runtime, with very high speed. But you are also free to use access to this server for other purposes - there are no artificial limitations from Arcware side. Main benefits of using Asset Management on Arcware Cloud together with Pixelstreaming applications are: * Speed - File server and GPU server running UE projects are on the same LAN. * Full control over your files with access through both WebUI and API. * Compatibility with Unreal Engine - you can upload or download files from the server directly from UE application, without any middleware. ### WebUI
The file server for the Asset Management is located at [**https://am.arcware.cloud**](https://am.arcware.cloud). If you already have access, you can use your login and password to login to the UI to upload or download files. Alternatively you can test the UI with the demo account (with read-only access):\ Login: **demo**\ Password: **demo** ### Example: CURL commands * Download:
```sh curl -u : -O https://am.arcware.cloud// ``` * Upload:
```sh curl -u : -F "file=@" https://am.arcware.cloud// ``` * Get list:\ ### Example: Loading glTF assets into Unreal Engine #### Installing glTFRuntime plugin In this example on how to load assets dynamically at runtime using Arcware's Asset Management Server we will use [**glTFRuntime**](https://www.unrealengine.com/marketplace/en-US/product/gltfruntime) plugin. It can be installed quickly via Marketplace, but it requires a fee to do it this way. \ Alternatively, as it's open-source software, it can be compiled manually from [**GitHub repository**](https://github.com/rdeioris/glTFRuntime) and be used for free. 1. Create a project with C++ support. 2. Go to the [**Latest Releases**](https://github.com/rdeioris/glTFRuntime/releases) of the glTFRuntime repository. 3. Download latest release for your version of Unreal Engine. 4. Extract the downloaded zip file into Plugin directory in your project. \ Plugin directory may not exist yet, so if that's the case, create it.
5. Generate Visual Studio project files by right-clicking on your .uproject file and choosing corresponding action:
6. Rebuild your project. 7. In Unreal Editor go to plugins and enable **glTFRuntime** plugin:
8. Restart UE and you are done with installation. #### Loading 3D model We start by adding a ***glTF load asset from url (with progress)*** action:
This action requires URL (string) and Headers (array) to be provided. For URL we'll use one of the files on the demo account:\ [**https://am.arcware.cloud/demo/bigcity.glb**](https://am.arcware.cloud/demo/bigcity.glb) In Headers we have to provide basic authorization for file server with in a form like this: * Key: Authorization * Value: Basic \[Base64 encoded login:password] In this case we use demo account with "demo" as password. To use it as authorization header this login and password in form of "demo:demo" have to be encoded in Base64 into a string "***ZGVtbzpkZW1v***". Complete authorization header in our case looks like this: * Key: Authorization * Value: Basic ZGVtbzpkZW1v
To encode your own login and password you can use online tools like [**https://www.base64encode.org**](https://www.base64encode.org/) **Example**: If your login is "***hansolo***" and password is "***milleniumfalcon***", your authorization value from endoding "***hansolo:milleniumfalcon***" and adding ***Basic*** as prefix, would be:\ "***Basic aGFuc29sbzptaWxsZW5pdW1mYWxjb24=***" You can add support for ***Progress*** event, which will trigger each time a new update to download progress is made. Usually, for bigger files, it would show progress to the user. We’ll skip it here. Also optionally you can provide ***Loader Config*** object if you want to specify general configuration for the loaded models. We’ll skip it here. Once the download is complete it will trigger the ***Completed*** event. There we will use the downloaded asset to spawn new actor on the level.
In this example we use ***SpawnActor*** action to spawn asset loaded by the ***glTF Load Asset from URL*** action at the position defined by transform. It’s important to select a proper class of the actor spawning class. There are two to choose from - regular and async one:
***glTFRuntimeAssetActor*** will give you more options to choose from, like ability to filter lights or cameras from the scene you are loading but spawning action **will freeze the application** for the time it’s required to process all the meshes, textures and shaders. \ Animations are working out-of-the-box. ***glTFRuntimeAssetActorAsync*** always loads complete scene/model, without any filters possible, but will not freeze the application while loading. Minor stuttering caused by CPU usage spike is still possible, but the app will remain responsive during the load.\ In this class you have an option to ***Show While Loading*** which makes part of the model appear as soon as they are ready. If disabled the whole model will appear at once when everything is loaded completely. Animations are not playing automatically when loaded from async. Some extra trigger to start them may be required. ### File Server technical documentation As backend for the file server we are using HFS server:\ \ \ Documentation:\ *** ## Youtube explanatory video | Asset Management service. {% embed url="" %} # Help Center Arcware Cloud user portal - Getting Started
The Help Center has many useful sections if you need assistance with Arcware Cloud...\ \ **FAQ:** [**https://platform.arcware.cloud/faq**](https://platform.arcware.cloud/faq)\ Here you can find commonly asked questions regarding Arcware Cloud/ Streaming with Unreal / WebSDK and more. Platform access is required.\ \ **Tutorials:** [**https://youtu.be/pzM0j7GO6z8?si=-lYyXMvWxOOB1nDD**](https://youtu.be/pzM0j7GO6z8?si=-lYyXMvWxOOB1nDD)\ In this section you can watch video tutorials, designed to help you easily get set up on Arcware Cloud and additionally how to prepare Unreal Engine for streaming with Arcware Cloud.\ \ **Documentation:** [**https://docs.arcware.cloud/arcware-cloud**](https://docs.arcware.cloud/arcware-cloud)\ This is the link to direct you here, to our written documentation.\ \ **Discord Link:** [**https://discord.gg/8Yn5UuPtmJ**](https://discord.gg/8Yn5UuPtmJ)\ By joining our Discord channel, you can find and submit questions regarding Arcware Cloud. Please be aware that our Discord is treated as more of a place for community support, rather than direct support from the Arcware team itself. # Customer Support tickets Arcware Cloud user portal - Getting Started {% hint style="warning" %} This section applies to **Core and Custom plans** only. If you're on a **Trial or Lite plan**, you can reach out for support in our [Discord ](https://discord.gg/8Yn5UuPtmJ) community. {% endhint %} ## Creating a Support Ticket If you have Core/Custom plan with Arcware Cloud, then you will have access to the '**Create Support Ticket**' feature in the **Help Center.** To Submit a support ticket simply click the '**Create Support Ticket**' button
1. Please try to fill out the support form as informative as possible, to help us solve your issue faster.\ This form can be used for Bug Report / Sales and Marketing / Feature Request / Questions / Comment. 2. If your issue is related to a specific project, please provide the project name or project ID. \ Project ID can be found here... 3. Once the details are filled in click **Send** and our support team will contact you via email as soon as possible.

Copy project ID

1. # Set up Pixel Streaming in your own project​ This guide will instruct you on how to get your Unreal Engine 4 or Unreal Engine 5 project ready for Pixel Streaming.
## Learning topics:
Cover image
Core Settings/files/a2c4bKHuRy6BNlAcJC1P
Optional Settings/files/uVP47tWsUIz71vMZU5tv
{% hint style="info" %} **Note:** All images in this guide were taken from within Unreal Engine 5, therefor you may notice some differences in the UI layout if you are working with Unreal Engine 4. However please note that the settings and processes mentioned in this guide are the same for both engine versions. {% endhint %} # Core Settings Set up Pixel Streaming in your own project - Core Settings General Goal: The Core Settings section provides the essential technical foundation for any Pixel Streaming project. These configurations ensure that Unreal Engine communicates correctly with the streaming hardware, handles web-based inputs (JSON), and maintains optimal visual performance across different devices and network conditions. #### Sub-pages: * [Plugin Setup](https://docs.arcware.cloud/unreal-engine-setup/set-up-pixel-streaming-in-your-own-project/core-settings/plugin) * Description: A guide to enabling and configuring the mandatory Pixel Streaming plugins within Unreal Engine to unlock cloud-streaming capabilities. * [Pixel Streaming Input (JSON Messages)](https://docs.arcware.cloud/unreal-engine-setup/set-up-pixel-streaming-in-your-own-project/core-settings/pixel-streaming-input-json-messages) * Description: Learn how the engine interprets data packets from the web. This page covers the protocol for sending and receiving custom JSON commands between the browser and your Blueprints. * [Resolution Optimization](https://docs.arcware.cloud/unreal-engine-setup/set-up-pixel-streaming-in-your-own-project/core-settings/resolution) * Description: Best practices for setting internal render resolutions to balance high-fidelity visuals with low-latency streaming performance. * [Camera & Aspect Ratio](https://docs.arcware.cloud/unreal-engine-setup/set-up-pixel-streaming-in-your-own-project/core-settings/camera-aspect-ratio) * Description: Instructions on configuring cameras to handle various screen shapes (Desktop vs. Mobile) without stretching or distorting the view. * [Framerate Management](https://docs.arcware.cloud/unreal-engine-setup/set-up-pixel-streaming-in-your-own-project/core-settings/framerate) * Description: How to lock and optimize your project's FPS to ensure a smooth, stutter-free experience for the end-user. * [Mouse Control](https://docs.arcware.cloud/unreal-engine-setup/set-up-pixel-streaming-in-your-own-project/core-settings/mouse) * Description: Configuration for software vs. hardware cursors and ensuring mouse transparency and capture work correctly within a browser window. * [Touch Input Setup for Mobile](https://docs.arcware.cloud/unreal-engine-setup/set-up-pixel-streaming-in-your-own-project/core-settings/touch-input-setup-for-mobile) * Description: A specialized guide for enabling multi-touch gestures and mobile-specific interactions for users streaming on smartphones and tablets. * [DirectX Version](https://docs.arcware.cloud/unreal-engine-setup/set-up-pixel-streaming-in-your-own-project/core-settings/directx-version) * Description: Critical requirements for choosing the right RHI (DirectX 11 vs. 12) to ensure compatibility with Arcware’s server-side GPU encoders. *** #### Why these Core Settings matter: Unlike a local game, a Pixel Streaming application must be "aware" that its display and inputs are coming from a remote web browser. Skipping any of these steps can lead to input lag, distorted visuals, or connection failures. Mastering these settings is the first step toward a production-ready cloud application. # Pixel Streaming Plugin Set up Pixel Streaming in your own project - Core Settings Enable the Pixel Streaming plugin from inside your project.​ ​ * The plugin can be found in the main menu inside the Unreal Editor, select **Edit > Plugins​** under **Graphics** section * Both **Pixel Streaming** & **Pixel Streaming 2** plugins are supported on Arcware Cloud. * Once you have enabled the plugin please restart your project for the plugin to take effect.
{% hint style="warning" %} Warning: **Please avoid enabling both plugins together. Arcware Cloud upload pipeline will detect and prevent packages with both plugins enabled !** {% endhint %} {% hint style="info" %} **Note:** The Pixel Streaming Plugin only works when you run your project as a packaged application, or when you launch it from the Unreal Editor using the **Standalone Game** Launch option. {% endhint %} # Pixel Streaming Input / Json messages Set up Pixel Streaming in your own project - Core Settings {% hint style="info" %} Note: Adding the '**Pixel Streaming Input'** component allows you to access the Pixel Streaming Blueprint API nodes. This API allows your application to send and receive messages from the Pixel Streams HTML frontend, this means you can trigger in-game events from clicking buttons in the Web page and vice versa. {% endhint %} {% hint style="warning" %} Warning: This step is important for the '[01.3. Resolution](https://app.gitbook.com/o/sfZeAeXGkv7Dx2jvWZjO/s/xeRHVvCMHTEw8OnxbYIg/~/changes/196/unreal-engine-setup/set-up-pixel-streaming-in-your-own-project/01.-core-settings/01.3.-resolution)' guide as this is how the resolution messages are intercepted {% endhint %} *** ## Receive Json message from frontend Once you have the Pixel Streaming plugin enabled and your project has been restarted, you can then add the '**Pixel Streaming Input'** component to an actor somewhere in your game level. (We recommend adding this component to your **Player Controller** in your **Game Mode**) * Add the **'PixelStreamingInput'** component to the components list in your **Player Controller** ![Add PixelStreamingInput Component to Player Controller](/files/BZQYnMkae5Rb2pHA6DpO) * Next, drag the **'PixelStreamingInput'** component into the blueprint **Event Graph** and bind your own '**Custom Event'** node by using the **'Bind Event to On Input Event'** node. * As you can see in the image below, we named our custom event **'Input\_Recieved\_Event**'. This custom event will handle the received input from the Pixel streams frontend, the input is always received in the form of a Json string called **'Descriptor'**. You should set the '**Descriptor**' string as a variable as we do in the example below, this makes it more easy to reference later. ![Add nodes for receiving Json descriptor](/files/ZagLkgtyLo45dBk7W2w8) Now we will add the blueprint nodes that will allow your application to trigger **Console Commands** when new input is received. * As seen in the image below, add a **'Get Json String Value**' blueprint node and in the Feild Name type '**Console'.** * Add a **'Branch'** node after, this will check if the Feild Name **'Console'** was successfully found within the Json descriptor. * Add a '**Contains**' node and in Substring type '**Setres**'. Then connect the '**Contains**' node to another '**Branch**' node. Adding these two nodes, will mean that only **resolution** console commands will be accepted (i.e. Setres 1920x1080). This node set up is the minimum needed by the Arcware WebSDK, to change your application resolution dynamically depending on the device is being viewed on. * Add an **'Execute Console Command'** node at the end. * Please make sure all the nodes are connected in the same way as our example below. ![Search Json descriptor for desired 'Field Name'](/files/GTaWT5GFuu3V7W5IScoi) {% hint style="info" %} Note: For triggering **Console Commands** in Unreal Engine via the frontend, there is also a method via enabling the Pixel Streaming parameter '**-AllowPixelStreamingCommands**' and then sending '**emitConsoleCommand**' from frontend to Unreal. However, Arcware forces this parameter to be **disabled** on all projects in Arcware Cloud as it creates a security risk when users can freely send commands to your streamed application without you knowing. The alternative method that allows you to filter out the incoming Console Commands (as demonstrated with the blueprint nodes above) is utilizing '**stream.emitUIInteraction**' sent from the frontend, for example... **stream.emitUIInteraction({"console": "r.setres 1920x1080"})** {% endhint %} *** ## Send Json response to frontend The final Blueprint node to consider from the Pixel Streaming API library is the '**Send Pixel Streaming Response**' node. The node is useful for notifying the Html web page when the Json message received in Unreal Engine has been triggered and was successful. * Below is an example of a **Pixel Streaming Response** being sent to the frontend written as a Json string e.g ***{ "Console": "r.setres 1920x1080w" }*** or ***{ "Example\_Event\_01": "done" }*** ![Send Json message response to frontend](/files/dTGDe3CzG9a8INLRoVYy) {% hint style="info" %} These blueprint nodes you have created can be used later for triggering any event in your application (providing that your frontend is already aware of the 'Field Names' that are available to be triggered in your application)\ \ For a deeper dive into this topic...\ \ please check out the Unreal Engine documentation regarding communication between Web page and Unreal Engine...\ \ \ or download our Unreal Engine Pixel Streaming Template, for more in-depth examples...\ [https://app.gitbook.com/o/sfZeAeXGkv7Dx2jvWZjO/s/xeRHVvCMHTEw8OnxbYIg/\~/changes/oOlhzIGnFb9VXpuR0CE2/unreal-engine-setup/using-the-arcware-pixel-streaming-template-project/getting-started/01.-template-download](/unreal-engine-setup/using-the-arcware-pixel-streaming-template-project/template-changelog) {% endhint %} # Resolution Set up Pixel Streaming in your own project - Core Settings ## Start Resolution To set the starting resolution of your application or to have a dynamically controlled resolution, you will need to add the following settings ​to your project.​ ​ * Add these two resolution console commands to your project. (We recommend adding them to an ‘**Execute Console Command**’ blueprint node in the **Event Graph** of your **​Level Blueprint**) ``` PixelStreaming.WebRTC.DisableResolutionChange 0​ r.setres 1920x1080w ``` ![(Example of the console commands inside a 'Execute Console Command' Blueprint Node)](/files/H4jhVGnFakO998dKg5s4) {% hint style="warning" %} **Warning:** The '**PixelStreaming.WebRTC.DisableResolutionChange 0**' console command is only relevant for UE4 (in UE5.1 the resolution changes work automatically)\ \ Please be aware that UE5.03 doesn't support this resolution change as the command is missing (Epic are aware and fixed this feature in 5.1) {% endhint %} {% hint style="info" %} Note: The 'setres' console command is not necessary when streaming as Arcware Cloud forces FullHD anyway, but it can however be useful when you test the application on your local machine, to view it in the same resolution as it will be shown whilst streaming. \ \ Our recommended value for the resolution console command is **1920x1080w**\
{% endhint %} ## Dynamic Resolution If you have successfully completed the steps in... ['**01.2. Pixel Streaming Input'**](/unreal-engine-setup/set-up-pixel-streaming-in-your-own-project/core-settings/pixel-streaming-input-json-messages) ... your Unreal Project should now be ready to receive the **json descriptor input** needed for dynamically changing the resolution via Console Commands.
The json descriptor input will be sent from the **Web frontend** to your **Player Controller** in Unreal Engine. Everytime the user resizes the web browser window a json descriptor will be sent to Unreal Engine with a new corresponding resolution command. {% hint style="info" %} Here is an example of how the json descriptor will be written when its sent from the frontend to your Unreal Engine application...\ \ emitUIInteraction({ Console: '`r.setres 1920x1080w'` }) {% endhint %} # Camera Aspect Ratio Set up Pixel Streaming in your own project - Core Settings Disable aspect ratio constraints on your in-game cameras for a responsive web experience. \ To allow for the best user experience while streaming on a variety of different devices, we recommend unticking **’Constrain Aspect Ratio‘** on your cameras, this will allow your application to use the whole screen of the device and will allow for portrait screen orientations to work properly. * Firstly locate where your cameras are being used (your camera could be in your **Player Pawn** or a **Cinematic Camera** for movie sequences). * With the camera selected look in the '**Details'** panel for the option **‘Constrain Aspect Ratio‘** and disable it. ![( Example of a Player pawn with Camera Component )](/files/parVbV4gpC2O9ilUt1rX) # Framerate Set up Pixel Streaming in your own project - Core Settings Limit the framerate of your application to get the most out of your stream resources. * Select **Edit** > **Project Settings** > **Engine** > **General Settings**, enable **‘Use Fixed Frame Rate’** and enter a value in **‘Fixed Frame Rate’** {% hint style="info" %} Note: recommended values 30-35 FPS {% endhint %} ![Project Settings window](/files/OxdUXqCR3iWXQpnSBad5) # Mouse Set up Pixel Streaming in your own project - Core Settings The mouse settings you need depend on how you intend to set up your UI, either **in-game UI** or **in-web UI**... ## UI Option 1: UI is provided in-web browser via a surrounding HTML webpage **Step 1.** Hide in-game Mouse cursor * Navigate to **Project Settings** > **Plugins** > **Pixel Streaming** and set the **'Default Cursor Class Name'** to use **'HiddenCursor'.**\ When streaming your application you may notice two mouse cursors active on the screen, that's because an additional mouse cursor is provided in-game from Unreal Application. When using UI set up in a webpage we don't need the in-game mouse cursor, so we hide it here...

Step 1.

**Step 2**. Disable Mouse Lock options in Unreal Engine * Navigate to **Edit** > **Project Settings** > **Engine** > **Input**
* Set **'Default Viewport Mouse Capture Mode'** = **'Capture Permanently Including Initial Mouse Down'**\ In most projects this value is sufficient. It means that the game window will always react to mouse input, even the first click in the window.
* Set **'Default Viewport Mouse Lock Mode'** = **'Do Not Lock'**\ Setting this as **'Do Not Lock'** means the user can freely click the surrounding HTML buttons without having to always press **'Escape'** first to unlock the mouse cursor from the stream window.\ \ (Please be aware this setting is overridden by the '**Mouse Lock**' option in Arcware Cloud project settings. Despite it being overridden, we still recommend to set this value in Unreal Engine as well, in case you test the project locally without Arcware Cloud settings)

Step 2.

**Step 3**. Disable Mouse Lock option in Arcware Cloud platform * Inside your project page in Arcware Cloud navigate to **Settings** > **General** > * Set **Mouse Lock** to **Disabled**\ Setting this as **'Disabled'** means the user can freely click the surrounding HTML buttons without having to always press **'Escape'** first to unlock the mouse cursor from the stream window. Disabling it also means the mouse cursor provided by the web browser will be visible.\ \ (Please be aware, this setting overrides the '**Default Viewport Mouse Lock Mode'** value set in Unreal Engine)

Step 3.

*** ## UI Option 2: UI is provided in-game via Unreal Engine **Step 1.** Show in-game Mouse cursor (only relevant if 'Mouse Lock' is enabled in Arcware Cloud) * Navigate to **Project Settings** > **Plugins** > **Pixel Streaming** and set the **'Default Cursor Class Name'** to use **'DefaultCursor'.**\ If you have enabled the '**Mouse Lock**' feature from inside Arcware Cloud, you will notice that it automatically hides the mouse cursor provided by the web browser. So in order to interact with your in-game Ul you will need to make sure that the in-game mouse cursor is visible instead.

Step 1.

**Step 2**. Enable Mouse Lock options in Unreal Engine * Navigate to **Edit** > **Project Settings** > **Engine** > **Input**
* Set **'Default Viewport Mouse Capture Mode'** = **'Capture Permanently Including Initial Mouse Down'**\ In most projects this value is sufficient. It means that the game window will always react to mouse input, even the first click in the window.
* Set **'Default Viewport Mouse Lock Mode'** = ''**Lock On Capture''** / **''Lock Always''** / **''Lock in Fullscreen''**\ Using one of these mouse 'Lock' options, you could for example lock the player camera rotation to the mouse, so the camera follows the mouse regardless of whether the user is clicking down or not (such as in first person games). \ \ (Please be aware this setting is overridden by the '**Mouse Lock**' option in Arcware Cloud project settings. We still recommend to set this value in Unreal Engine as well, in case you test the project locally without Arcware Cloud settings)

Step 2.

**Step 3**. Enable Mouse Lock option in Arcware Cloud platform * Inside your project page in Arcware Cloud navigate to **Settings** > **General** > **Mouse Lock** * Set **Mouse Lock** to **Enabled**\ Setting this as **'Enabled'** means your mouse will be locked inside the stream window and the mouse cursor provided by the web browser will be hidden (leaving only the in-game mouse visible, \*if it's visible\*). This can be useful for 1st person experiences where the camera should be locked to the mouse position regardless of whether the user is clicking down or not. With this enabled you will now have to press **Escape** to unlock the mouse from the stream window.\ \ (Please be aware, this setting overrides the '**Default Viewport Mouse Lock Mode'** value set in Unreal Engine)

Step 3.

\ **Step 4**. Activate the mouse only when in-game UI Menu is open (Optional) \ \ In projects using in-game UI, you maybe only want to activate the in-game mouse cursor when the UI menu is open. * Toggle the in-game mouse visibility at runtime: You can set the same values as seen in Step 1. ('**HiddenCursor**' / '**Default Cursor**') via the blueprint nodes below. ![Step 4.](/files/qV9xQfe7QoCfxu2O8QzJ) * Toggle the in-game mouse input at runtime: You can decide if mouse clicks go to your game or to your UI, via the '**Set Input Mode Game Only**' and '**Set Input Mode Game and UI**' blueprint nodes. \ \ To form the base of your menu open/close logic, you would combine the Mouse visibility and the Mouse Input nodes, to only allow mouse usage when the menu is open. Which would look like this...

Step 4. (Created Inside Widget blueprint)

*** {% hint style="info" %} Note: The two mouse configurations listed above for **in-Web UI** / **in-game UI** are fitting the common use cases on Arcware Cloud, however they are only recommendations and the settings can of course be combined in any way to suit your project needs. {% endhint %} {% hint style="info" %} Note: In **Edit** > **Project Settings** > **Pixel Streaming** you have maybe noticed the setting below called **'Mouse always attached'** (See Screenshot below). This is an additional method to hide the mouse cursor, but It is not recommended to use it, as from our own experience disabling it stops the user from being able to perform double clicks during \ streaming.\ \ ![](/files/gVB9QuqgGrExLXtBtJbL) {% endhint %} # Touch Input Setup for Mobile Set up Pixel Streaming in your own project - Core Settings In order to have functional Touch input when interacting with the Pixel Stream on a touch enabled device, you will need to enable the following touch related settings. * Select **Edit** > **Project Settings** > **Engine** > **Input**, and tick '**Enable Gesture Recognizer’.** {% hint style="info" %} **Note: 'Enable Gesture Recognizer’ will allow your application to react to common touch functions such as 'Pinch to zoom' or 'Swipe'.** \ \ Previously the **'BP\_Arcware\_Pawn'** from the **Arcware Pixel Streaming Template Project** required this setting to allow the **'Pinch'** (to zoom) gesture to work correctly. However the 'Pinch' gesture does not trigger on IOS, so we build a custom Pinch function that doesn't rely on the dedicated 'Pinch' gesture. {% endhint %} ![](/files/JmHT8ipN5e3XlR4x5uN8) * Now open your '**Player Controller**' blueprint and in the **Details** panel tick **'Enable Touch Events'** ![Enable Touch Events - Player Controller](/files/1ASpNLxjZkk9cIGhgDtc) Once you have enabled those touch settings, you can now add the blueprint functionality reponsible for controlling the touch input events. \ \ We recommend downloading the '**BP\_Arcware*****\_*****Pawn**' from the **Arcware Pixel Streaming Template Project.** In the **Pawn** there are existing blueprint functions for **'Camera Rotation With Touch'** or **'Zooming with the Touch Pinch Gesture'.** The touch blueprint functions could be copied to your own **Player Pawn** blueprint or you can instantly use the '**BP\_Arcware*****\_*****Pawn**' in your project with little setup required. {% hint style="warning" %} Warning: Please be aware... if you have set up Touch Events in your Unreal Engine project you also need to enable 'Touch capability' for the uploaded application in the CloudRT user portal (see screenshot below).\ \ ![](/files/zArgv5GQD4ZrI8MVE3UM) {% endhint %} {% hint style="info" %} Another touch related project setting to be aware of is '**Use Mouse for Touch'** in**...**\ **Edit** > **Project Settings** > **Engine** > **Input**\ \ ![](/files/BYla1E85fvDmOuVtYs42)\ \ This is just a handy feature for debugging touch inputs if you don't have a touch device available to you, all it does is simulate your **Touch Events** being triggered via the mouse instead, so you can check if your touch logic is working without having to connect a touch device. \ \ For production, we recommend to avoid using this setting and instead building dedicated Touch events. '**Use Mouse for Touch'** is ok for testing things, but it only takes input from one finger, meaning functionality like 'zooming' is not possible with this feature because it requires two fingers. {% endhint %} # DirectX version Set up Pixel Streaming in your own project - Core Settings Arcware CloudRT supports Unreal Engine projects that use **DirectX 11** and **DirectX 12,** although 12 is recommended to get the most out of the render features in Unreal.
# Optional Settings Set up Pixel Streaming in your own project - Optional Settings General Goal: The Optional Settings section provides advanced configurations to further enhance user interaction and multimedia capabilities. These features allow you to tailor the experience for specific hardware—like mobile devices—and integrate high-quality dynamic content into your stream. #### Sub-pages: * [Touch Controllers](https://docs.arcware.cloud/unreal-engine-setup/set-up-pixel-streaming-in-your-own-project/optional-settings/touch-controllers) * Description: Learn how to implement and customize on-screen touch controllers. This guide is essential for projects targeting mobile users, providing a way to translate touch gestures into precise character or camera movement without the need for a physical keyboard or mouse. * Key Focus: Virtual joysticks, mobile UI overlays, and touch-to-input mapping. * [Playing Media Files](https://docs.arcware.cloud/unreal-engine-setup/set-up-pixel-streaming-in-your-own-project/optional-settings/playing-media-files) * Description: A specialized guide on managing video and audio playback within the Arcware Cloud. It covers the setup of the Unreal Engine Media Framework to ensure that video textures and sounds are synchronized and correctly broadcasted through the Pixel Streaming components. * Key Focus: Video textures, synchronized audio routing, and media asset management. *** #### Why these settings matter: These features move your project beyond a standard desktop experience. Touch Controllers ensure your application is truly "mobile-first," making it accessible to a much wider audience, while Media Files allow you to create more immersive environments with integrated video content, advertisements, or cinematic elements. # Touch Controllers Set up Pixel Streaming in your own project - Optional Settings If you're using a moveable character in your project and you want to navigate around the scene on a touch device, you may want to show the on-screen touch controllers. \ \ The touch controllers act as on-screen joysticks and with them enabled you can simultaneously control both Character movement + Camera movement, without it enabled you would only be able to control the camera. \ \ Go to **Project Settings** > **Engine** > **Input** and enable the '**Always Show Touch Interface'** setting. ![](/files/8lj5kRL7BFOy6at0YfgH) # Playing Media files Set up Pixel Streaming in your own project - Optional Settings In Unreal Engine 5.1 the quickist way to get your media/video files playing is:\ \ \- Import your video into a **'File Media Source'** asset in the Content Browser (with file path to video in ''Game...''/Content/Movies/) \ \ \- Drag the **'File Media Source'** asset into the viewport, this will automatically create a **'Media Plate'** actor. \ \ \- The **'Media Plate'** actor can be controlled via blueprints. Using this actor removes the need to \ create individual 'Media Player/textures/materials' for each unique video imported. The actor makes audio playback easier as well, as the audio component is already implemented in the BP. \ \ \- Done {% hint style="warning" %} Warning: Only **AVI** and **H.264** file formats are supported, with Audio embedded as **AAC (ISO/IEC 14496-3)** {% endhint %} {% hint style="info" %} Note: If you find that your Media files still do not play properly, please alternately try with the 'Electra' media player plugin (available by default. {% endhint %} # Using the Arcware Pixel Streaming Template Project This guide will explain the contents/functionality of the Arcware Pixel Streaming Template project
Using the Arcware Pixel Streaming template is the quickest way to get your projects stream ready. ### Download Link [**https://fab.com/s/94f4aec0beec**](https://fab.com/s/94f4aec0beec) ### Learning topics:
Cover image
Template Overview/files/Sci3qLHeCWiM4Wi8lIxx
Getting Started/files/6C6vIRPVgqunwAfkgLsD
Generic file transfer from UE to Frontend/files/1ua1oikGhInoCnh2FMou
Template Changelog/files/22ODSWzBOJO7U64o1Tw6
#### Integrating the pixel streaming template in your project | video overview {% embed url="" %} # Template Overview Using the Arcware Pixel Streaming Template Project ## Navigation System Overview The navigation system operates on both mobile and desktop platforms with three modes: Orbit, Fly, and Walk. #### Orbit Mode * **Desktop**: Right-click and drag to rotate, Middle click and drag to pan, Double right-click to change focus, Mouse scroll to zoom. * **Mobile**: One finger drag to rotate, Double tap to change focus, Pinch to zoom, Three-finger drag to pan. #### Fly Mode * **Desktop**: Use W/A/S/D to move, Left-click to rotate, Q/E for vertical movement, Middle click and drag to pan. * **Mobile**: Touch for movement, Drag to rotate. #### Walk Mode * **Desktop**: Use W/A/S/D to move, Left-click or mouse move to rotate, Spacebar to jump. * **Mobile**: Touch for movement, Drag for rotation. Extra actions like jumping might be automated. Developers can use this framework to ensure a consistent user experience across devices, with room for adjustments based on user feedback. **Project Context**: Created with an 'Automotive/Product Design/Manufacturing' template without starter content. **Download link:** [**https://www.fab.com/listings/9b0edb51-5b11-42f0-b281-94e896a4801d**](https://www.fab.com/listings/9b0edb51-5b11-42f0-b281-94e896a4801d) ## **Plugins Enabled** \- Default Unreal Engine plugins (based on a blank 'Automotive/Product...' template project)\ \- Pixel Streaming plugin

(Edit > Plugins)

## **Project Settings Enabled** \- Use fixed frame rate = True \ \- Fixed frame rate = 30 fps

(Edit > Project Settings > Engine > General Settings)

\- Ray Lighting Mode (UE5) = Hit Lighting for Reflections\ \- High Quality Translucency Reflections (UE5) = True

(Edit > Project Settings > Engine > Rendering)

\- Default Viewport Mouse Capture Mode = Capture Permanently Including Initial Mouse Down\ \- Set 'Default Viewport Mouse Lock Mode = Do Not Lock \ (this value Is overwritten if using the 'BP\_Arcware\_HUD\_Visible\_Mouse')

(Edit > Project Settings > Engine > Input)

\- Default GameMode = BP\_Arcware\_GameMode

(Edit > Project Settings > Project > Maps & Modes)

**-** Enable Gesture Recognizer = True\ (needed for Pinch to zoom to work. Although this is currently not relevant as 'Pinch' gesture doesnt work on IOS devices)

(Edit > Project Settings > Engine > Input)

\- Default RHI = DirectX 12 (12 is recommended)

(Edit > Project Settings > Platforms> Windows)

## **Player Input** \- 'Actions' Folder = (All input key bindings needed for camera movement)\ \- 'Arcware\_InputMappingContext' = (Input mapping used for EnhancedInput system)

(Content > Arcware_Functionality > Input)

## **Console Commands Enabled** \- PixelStreaming.WebRTC.DisableResolutionChange 0 (only relevant for UE4.27) \ \- r.setres 1920x1080w (for setting the resolution if dynamic resloution option is disabled)

(Enabled via the Level Blueprint, commands only active when playing the game)

## **Arcware Specific Assets in the Project** **- BP\_Arcware\_GameMode**\ ( this GameMode contains the reference to BP\_Arcware\_Pawn and BP\_Arcware\_Player\_Controller ) \ \ **- BP\_Arcware\_Pawn**\ ( this Pawn is used for controlling the player camera. All of the settings you will need related to camera movement speed/zooming/panning etc, are editable in the Pawn actor's detail panel, meaning you can tweak the camera movement style without needing to open the blueprint ) \ \ **- BP\_Arcware\_Player\_Controller**\ ( this Player Controller contains blueprint nodes for handling the Pixel Streaming events/responses. This is where you can send/receive json messages from the Web browser to trigger events in Unreal Engine )\ \ \- **BP\_Arcware\_HUD\_Hidden\_Mouse**\ ( this HUD should be used when your pixel stream has UI provided via the web-browser. In this scenario, you don't need to click any UI in the game so you don't need to show the in-game mouse cursor )\ \ \- **BP\_Arcware\_HUD\_Visible\_Mouse**\ ( this HUD should be used when your pixel stream has in-game UI. In this scenario, the user needs to interact with the in-game UI so the in-game mouse cursor must be visible. When this HUD is used it provides an example of in-game UI, which shows the most useful functionality for the in-game mouse, such as, only showing the mouse cursor when the menu is open )

Arcware Blueprints inside Content Browser

# Getting Started Using the Arcware Pixel Streaming Template Project General Goal: The objective of this section is to guide you through the fundamental integration of the Arcware Pixel Streaming Template. It ensures that your Unreal Engine project is both "web-intelligent" through specialized Blueprints and "cloud-ready" through the correct packaging standards. #### Sub-pages: * [Arcware Blueprints](https://docs.arcware.cloud/unreal-engine-setup/using-the-arcware-pixel-streaming-template-project/getting-started/arcware-blueprints) * Description: This page explores the core logic driving the template. It covers the essential Blueprint classes and nodes that manage the communication between your 3D scene and the web browser. You will learn how to handle incoming commands from a website and how to send data back to the frontend to create a synchronized, interactive experience. * Key Focus: Digital Twin communication, event binding, and web-to-engine interactivity. * [Packaging your Project](https://docs.arcware.cloud/unreal-engine-setup/using-the-arcware-pixel-streaming-template-project/getting-started/packaging-your-project) * Description: High-performance streaming requires specific build settings. This guide provides a step-by-step walkthrough on how to properly package your Unreal Engine project for the Arcware Cloud. It covers essential rendering settings, plugin requirements, and export configurations to ensure your application runs with maximum stability and low latency on any device. * Key Focus: Build configurations, optimization settings, and preparing the final executable for cloud upload. *** #### Why this is important for the user: By completing these two foundational steps, developers move from a local Unreal Engine project to a fully functional Cloud Application. The Blueprints page provides the "brain" for web interaction, while the Packaging page provides the "body" optimized for the Arcware streaming infrastructure. # Arcware Blueprints Using the Arcware Pixel Streaming Template Project - Getting Started General Goal: The Arcware Blueprints section provides a deep dive into the custom framework that powers the communication between Unreal Engine and the web browser. By understanding these four core classes, you can fully customize how your application behaves, how users navigate, and how data is exchanged in real-time. #### Sub-pages: * [Arcware GameMode](https://docs.arcware.cloud/unreal-engine-setup/using-the-arcware-pixel-streaming-template-project/getting-started/arcware-blueprints/arcware-gamemode) * Description: Learn about the foundational rules of your streaming application. The Arcware GameMode ensures that the correct Player Controller, Pawn, and HUD classes are initialized automatically when a user connects to the stream. * Key Focus: Project-wide defaults and session initialization for cloud streaming. * [Arcware Player Controller](https://docs.arcware.cloud/unreal-engine-setup/using-the-arcware-pixel-streaming-template-project/getting-started/arcware-blueprints/arcware-player-controller) * Description: This is the "communication hub" of your project. It handles the logic for receiving commands from the web frontend (via the WebSDK) and translating them into actions within the Unreal Engine scene. * Key Focus: Input mapping, web-to-engine messaging, and event handling. * [Arcware Pawn](https://docs.arcware.cloud/unreal-engine-setup/using-the-arcware-pixel-streaming-template-project/getting-started/arcware-blueprints/arcware-pawn) * Description: Explore the specialized Pawn that acts as the user's "physical" presence and camera in the 3D world. It includes pre-built logic for different movement types (Orbit, Fly, Walk) optimized for both mouse and touch interfaces. * Key Focus: Camera logic, navigation modes, and multi-platform movement. * [Arcware HUD](https://docs.arcware.cloud/unreal-engine-setup/using-the-arcware-pixel-streaming-template-project/getting-started/arcware-blueprints/arcware-hud) * Description: This page covers the Head-Up Display logic. It explains how to manage on-screen elements that are rendered within the stream, such as loading indicators or in-stream UI overlays. * Key Focus: Visual feedback, stream overlays, and 2D-to-3D interaction logic. *** #### Why these Blueprints matter: These four classes work together as a unified framework. While a standard Unreal Engine project uses these classes for local gameplay, the Arcware versions are specifically engineered to bridge the gap between a high-end GPU in the cloud and a standard web browser on the user's device. {% hint style="info" %} Navigation Tip: If you want to change *how* a user moves, look at the Pawn. If you want to change *what* happens when a user clicks a button on your website, look at the Player Controller. {% endhint %} # Arcware GameMode Arcware Blueprints **Name:**\ BP\_Arcware\_GameMode\ \ **Location:** \ Content/Arcware\_Functionality/Blueprints/Gamemode/BP\_Arcware\_Game\_Mode.uasset\ \ **Use:** \ The GameMode is where you set which blueprint classes to use for your core game functionality. Core game class's are for example the 'Player Pawn' and 'Player Controller'. \ \ You will notice in our GameMode that the 'BP\_Arcware\_Pawn' and 'BP\_Arcware\_Player\_Controller' are already set. You can change the classes used in the GameMode by simply opening up the GameMode asset and selecting a new Blueprint class from the drop down lists.

GameMode in content browser

Setting Blueprint Class's in the GameMode

If for example you want to use your own Player Pawn Blueprint, then you would also need to delete the 'BP\_Arcware\_Pawn' actor from the 'Outliner'.

Delete BP_Arcware_Pawn from scene outliner before using your own Pawn

# Arcware Player Controller Arcware Blueprints **Name:**\ BP\_Arcware\_Player\_Controller\ \ **Location:** \ Content/Arcware\_Functionality/Blueprints/Player\_Controller/BP\_Arcware\_Player\_Controller.uasset\ \ **Use:** \ The Player Controller Blueprint is responsible for:\ \- Sending/receiving json messages from the web frontend.\ \- Setting in-game mouse cursor visibility.

'BP_Arcware_Player_Controller' in Content Browser

{% hint style="info" %} **Note:** If you would like to learn how the pre-existing blueprint nodes in the Arcware Player Controller were set up, please refer to '01.2. Pixel Streaming Input' (Link below) {% endhint %} {% content-ref url="/spaces/xeRHVvCMHTEw8OnxbYIg/pages/2tI7UC0OvYF7l1M9f9aU" %} [Pixel Streaming Input / Json messages](/unreal-engine-setup/set-up-pixel-streaming-in-your-own-project/core-settings/pixel-streaming-input-json-messages) {% endcontent-ref %} # Sending and Receiving Json messages Arcware Player Controller In the BP\_Arcware\_Player\_Controller blueprint you will see pre-existing blueprint nodes for handling the receiving/sending of Json messages. \ \ The content/wording of the Json messages should be agreed upon between the web frontend developer and Unreal Engine developer, as both sides need to be aware of the possible Json messages it's receiving before anything can be triggered. \ \ A typically workflow example of a Json message being sent to Unreal Engine would be...\ \ 1\) User clicks button in frontend\ \ 2\) Frontend sends Json message to Unreal Engine application i.e... ``` emitUIInteraction({ Console: r.setres 1000x2000w }) ``` 3\) Unreal Engine receives this Json message in the Player Controller via the '**Pixel Streaming Input**' component
4\) Json message is received and the **Get Json String Value** node searches the message for the pre-determined **Field Name**... **'Console'**. If this **Field name** is present in the Json message, then the **String Value** will be used to trigger a Console Command. In this example the **String Value** would be **'r.setres 1000x2000w'**
5\) (This step is Optional). After the desired event is triggered, we send a Json message response back to frontend via the **Send Pixel Streaming Response** node. The content of the message response should be discussed with the frontend developer so they know what to intercept, in this example we just send back the same message as received i.e... ``` { "Console": "r.setres 1000x2000w" } ```
# Creating and Testing Your Own Events Arcware Player Controller The existing Blueprint nodes in the Player Controller already allow you to Intercept some common Json messages, such as triggering Console Commands or changing camera views. It also provides example events that you can modify to create your own logic, as well as keyboard bindings for simulating custom Json messages being received.

Event Overview

**1)** Console Command Event\ **Use:** Logic for triggering Console Commands (typically you will always want the Console Command logics in your project as they are needed for features such as 'Dynamic Resolution Change' to work) \ \ **Keyboard Shortcut:** 1 \ \ **Json String:** ``` { "console": "r.setres 1920x1080w" } ``` **2)** Change Camera View Event\ **Use:** Triggers an event inside the 'BP\_Arcware\_Pawn' that changes the players camera view \ \ **Keyboard Shortcut:** 2\ \ **Json String:** ``` { "camera_view": "cam_01" } ``` **3)** Example Event - two events being triggered from a single Json Message \ **Use:** An example to show how a Json message with a single 'Key' but two embedded 'Values' can be utilised. Triggers two events that both print a string to the log. \ \ **Keyboard Shortcut:** 3\ \ **Json String:** ``` { "trigger_events": { "event_01": "example_value_01", "event_02": "example_value_02" }} ``` **4)** Example Event - all events triggered from a group of Json Messages embedded in one object \ **Use:** An example to show how you could send all Json messages to Unreal Engine in one Json object string. This could be useful if you want to send a whole configuration list at once. \ \ **Keyboard Shortcut:** 4\ \ **Json String:** {% code overflow="wrap" %} ``` { "console": "r.setres 1920x1080w", "camera_view": "cam_01", "trigger_events": { "event_01": "example_value_01", "event_02": "example_value_02" }} ``` {% endcode %} # Arcware Pawn Arcware Blueprints **Name:**\ BP\_Arcware\_Pawn\ \ **Location:** \ Content/Arcware\_Functionality/Blueprints/Pawn/BP\_Arcware\_Pawn.uasset\ \ **Use:** \ The Pawn blueprint is responsible for:\ \- Camera movement inputs for Desktop/Mobile\ \- Automatic Depth of field \ \- AFK camera shake / AFK cinematic\ \- Camera collision functionality\ \- Making preset camera views
# Change Movement Mode Arcware Pawn The **BP\_Arcware\_Pawn** allows you to swap between camera movement modes.
### Navigation System Overview The navigation system operates on both mobile and desktop platforms with three modes: Orbit, Fly, and Walk. #### Orbit Mode * **Desktop**: Right-click and drag to rotate, Middle click and drag to pan, Double right-click to change focus, Mouse scroll to zoom. * **Mobile**: One finger drag to rotate, Double tap to change focus, Pinch to zoom, Three-finger drag to pan. #### Fly Mode * **Desktop**: Use W/A/S/D to move, Left-click to rotate, Q/E for vertical movement, Middle click and drag to pan. * **Mobile**: Touch for movement, Drag to rotate. #### Walk Mode * **Desktop**: Use W/A/S/D to move, Left-click or mouse move to rotate, Spacebar to jump. * **Mobile**: Touch for movement, Drag for rotation. Extra actions like jumping might be automated. Developers can use this framework to ensure a consistent user experience across devices, with room for adjustments based on user feedback.\
# Set Collision Channels Arcware Pawn In the **BP\_Arcware\_Pawn** there are 3 different collision settings to be aware of...\ \ **1)** **Collision Channel for DOF:**\ If you are using the setting '**Camera Depth of Field Method** = **Automatic\_Depth\_of\_Field'** ...

DOF Method

... Then you need to be aware of the Collision Channel that's being used to update the Auto depth of field. In it's default set up, any mesh with the **'Visibility'** collision channel set to **'block'** will react to the Automatic depth of field.

Collision channel for DOF

Example of setting 'Block' Visibility collision response on a mesh, to react with DOF

**2) Spring Arm Collision Channel:**\ if you are using the **'Orbit Movement Mode'** then a Spring Arm component is being used to rotate the camera around the focus point. If **'Spring Arm Should Collide With Objects?'** is enabled...

Enable Spring Arm Collision

... then the Spring Arm component has in-built logic for handling collisions. With the '**Spring Arm Collision Channel'** setting, we can specify a collision channel that will be used to stop the player camera. (useful when you want to stop the user from orbiting through the floor/walls)

Set Spring Arm Collision Channel

Example of setting 'Block' Camera collision response on a mesh, to stop Spring Arm camera going through it

**3) Collision Types For Pivot Change:** \ Setting these collision object types, means that you can move the camera pivot point (teleporting) to meshes that are set to **'block'** those collision object types.

Set Collision types for allowing pivot changing

Example of setting 'Object Type' collision on a mesh, for allowing pivot change

# Add new camera views Arcware Pawn In the **BP\_Arcware\_Pawn** there is the possibility to create preset camera views. \ \ There are already two place-holder camera views added in the Pawn, these two existing views are already incorporated in the Pixel Stream logic in the **BP\_Arcware\_Player\_Controller** and the views can be tested by pressing '2' on the keyboard. \ \ If you wish to add more camera views to the list please follow the guide below\... {% hint style="info" %} **Info**: The guide below demonstrates adding new views for the 'Orbit Movement Mode',\ however the process is the same to add views to the 'Fly Movement Mode' as well.\ \ **Orbit Mode** = Uses an Empty Actor to behave as the pivot point to orbit around\ **Fly Mode** = Uses a Camera Actor to behave as a specific camera location {% endhint %}
**1)** Duplicate the actor in the Outliner called **'Orbit\_Mode\_Pivot\_...'** and then set the desired location and rotation of this actor. (this transform will be used as the start position for this individual view) \ \ **2)** Add a new index to the **'Camera View - Orbit Mode Positions Array'** , and then assign your newly duplicated **'Orbit\_Mode\_Pivot\_...'** actor to this index. \ \ **3)** Add a new index to the **'Camera View - Orbit Mode - Zoom Min Array**' , and enter a desired value.\ \ **4)** Add a new index to the **'Camera View - Orbit Mode - Zoom Max Array'** , and enter a desired value.\ \ \-- Guide Complete -- \ \ You will notice there are more settings available for each camera view (such as 'Rotation Clamps'),\ but the guide is just to demonstrate a small scale example of adding a new camera view. \ \ With the example in the screenshot above, it should be understandable that Camera View 01 ('Orbit\_Mode\_Pivot\_01') has a minimum zoom of 30 and a maximum zoom of 500. # Arcware HUD Arcware Blueprints **Name:**\ BP\_Arcware\_HUD\_Hidden\_Mouse / BP\_Arcware\_HUD\_Visible\_Mouse\ \ **Location:** \ Content/Arcware\_Functionality/HUD/BP\_Arcware\_HUD\_Hidden\_Mouse.uasset\ \ **Use:** \ These two HUD's are presets for how the in-game mouse behaves.

GameMode in content browser

**'**BP\_Arcware\_HUD\_Hidden\_Mouse'\ This HUD should be used when your pixel stream has UI provided via the web-browser. In this scenario, you don't need to click any UI in the game so you don't need to show the in-game mouse cursor. \ \ 'BP\_Arcware\_HUD\_Visible\_Mouse'\ This HUD should be used when your pixel stream has in-game UI. In this scenario, the user needs to interact with the in-game UI so the in-game mouse cursor must be visible. When this HUD is used it provides an example of in-game UI, which shows the most useful functionality for the in-game mouse, such as, only showing the mouse cursor when the menu is open.

in-game UI provided by 'BP_Arcware_HUD_Visible_Mouse'

The UI asset used in the HUD is called '**Arcware\_UI**', you can open it to repurpose the Mouse/UI logic however necessary for your own project.
The desired HUD can be assigned in the **GameMode**.

Setting Blueprint Class's in the GameMode

# Packaging your project Getting Started Before packaging the project you should check that the **'Game Mode'** and **'Default Map'** are correctly set in the project settings (if you have created your own Map or Game Mode you would have to set it here)
When packaging we enable **'Create compressed cooked packages'** which allows for a smaller package size.
After packaging is complete... **Zip** your package folder and give it an appropriate name ready for uploading to the Arcware Cloud. # Generic file transfer from UE to Frontend Using the Arcware Pixel Streaming Template Project While primarily used for capturing and downloading screenshots, this blueprint logic provides a generic framework to transfer *any* file generated by the engine during a Pixel Streaming session directly to the end-user's local machine. ## Feature Overview The Generic File Transfer system leverages Arcware’s custom communication layer to send binary data or file paths from the Unreal Engine instance to the browser. * How it works: The engine generates a file (e.g., a `.png`, `.pdf`, or `.txt`), identifies its location on the server, reads the data, and triggers a "Pixel Streaming Response." * Key Advantage: It bypasses the need for external cloud storage or complex FTP setups for simple file handoffs, providing an immediate "Save As" experience for the user.
## Blueprint Breakdown The logic in the provided screenshot follows a linear flow: **Path Construction → Action Execution → File Loading → Frontend Notification.** **1. Set File Path Function** Before a file can be sent, the engine must define exactly where it is being stored. * Logic: The blueprint uses `Append` nodes to combine the Project Saved Directory with a specific folder name (e.g., `/Screenshots/`) and a dynamic filename. * Flexibility: You can modify the string inputs here to point to any directory within your project’s write-accessible folders. **2. Execute Console Command (Screenshot Capture)** In this specific implementation, the flow triggers the engine's internal command to capture the viewport. * Node: `Execute Console Command`. * Command: Uses the file path generated in the previous step. * Delay: A short `Delay` node (e.g., 0.2s) is often included to ensure the engine has finished writing the file to the disk before the next node attempts to read it. **3. Load & Read File** Once the file exists on the server's drive, it needs to be converted into a format the web browser can handle. * Read File: The blueprint retrieves the file from the "Saved" path. * Data Handling: The data is processed into a byte array or a format compatible with the Pixel Streaming communication component. **4. Send Pixel Streaming Response** This is the final "Handshake" with the Arcware Frontend. * JSON Construction: The logic builds a JSON object containing a `type` (e.g., `"Screenshot"`) and the file data/URL. * Send Response: The `Send Pixel Streaming Response` node broadcasts this message. The Arcware Frontend sees this "Notice," identifies the file, and triggers the browser's download prompt. ## Extending the Functionality Because this is a Generic setup, you can replace the "Screenshot" logic with any other file-generating event: | **File Type** | **UE Source Action** | **Use Case** | | ------------- | -------------------- | --------------------------------------------------------- | | .txt / .json | Save String to File | Exporting user configuration or high scores. | | .csv | Export Data Table | Exporting analytics or product lists from a configurator. | | .png / .jpg | Render Target Export | Saving custom textures or UI snapshots. | {% hint style="info" %} **Note:** Always ensure the `Delay` node is sufficient for the file size being generated. Large files may require a "Success" callback rather than a static timer to prevent the "File Not Found" error during transfer. {% endhint %} ## Working example # Arcware Cloud & WebSDK Integration Generic file transfer from UE to Frontend One of the strongest advantages of this blueprint setup is its native compatibility across the entire Arcware ecosystem. Because this function is built into the official Arcware Pixel Streaming Template, it is designed to work "out of the box" without requiring additional network configuration or security overrides. ## Full Compatibility Matrix | **Feature** | **Compatibility Status** | **Notes** | | ------------------- | ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Arcware Share Links | Fully Compatible | Share links (e.g., `share.arcware.cloud/...`) use a default frontend that is already programmed to listen for the "Screenshot" and "FileTransfer" JSON responses. No extra coding is required to trigger a download. | | Arcware WebSDK | Fully Compatible | The WebSDK (versions 1.3.3+) includes built-in handlers for file transfers. Developers can easily hook into the `onResponse` callback to manage how files are saved or displayed in custom web interfaces. | | UE Versions | 5.6 and Higher | Optimized for the latest Pixel Streaming infrastructure (UE 5.6+ recommended for best performance). | ## Why use this with the WebSDK? If you are building a custom frontend rather than using a standard share link, the Arcware WebSDK simplifies the process. It automatically handles the binary stream coming from your Unreal Engine instance. * Ease of Use: You don't need to manually manage WebSockets. The WebSDK identifies the file type from the blueprint’s JSON response and handles the browser's "blob" creation. * Customization: While share links will simply download the file, the WebSDK allows you to intercept the file. For example, you could show the screenshot in a "Gallery" UI element on your website before the user decides to save it. {% hint style="info" %} **Note:** WebSDK Updates: Always use the latest version of the [`@arcware-cloud/pixelstreaming-websdk`](/web-integration/new-websdk) via npm or yarn to ensure you have the most stable file-handling hooks. {% endhint %} # Template Changelog Using the Arcware Pixel Streaming Template Project The current version of the template is available under the following download link.\ It will be updated on regular basis, a changelog will follow in the future. *** Download link: [**https://fab.com/s/94f4aec0beec**](https://fab.com/s/94f4aec0beec) *** ## **Changelog:** **13.02.2026**\ **The generic file transfer functionality added to the Arcware PS template versions 5.6 & 5.7** **17.11.2025**\ **Added 5.6.1 and 5.7 version** \ **- Click to move navigation system added on walk mode**\ \ **27.01.2025**\ **Moving Template to Epic Games Fab** \ **-** [**https://www.fab.com/**](https://www.fab.com/) **25.11.2024**\ **Template Upgrade to 5.5**\ \- Arcware streaming Template Project 5.5 is added for download **28.02.2024**\ **On the '**BP\_Arcware\_Pawn'\ \- Exposed the option to disable camera panning movement (Middle Mouse Button) \ \- Exposed the Aperture values used for the automatic Depth of Field, so you can choose how strong the depth of field is based on the distance of the camera from the subject. \ \ **16.10.2023**\ \- After the last upload of UE5.2 and UE5.3 we forgot to re-enable '**Use Fixed Frame Rate**' in the Project Settings, so now it's enabled again. (it's not compulsory to have it enabled, but we recommend it for performance gain)\ \ **19.09.2023**\ **-** Fixed bug: Not possible to move character when starting game in 'Walk' movement mode\ \ **14.09.2023**\ **-** Added preset logic for setting desired Mouse behavior, typically the user should hide the in-game mouse when using frontend UI and should show the in-game mouse when using in-game UI. Therefor we have provided two HUD's to switch between... '**BP\_Arcware\_HUD\_Hidden\_Mouse**' and '**BP\_Arcware\_HUD\_Visible\_Mouse**'\ \ **11.09.2023**\ **-** Updated project to 5.3.0 \ \ **24.08.2023**\ **-** Added '**Play Sound**' button for testing in-game audio (audio thats not played from a video)\ \ \- Tweaked '**Camera shake**' functionality in Pawn (previously before fix, over a long time of the application running you will end up in the floor, because of the camera shake) \ \ \- Added '**PixelStreamingAudio'** component to BP\_Arcware\_Player\_Controller, in preparation for testing/supporting microphone input. \ \ **25.07.2023**\ **-** Moved **Camera** and **Collision Capsule** down on Z axis inside Player pawn blueprint, because the camera height was the correct human height for **Walk** mode, but not the correct height for the center of the **Orbit** mode.\ \ \- Fixed: camera goes through floor when 'Resetting Camera' in Walk mode \ \ **24/07/2023**\ **-** Disabled **'Is Focusable**' from all buttons in **Arcware\_UI**. If it's enabled and the user clicks a button then the **Tab** key (for closing UI Menu) is passed through UI instead of through Player controller. \ \ **17/07/2023**\ **-** Converted legacy Input bindings to new '**Enhanced Input**' system. This change now means that the Input bindings are no longer contained in the Project Settings but instead in the **Content > Arcware\_Functionality > Input** folder in the content browser. (this conversion happened because the old input method will be deprecated soon) \ \ \- Now added '**Arcware\_UI**' to project. This UI can be deleted if not needed, it's used to demonstrate how the different Mouse settings can be used to achieve various Mouse interaction styles while streaming.\ \ **27/06/2023**\ **-** Changed 'console' json message event in **BP\_Arcware\_Player\_Controller** to only trigger with '**Setres**...' commands. Due to the fact that having all console commands triggerable in your application is not usually desirable, we reduced the blueprint logic to only accept '**Setres**....' console commands, which is the minimum needed by the Arcware WebSDK to change your resolution dynamically. \ \ **23/06/2023**\ \- BP\_Arcware\_Pawn now has new camera movement preset 'Walk' mode. Shift to run, space to jump\ \- Exposed additional parameters in BP\_Arcware\_Pawn to change movement values for each mode, rather than one set of parameters for all movements modes. \ \- Added movement mode dropdown button to in-game UI, allowing user to swap movement modes freely during runtime. \ \ **22/06/2023**\ \- Made 'Orbit Mode' default navigation method\ \- Set rotation clamps to be full 360° , by default # Unreal Engine Version Support General Goal: To provide a transparent overview of which Unreal Engine versions are natively supported, deprecated, or coming soon on the Arcware Cloud platform. This page helps you plan your project development and upgrades to ensure seamless compatibility with our cloud streaming infrastructure. ### Supported Versions Matrix | **Unreal Engine Version** | **Support Status** | **Recommended Action** | | ------------------------- | ------------------ | ------------------------------------------------------------ | | UE 5.8 🚀 | Active (Latest) | Fully supported. Recommended for new, cutting-edge projects. | | UE 5.7 | Active | Fully supported. Excellent stability. | | UE 5.6 | Active | Fully supported. Excellent stability. | | UE 5.5 | Active | Fully supported. | | UE 5.4 | Active | Fully supported. | | UE 5.3 | Active | Fully supported. | | UE 5.2 | Active | Fully supported. | | UE 5.1 | Active | Fully supported. | | UE 5.0.3 | ⚠️ Deprecated | Support ending soon. Plan an upgrade to UE 5.3+ | | UE 4.27 | ⚠️ Deprecated | Legacy support ending. Plan an upgrade to UE 5.x | ### Support Categories Explained #### 🚀 Active Support (Recommended) These versions are fully optimized and continuously tested on Arcware Cloud servers. We guarantee full compatibility with our WebSDK, templates, and performance optimizations. We highly recommend starting all new projects on one of these versions. #### ⚠️ Deprecated Support (End of Life) Deprecated versions are legacy releases that will soon phase out of our active support cycle. * What this means: While existing packaged projects may continue to stream, we will no longer release template updates, bug fixes, or dedicated technical support for these versions. * Our recommendation: If your project is currently on 4.27 or 5.0.3, we strongly suggest migrating your assets and logic to UE 5.6 or higher for the best streaming experience. # Pixel Streaming WebSDK Welcome to the @arcware-cloud/pixelstreaming-websdk, a robust solution tailored for integrating Unreal Engine's Pixel Streaming technology into web applications via Arcware Cloud. The **Arcware Pixel Streaming WebSDK** is a JavaScript library that simplifies integrating **Unreal Engine Pixel Streaming applications** into web applications. It builds on top of Epic Games’ Pixel Streaming frontend and adds features, improvements, and utilities tailored for the **Arcware Cloud platform**, while still allowing flexible integration into modern web applications. The SDK handles the complexity of connecting to a Pixel Streaming session, managing WebRTC communication, and forwarding user input to the Unreal Engine application. *** ### What the WebSDK Provides The WebSDK provides a high-level interface for interacting with Pixel Streaming sessions and includes built-in support for: * Video and audio streaming from Unreal Engine * Keyboard, mouse, touch, and gamepad input forwarding * Microphone input * VR / WebXR support * Session persistence and reconnection handling * Framework-agnostic integration * Built-in UI components or fully custom integrations * Messaging between the browser and Unreal Engine * Analytics and event tracking * File transfer support * White-labelling and branding customization This allows developers to focus on building their application logic instead of managing the low-level streaming infrastructure. *** ### Integration Modes The WebSDK supports **two integration approaches**, depending on the level of customization required. #### UI Integration (Recommended for most projects) The simplest way to integrate Pixel Streaming is by using the SDK’s **default UI setup**. With a single initialization call, the SDK will: * Create and manage the streaming session * Render the video stream * Handle input forwarding * Manage connection states and reconnections This approach is ideal when you want to quickly embed a Pixel Streaming application into your website. *** #### Core Integration (Advanced) For applications that require **full control over the UI and streaming lifecycle**, the SDK also exposes a **core/headless integration mode**. In this mode you can: * Build your own UI * Control the streaming lifecycle manually * Handle events and messages directly * Integrate deeply with frameworks like React, Vue, or Angular This is recommended for advanced integrations or applications with highly customized interfaces. *** ### Framework Agnostic The WebSDK is designed to work with **any modern frontend framework**, including: * React * Vue * Angular * Svelte * Vanilla JavaScript It does not impose any framework-specific requirements, making it easy to integrate into existing applications. *** ### Communication with Unreal Engine The WebSDK enables **bidirectional communication** between the browser and the Unreal Engine application. This allows you to: * Send custom messages or commands from the browser * Receive responses from Unreal Engine * Trigger gameplay logic from web UI interactions * Exchange structured data between frontend and application logic *** ### When to Use the WebSDK You should use the Arcware PixelStreaming WebSDK when you want to: * Embed Unreal Engine applications into a web platform * Build interactive 3D experiences accessible from a browser * Integrate Pixel Streaming with existing web applications * Create custom interfaces that interact with Unreal Engine in real time *** ### Next Steps To start integrating the SDK into your project, continue with: [**Getting Started →**](/web-integration/new-websdk/getting-started) # Getting Started This guide will walk you through the initial steps to integrate the Arcware Pixel Streaming WebSDK into your web application. {% hint style="danger" %} Attention: "Please make sure in a production environments to never pull with latest tag but to pin the exact version" {% endhint %} #### Prerequisites Before integrating the `@arcware-cloud/pixelstreaming-websdk` into your project, please ensure the following prerequisites are met: * **`Share ID`**: You must have a valid Share ID set up for your project. This ID is crucial for establishing the connection between your application and the Arcware Cloud pixel streaming service. If you need assistance in setting up your Share ID, please refer to our detailed guide: [Setting up Share ID](/arcware-cloud-platform/getting-started-with-arcware-cloud/sharing-your-project). * **`Web Application Development Environment`**: Ensure that your web application development environment is set up with either `yarn` or `npm`. These package managers are required for installing the WebSDK. * **`TypeScript Recommendation`**: While the SDK can be used with JavaScript, we strongly recommend using TypeScript in your development process. TypeScript offers enhanced code quality, readability, and will provide you with more intrinsic information during development, often surpassing what traditional documentation can offer. *** #### NPM Package *** #### Installation To integrate the Arcware CloudR Pixel Streaming WebSDK into your project, you can use either `npm` or `yarn`. Run one of the following commands in your project directory: ```sh npm install @arcware-cloud/pixelstreaming-websdk --save ``` ```sh yarn add @arcware-cloud/pixelstreaming-websdk ``` We recommend keeping the WebSDK up to date to ensure you have the latest features and bug fixes. Regularly check for and install updates. *** #### Quick Start Guide If you don't care to much about options and want to jump right in, then you can jump directly to our implementation examples: #### Setup With the basic JavaScript & HTML example we'll guide you through the setup process here. **Step 1: Import and Configure** You can either initialize the `ArcwareConfig`, `ArcwarePixelStreaming` and `ArcwareApplication` one by one, or utilize the `ArcwareInit` method. {% hint style="info" %} We recommend to use ArcwareInit method as it contains guards against effects like rerenderings of the webpage, which if not properly handled could cause multiple websocket connections being initialized resulting in parallel requests and multiple instances which might have unwanted effects on costs, usage and state of your instance. {% endhint %} Import `ArcwareInit` from the "@arcware-cloud/pixelstreaming-websdk" and configure it to your needs. ```javascript import { ArcwareInit } from "@arcware-cloud/pixelstreaming-websdk"; const { Config, PixelStreaming, Application } = ArcwareInit( { // Replace with your actual share ID shareId: "share-0be4620b-77aa-42b1-98cb-f7ee61be443?", }, { initialSettings: { AutoConnect: false }, settings: {} } ); ``` More about the configuration options you can find here: [WebSDK Configuration](https://docs.arcware.cloud/web-integration/new-websdk/configuration) Keep in mind, that setting `AutoConnect: true` will directly connect the client to an instance, no matter if you follow Step 2 directly or not. **Step 2: Embed into Your Application** Append the stream to the DOM. ```javascript const containerId = 'your-container-id'; const container = document.getElementById(containerId); container.appendChild(PixelStreaming.rootElement); ``` *** #### Next Steps After you've successfully integrated the basic streaming functionality, you can explore more advanced features of the SDK to enhance your application. # Code examples The Arcware Pixel Streaming WebSDK is designed with cross-platform compatibility in mind, ensuring that you can integrate it into a wide range of web applications and sites, regardless of the underlying technology. To help you get started, we provide a variety of code examples tailored to different frameworks and platforms. Since we focus on Typescript with React, we rely on your feedback for other implementations. If you find a bug or miss an example, please let us know. In this section, we will guide you through the implementation process with practical code examples for the following technologies: {% content-ref url="/pages/NYpq0uWEJRuKo9dZGD3R" %} [Javascript + HTML](/web-integration/new-websdk/code-examples/javascript-+-html) {% endcontent-ref %} {% content-ref url="/pages/gwAWudxkQsaRCo3wQe6J" %} [React](/web-integration/new-websdk/code-examples/react) {% endcontent-ref %} {% content-ref url="/pages/kqVGwGAqcwrO7DMxeOhc" %} [VueJS](/web-integration/new-websdk/code-examples/vuejs) {% endcontent-ref %} {% content-ref url="/pages/qaAOs2xfmZ5u40f73w8y" %} [AngularJS](/web-integration/angularjs) {% endcontent-ref %} # Javascript + HTML {% hint style="danger" %} Important: In production environments you should never install or import the SDK using the latest tag. Always pin the exact version you want to use. {% endhint %} This example provides a simple starting point for integrating the Arcware Pixel Streaming WebSDK into a plain **HTML + JavaScript** application. It is intended as a lightweight reference implementation that helps you understand the basic integration flow: * importing the SDK * initializing the stream * attaching the stream to the DOM * sending messages from the web application to Unreal Engine * receiving responses from Unreal Engine You can also try the example directly in CodePen: [Open the HTML + JavaScript example on CodePen](https://codepen.io/Arcware/pen/WNPXZJO) Replace the example `shareId` with your own project Share ID to test the integration with your application. *** ### Code template You can use the following template as a quick starting point for your own project. ```html Arcware Pixel Streaming WebSDK
Loading Pixel Stream...
``` *** ### What this example does This example: * initializes the SDK using `ArcwareInit` * connects to the stream automatically * appends the stream container to the DOM * listens for messages returned from Unreal Engine * sends a test message to Unreal Engine when the button is clicked *** ### Notes * Replace `` with your own valid Share ID. * For production usage, replace the version in the CDN import with the exact SDK version you want to use. * If you want more control over when the connection starts, set `AutoConnect` to `false` and trigger the connection later in your application flow. * For framework-based applications such as React, Vue, or Angular, the integration pattern is similar, but the DOM mounting should be adapted to the framework lifecycle. # React {% hint style="danger" %} Attention: "Please make sure in a production environments to never pull with latest tag but to pin the exact version" {% endhint %} The example below demonstrates how to integrate the **Arcware Pixel Streaming WebSDK** into a **React application**. It serves as a basic reference implementation showing how to: * initialize the WebSDK * attach the stream to a React component * send UI interactions from the web application to Unreal Engine * receive responses from the Unreal application You can experiment with this example directly using CodePen: [Open the React example on CodePen](https://codepen.io/Arcware/pen/WNPXZJO) Replace the example `shareId` with your own project's Share ID to connect to your application. *** ### Code Template For a quick start, you can use the following **`App.js`** template. It demonstrates a minimal React integration of the WebSDK. ```javascript import "./App.css"; import { ArcwareInit } from "@arcware-cloud/pixelstreaming-websdk"; import React, { useState, useRef, useEffect } from "react"; function App() { const videoContainerRef = useRef(null); const [arcwareApplication, setArcwareApplication] = useState(null); const [applicationResponse, setApplicationResponse] = useState(""); const handleSendCommand = (descriptor) => { arcwareApplication?.emitUIInteraction(descriptor); }; useEffect(() => { const { Config, PixelStreaming, Application } = ArcwareInit( { shareId: "" }, { initialSettings: { StartVideoMuted: true, AutoConnect: true, AutoPlayVideo: true }, settings: { infoButton: true, micButton: true, audioButton: true, fullscreenButton: true, settingsButton: true, connectionStrengthIcon: true } } ); setArcwareApplication(Application); Application.getApplicationResponse((response) => setApplicationResponse(response) ); // Append the application's root element to the video container if (videoContainerRef?.current) { videoContainerRef.current.appendChild(Application.rootElement); } }, []); return (
); } export default App; ``` *** ### How This Example Works This React example performs the following steps: #### 1. Initialize the WebSDK The `ArcwareInit` function creates the necessary SDK components: * `Config` – configuration object * `PixelStreaming` – streaming controller * `Application` – application interaction layer *** #### 2. Attach the Stream to the React Component A React `ref` (`videoContainerRef`) is used to mount the stream container. The SDK exposes a DOM element via: ``` Application.rootElement ``` This element contains the video stream and input handling. *** #### 3. Receive Messages from Unreal Engine The function: ``` Application.getApplicationResponse() ``` allows the web application to receive responses or messages sent from the Unreal Engine application. *** #### 4. Send Messages to Unreal Engine User interactions can trigger messages to Unreal Engine using: ``` Application.emitUIInteraction() ``` In the example, clicking the button sends a simple test command. *** ### Notes * Replace `` with your own Share ID. * The stream container should always be mounted using a **React ref** to ensure correct lifecycle handling. * The `useEffect` hook ensures the stream is initialized only once when the component mounts. # VueJS {% hint style="danger" %} Attention: "Please make sure in a production environments to never pull with latest tag but to pin the exact version" {% endhint %} The example below demonstrates how to integrate the **Arcware Pixel Streaming WebSDK** into a **Vue.js application (Vue 3)**. This example shows how to: * initialize the WebSDK inside a Vue component * attach the stream to a DOM container using Vue refs * send commands from the web interface to Unreal Engine You can also experiment with this example using CodePen: [Open the Vue example on CodePen](https://codepen.io/Arcware/pen/WNPXZJO) Replace the example `shareId` with your own project Share ID to connect to your application. *** ## Code Template For a quick start, you can use the following implementation. *** ## Step 1 — Create the PixelStreaming Component Create a new file called: ``` PixelStreaming.vue ``` ```vue ``` *** ## Step 2 — Import the Component Now import the component into your main application file. Example **`App.vue`**: ```vue ``` *** ## How This Example Works #### 1. Initialize the SDK The `ArcwareInit` function creates the WebSDK components and prepares the streaming connection. *** #### 2. Mount the Stream A Vue `ref` (`videoContainerRef`) is used to access the container element. The SDK provides the streaming container via: ``` Application.rootElement ``` This element contains the video player and input handling logic. *** #### 3. Send Messages to Unreal Engine The function ``` emitUIInteraction() ``` allows the web UI to send commands to the Unreal application. In this example, clicking the button sends a simple test message. *** ## Notes * Replace `` with your project’s Share ID. * The stream should always be mounted **inside `onMounted()`** to ensure the DOM container exists. * Vue `ref`s are used to safely access DOM elements inside the component lifecycle. # Configuration Configuration and initialization the Arcware Pixel Streaming WebSDK is designed to be easily configurable to fit the needs of various web applications. This section explains the configuration options that can be passed to the **Arcware Pixel Streaming WebSDK** during initialization. The most common way to initialize the SDK is through the `ArcwareInit` function. ```typescript export function ArcwareInit( ids: ConnectionInfo, configuration?: ArcwareInitConfiguration, forceRefresh: boolean = false ): ArcwareInitResult ``` `ArcwareInit` initializes the WebSDK and returns the main SDK components required to interact with the stream. ```typescript interface ArcwareInitResult { Config: ArcwareConfig PixelStreaming: ArcwarePixelStreaming Application: ArcwareApplication } ``` These components represent different layers of the SDK: | Component | Purpose | | ------------------ | ------------------------------------------------------------------- | | **Config** | Holds configuration and connection parameters | | **PixelStreaming** | Manages the WebRTC stream and player | | **Application** | Handles interaction with Unreal Engine (messages, commands, events) | *** ## ArcwareInit vs CoreSetup Most integrations should use **`ArcwareInit`**. `ArcwareInit` is a **high-level helper function** that: * creates the internal SDK objects * connects them together * guards against accidental reinitialization * simplifies integration with frameworks such as React, Vue, or Angular It also prevents multiple instances of the stream from being created during page re-renders. If you intentionally need fresh SDK objects, you can force reinitialization: ```typescript ArcwareInit(ids, configuration, true) ``` *** ### CoreSetup (Advanced Usage) For advanced integrations, the SDK also exposes a **lower-level initialization method** called **`CoreSetup`**. `CoreSetup` allows developers to manually create and connect the SDK components: * `ArcwareConfig` * `ArcwarePixelStreaming` * `ArcwareApplication` This approach is useful if you need: * complete lifecycle control * smaller footprint * custom UI implementations * multiple streaming instances * deeper integration with application architecture Most applications **do not need CoreSetup**, and `ArcwareInit` is recommended for typical use cases. *** ## Configuration Options The `ArcwareInit` function takes three parameters: 1. `ids: ConnectionInfo` 2. `configuration: ArcwareInitConfiguration` 3. `forceRefresh: boolean` *** ## 1. ConnectionInfo This parameter defines the **connection information required to start a streaming session**. ```typescript interface ConnectionInfo { shareId: string projectId?: string } ``` #### shareId The **Share ID** is required and identifies the project that should be streamed. It can be considered a temporary access token that can be revoked or updated at any time from the Arcware Cloud Platform. #### projectId This is only required if a Share ID is linked to **multiple projects**. If the Share ID uniquely identifies a project, this parameter can be omitted. *** ## 2. ArcwareInitConfiguration The second parameter configures the behavior of the WebSDK. ```typescript export type ArcwareInitConfiguration = Partial ``` ```typescript export interface ArcwareConfigParams extends ConfigParams { settings: Settings envName?: string } ``` This configuration extends the **Epic Games Pixel Streaming frontend configuration** with additional Arcware-specific options. *** ### Top-Level Configuration Parameters | Parameter | Description | | ---------------------- | --------------------------------------------------------------------- | | **settings** | Arcware-specific configuration options | | **envName** | Internal Arcware testing environment parameter (ignore in production) | | **initialSettings** | Pixel Streaming frontend configuration | | **useUrlParams** | Allows configuration via URL parameters | | **webSocketProtocols** | Optional WebSocket protocol configuration | *** ### 2.1 initialSettings The `initialSettings` object exposes configuration parameters from the **Epic Games Pixel Streaming frontend**. These settings are forwarded directly to the underlying Pixel Streaming infrastructure used by the WebSDK. Because Arcware Cloud manages parts of the streaming infrastructure automatically, **not all parameters exposed by the upstream Pixel Streaming frontend are recommended or meaningful when used with Arcware Cloud**. Settings generally fall into three categories: 1. **Recommended Settings** – safe and commonly used with Arcware Cloud 2. **Advanced Pixel Streaming Settings** – supported but rarely needed 3. **Platform Controlled Settings** – usually overridden by Arcware Cloud configuration The upstream Pixel Streaming documentation can be found here: The WebSDK forwards the `initialSettings` object to the Pixel Streaming frontend. Parameters introduced in newer versions of the Pixel Streaming infrastructure may work automatically even if they are not explicitly listed here. *** ### Recommended Settings These settings are tested and commonly used with Arcware Cloud. | Setting | Type | Default | Description | | -------------------- | ------- | ------- | -------------------------------------------------------------------- | | AutoConnect | boolean | false | Automatically starts the connection to a streaming instance | | AutoPlayVideo | boolean | true | Automatically starts video playback once the stream is ready | | StartVideoMuted | boolean | true | Starts the video muted to avoid browser autoplay restrictions | | HoveringMouse | boolean | true | Allows the cursor to hover instead of locking it inside the player | | FakeMouseWithTouches | boolean | false | Converts touch input to mouse events | | KeyboardInput | boolean | true | Enables keyboard input forwarding | | MouseInput | boolean | true | Enables mouse input forwarding | | TouchInput | boolean | true | Enables touch input forwarding | | GamepadInput | boolean | true | Enables gamepad input forwarding | | XRControllerInput | boolean | true | Enables XR controller input forwarding | | SuppressBrowserKeys | boolean | true | Prevents browser keyboard shortcuts from interfering with the stream | | UseMic | boolean | true | Enables microphone input forwarding | | ForceMonoAudio | boolean | false | Forces mono audio output | *** ### Advanced Pixel Streaming Settings These parameters originate from the Pixel Streaming infrastructure and are available through the WebSDK. They should only be modified if their behavior and implications are fully understood. | Setting | Type | Description | | ---------------- | ------ | ------------------------------------------------------- | | WebRTCFPS | number | Target framerate for the WebRTC stream | | WebRTCMinBitrate | number | Minimum bitrate for WebRTC streaming | | WebRTCMaxBitrate | number | Maximum bitrate for WebRTC streaming | | MinQP | number | Minimum encoder quantization parameter | | MaxQP | number | Maximum encoder quantization parameter | | MinQuality | number | Minimum allowed quality level | | MaxQuality | number | Maximum allowed quality level | | PreferredCodec | string | Preferred video codec used by the stream | | PreferredQuality | number | Preferred quality level when quality control is enabled | | StreamerId | string | Identifier of the streamer to connect to | Changing these values may affect: * bandwidth consumption * visual quality * latency * stream stability In most Arcware Cloud deployments these parameters are automatically optimized by the platform. *** ### Platform Controlled Settings Some parameters exist in the Pixel Streaming frontend but are typically controlled by the Arcware Cloud platform. If configured in code, they may be overridden by platform settings. | Setting | Type | Description | | --------------- | ------- | --------------------------------------- | | TimeoutIfIdle | boolean | Enables AFK detection | | AFKTimeout | number | Idle timeout in seconds | | AFKCountdown | number | Countdown duration before disconnection | | ForceTURN | boolean | Forces TURN relay usage | | WaitForStreamer | boolean | Waits for streamer availability | AFK behavior and relay usage are controlled through **Arcware Cloud project or Share ID settings**. *** ### Signalling Server The signalling server parameter is internally handled by the WebSDK. | Setting | Type | Description | | ------- | ------ | -------------------------------------- | | ss | string | WebSocket URL of the signalling server | Example: ``` wss://signalling-client.ragnarok.arcware.cloud ``` This parameter should not be modified manually when using Arcware Cloud. ## 2.2 settings (Arcware-specific settings) The `settings` object configures **Arcware WebSDK specific features**. Example: ```typescript settings: { fullscreenButton: true, audioButton: true } ``` *** ## UI Controls | Setting | Type | Default | Description | | ---------------------- | ------- | ------- | --------------------------------- | | fullscreenButton | boolean | true | Show fullscreen button | | settingsButton | boolean | false | Show settings menu | | infoButton | boolean | false | Show debug overlay | | audioButton | boolean | true | Show audio toggle | | micButton | boolean | false | Show microphone toggle | | stopButton | boolean | false | Show stop stream button | | connectionStrengthIcon | boolean | false | Show connection quality indicator | Note: The connection strength indicator is derived from browser heuristics and may not accurately reflect network quality. *** ## Session Parameters | Setting | Type | Description | | --------- | ------ | ---------------------------------------------- | | session | string | Manually specify session ID | | token | string | Platform authentication token | | shareId | string | Share identifier used to start a stream | | projectId | string | Required if Share ID maps to multiple projects | *** ## Display Settings | Setting | Type | Description | | ----------- | ------ | ------------------------------- | | startWidth | number | Preferred instance start width | | startHeight | number | Preferred instance start height | *** ## orientationZoom Type: ```typescript { landscape: number portrait: number } ``` Example: ```javascript orientationZoom: { landscape: 1, portrait: 1.5 } ``` This setting sends zoom hints to the Unreal application. The Unreal application must implement support for this feature. *** ## White Labelling The WebSDK supports branding customization via the `whiteLabelling` object. Example: ```javascript whiteLabelling: { splashScreenUrl: "/branding/splash.png", loadingIconUrl: "/branding/logo.png", splashScreenMode: "contain" } ``` *** ### White Labelling Schema | Field | Type | Description | | -------------------- | ------- | ------------------------------------------------------ | | splashScreenUrl | string | Image or video displayed while the stream loads | | splashScreenMode | string | Display mode (`contain`, `cover`, `stretch`, `repeat`) | | splashScreenPosition | string | CSS background-position value | | splashScreenBgColor | string | Background color (CSS format) | | loadingIconUrl | string | Custom loading icon | | loadingIconFadeMs | number | Fade animation duration | | hideLoveLetters | boolean | Hide loading messages | | hideAfkOverlay | boolean | Hide AFK countdown overlay | *** ### URL Format All asset URLs must be valid **absolute URLs or relative paths**. Examples: ``` https://example.com/logo.png /assets/logo.png ./branding/splash.jpg ``` Supported file types: ``` png jpg jpeg webp gif bmp tiff mp4 webm ogg ``` *** ## Remote White Labelling If enabled: ``` fetchRemoteWhiteLabelling: true ``` The WebSDK will request branding configuration from the Arcware backend and apply it dynamically. *** ## URL-based White Labelling If `useUrlParams` is enabled, branding configuration can also be provided via URL: ``` ?wl= ``` Example decoded object: ```json { "loadingIconUrl": "/logo.png", "splashScreenUrl": "/background.png" } ``` # Full configuration example - ArcwareInit The following example demonstrates a full configuration using `ArcwareInit`. Values shown here reflect common defaults and recommended settings for most integrations. ```javascript import { ArcwareInit } from "@arcware-cloud/pixelstreaming-websdk"; const { Config, PixelStreaming, Application } = ArcwareInit( { shareId: "", projectId: "" }, { initialSettings: { ss: "wss://signalling-client.ragnarok.arcware.cloud", // default Arcware signalling server (can be omitted) AutoConnect: true, AutoPlayVideo: true, StartVideoMuted: true, HoveringMouse: true, FakeMouseWithTouches: false, SuppressBrowserKeys: true, KeyboardInput: true, MouseInput: true, TouchInput: true, GamepadInput: true, XRControllerInput: true, UseMic: true, ForceMonoAudio: false, MatchViewportRes: false, TimeoutIfIdle: true }, settings: { fullscreenButton: true, settingsButton: true, infoButton: false, audioButton: true, micButton: true, stopButton: false, connectionStrengthIcon: false, loveLetterLogging: false, startWidth: 1920, startHeight: 1080, orientationZoom: { landscape: 1, portrait: 1 }, whiteLabelling: { splashScreenUrl: "./branding/splash-screen.jpg", splashScreenMode: "contain", splashScreenPosition: "center", splashScreenBgColor: "#000000", loadingIconUrl: "./branding/loading-icon.png", loadingIconFadeMs: 1000, hideLoveLetters: false, hideAfkOverlay: false }, fetchRemoteWhiteLabelling: false } } ); ``` #### Required Values | Field | Description | | ----------- | ------------------------------------------------------------------- | | `shareId` | Share ID generated in the Arcware Cloud platform | | `projectId` | Optional project identifier if a Share ID maps to multiple projects | #### Default Asset Paths The following relative paths are commonly used when hosting branding assets alongside the web application. ``` ./branding/splash-screen.jpg ./branding/loading-icon.png ./branding/logo.png ``` Assets may also be hosted on external servers using absolute URLs. Example: ``` https://example.com/assets/splash-screen.jpg https://cdn.example.com/branding/loading-icon.png ``` #### Typical Usage After initialization, the returned objects can be used to attach the stream to the DOM and interact with the Unreal Engine application. Example: ```javascript document .getElementById("video-container") .appendChild(Application.rootElement); ``` Messages can be sent to the Unreal Engine application using: ```javascript Application.emitUIInteraction({ action: "example" }); ``` # Full configuration example - CoreSetup The following example demonstrates initialization using the **core SDK path** with `CoreSetup`. This setup is **headless**, meaning no default UI or application layer is created. It is intended for advanced integrations where full control over the streaming lifecycle and UI is required. ```javascript import { CoreSetup } from "@arcware-cloud/pixelstreaming-websdk/core"; const { Config, PixelStreaming } = CoreSetup( { shareId: "", projectId: "" }, { initialSettings: { ss: "wss://signalling-client.ragnarok.arcware.cloud", // default Arcware signalling server (can be omitted as the SDK uses this by default) AutoConnect: true, AutoPlayVideo: true, StartVideoMuted: true, HoveringMouse: true, FakeMouseWithTouches: false, SuppressBrowserKeys: true, KeyboardInput: true, MouseInput: true, TouchInput: true, GamepadInput: true, XRControllerInput: true, UseMic: true, ForceMonoAudio: false, MatchViewportRes: false, TimeoutIfIdle: true }, settings: { fullscreenButton: true, settingsButton: true, infoButton: false, audioButton: true, micButton: true, stopButton: false, connectionStrengthIcon: false, loveLetterLogging: false, startWidth: 1920, startHeight: 1080, orientationZoom: { landscape: 1, portrait: 1 }, whiteLabelling: { splashScreenUrl: "./branding/splash-screen.jpg", splashScreenMode: "contain", splashScreenPosition: "center", splashScreenBgColor: "#000000", loadingIconUrl: "./branding/loading-icon.png", loadingIconFadeMs: 1000, hideLoveLetters: false, hideAfkOverlay: false }, fetchRemoteWhiteLabelling: false } } ); ``` #### Required Values | Field | Description | | ----------- | ------------------------------------------------------------------- | | `shareId` | Share ID generated in the Arcware Cloud platform | | `projectId` | Optional project identifier if a Share ID maps to multiple projects | #### Default Asset Paths The following relative paths are commonly used when hosting branding assets alongside the web application. ``` ./branding/splash-screen.jpg ./branding/loading-icon.png ./branding/logo.png ``` Assets may also be hosted using absolute URLs. Example: ``` https://example.com/assets/splash-screen.jpg https://cdn.example.com/branding/loading-icon.png ``` #### Typical Usage After initialization, the streaming element can be attached to the DOM using the PixelStreaming instance. ```javascript document .getElementById("video-container") .appendChild(PixelStreaming.rootElement); ``` The headless setup allows full control over how the stream, UI, and interaction logic are implemented in the application. # Interacting with Unreal Engine ## Interacting with Unreal Engine One of the core capabilities of the **Arcware Pixel Streaming WebSDK** is enabling **direct communication between your web application and the Unreal Engine application** running on the streaming instance. This allows your web interface to control the Unreal experience in real time — for example by triggering gameplay actions, changing settings, switching scenes, or sending custom commands. This interaction happens through **bidirectional messaging over the WebRTC data channel**. *** ## Overview The WebSDK enables two main interaction flows: | Direction | Purpose | | ------------------- | -------------------------------------------- | | Web → Unreal Engine | Send commands or UI events | | Unreal Engine → Web | Receive responses or data from Unreal Engine | These interactions are handled through the **PixelStreaming instance**. | Method / Handler | Purpose | | ---------------------------- | -------------------------------------------------------- | | `emitUIInteraction()` | Send a message from the web application to Unreal Engine | | `applicationResponseHandler` | Receive responses sent from Unreal Engine | These APIs form the foundation for building **custom UI controls**, dashboards, menus, or any other web-based interaction with your Unreal Engine experience. *** ## Sending Messages to Unreal Engine To send input or commands to Unreal Engine, use the `emitUIInteraction()` method. This method is exposed by the **PixelStreaming instance** and works the same way for both: * **UI integrations (`ArcwareInit`)** * **headless integrations (`CoreSetup`)** ```typescript PixelStreaming.emitUIInteraction(descriptor: object | string): void ``` The `descriptor` can be either: | Type | Description | | ------ | --------------------------------- | | object | JSON object sent to Unreal Engine | | string | Raw string message | The exact structure depends on how your Unreal Engine project handles incoming messages. *** ## Basic Example ```javascript PixelStreaming.emitUIInteraction({ action: "Jump" }); ``` Unreal Engine can then interpret this message and trigger the corresponding gameplay logic. *** ## Example: UI Button Trigger ```javascript document.getElementById("jump-button").addEventListener("click", () => { PixelStreaming.emitUIInteraction({ action: "Jump" }); }); ``` Example HTML: ```html ``` *** ## Example: Structured Command Commands can contain structured payloads. ```javascript PixelStreaming.emitUIInteraction({ type: "playerAction", payload: { action: "Teleport", location: { x: 120, y: 340, z: 50 } } }); ``` This approach allows you to design a flexible communication protocol between your frontend and Unreal Engine. *** ## Sending a Simple String Message If preferred, messages can also be sent as plain strings. ```javascript PixelStreaming.emitUIInteraction("openMenu"); ``` Unreal Engine can interpret this string according to the project’s logic. *** ## Receiving Responses from Unreal Engine The PixelStreaming instance exposes a response handler that allows your web application to react to messages sent from Unreal Engine. ```typescript PixelStreaming.applicationResponseHandler?: (response: string) => void ``` Whenever Unreal Engine sends a response through the WebRTC data channel, this handler will be invoked. *** ## Example: Handling Unreal Responses ```javascript PixelStreaming.applicationResponseHandler = (response) => { console.log("Received response from Unreal Engine:", response); }; ``` *** ## Example: Updating the UI Unreal Engine can send application state updates back to the web interface. ```javascript PixelStreaming.applicationResponseHandler = (response) => { const data = JSON.parse(response); if (data.type === "scoreUpdate") { document.getElementById("score").innerText = data.value; } }; ``` Example UI: ```html
Score: 0
``` *** ## Example: Screenshot Workflow ```javascript PixelStreaming.emitUIInteraction({ CreateScreenshot: "1920x1080" }); ``` When Unreal Engine processes this request, it can generate the screenshot and send a response message back to the browser. The response will be received through the `applicationResponseHandler`. *** ## How the Messaging Works All communication is transmitted through the **WebRTC data channel** established when the Pixel Streaming connection is created. ``` Web Browser ↓ WebSDK (PixelStreaming) ↓ WebRTC Data Channel ↓ Unreal Engine Application ``` Because this channel stays active while the stream is connected, messages can be exchanged continuously with very low latency. *** ## Important Considerations The WebSDK is responsible for **transmitting messages** between the browser and the Unreal Engine instance. Your Unreal Engine project must implement the logic to: * receive incoming messages * interpret command structures * execute gameplay or application logic * send responses back to the browser Without corresponding handlers in Unreal Engine, messages sent via `emitUIInteraction()` will not trigger any behavior. *** ## Unreal Engine Setup Instructions on how to configure Unreal Engine to process WebSDK messages can be found here: [Pixel Streaming Input / Json messages](/unreal-engine-setup/set-up-pixel-streaming-in-your-own-project/core-settings/pixel-streaming-input-json-messages) # In depth In these sub pages we'll try to cover some modules in depth. {% content-ref url="/pages/8UqwO8RPjSAnZAzFpm1w" %} [Websocket close codes](/web-integration/new-websdk/in-depth/events-handlers/websocket-close-codes) {% endcontent-ref %} {% content-ref url="/pages/sJbg2BRK1FlBTfleRWrx" %} [Events handlers](/web-integration/new-websdk/in-depth/events-handlers) {% endcontent-ref %} {% content-ref url="/pages/n9LrqDRDcSz2fme0IBzo" %} [Disconnect](/web-integration/new-websdk/in-depth/disconnect) {% endcontent-ref %} {% content-ref url="/pages/thyItl4gamGMcOFkag6Z" %} [Broken mention](broken://pages/thyItl4gamGMcOFkag6Z) {% endcontent-ref %} {% content-ref url="/pages/TETSeHHJqh8IGQlGJKbp" %} [Broken mention](broken://pages/TETSeHHJqh8IGQlGJKbp) {% endcontent-ref %} {% content-ref url="/pages/YtquOKxyr0rP10z01qz1" %} [AFK Module](/web-integration/new-websdk/in-depth/afk-module) {% endcontent-ref %} # URL Query Parameters The Arcware Pixel Streaming WebSDK supports several **URL query parameters** that influence how the SDK initializes and behaves at runtime. These parameters are mainly intended for: * debugging * testing * white-labelling * session control * developer tools Some parameters affect **only the UI integration (`ArcwareInit`)**, while others affect **both UI and Core integrations (`CoreSetup`)**. *** ## Overview | Parameter | Applies To | Description | | ------------ | ---------- | ------------------------------------------------ | | `i` / `info` | UI only | Shows the debug information overlay | | `wl` | UI only | Enables or injects white-labelling configuration | | `noSession` | UI + Core | Prevents reuse of an existing session | | `session` | UI + Core | Forces usage of a specific session | | `reconnect` | UI + Core | Attempts to reconnect to a previous session | These parameters are only interpreted when: ```typescript useUrlParams: true ``` is enabled in the SDK configuration. *** ## UI Debug Overlay ### `?i` or `?info` Enables the **debug information overlay** in the default WebSDK UI. Example: ``` https://example.com/?i ``` or ``` https://example.com/?info ``` #### Applies to | Mode | Supported | | -------------------- | --------- | | ArcwareInit (UI) | ✔ | | CoreSetup (Headless) | ✖ | The debug overlay may display information such as: * FPS * bitrate * WebRTC connection statistics * resolution * latency information This overlay is intended for **debugging and diagnostics**. *** ## White Labelling via URL ### `?wl` The `wl` parameter enables **white-labelling configuration through the URL**. Example: ``` https://example.com/?wl ``` or ``` https://example.com/?wl= ``` #### Applies to | Mode | Supported | | ---------------- | --------- | | ArcwareInit (UI) | ✔ | | CoreSetup | ✔ | *** ### Enabling Remote White Labelling When the parameter is present without a value: ``` ?wl ``` the SDK automatically enables: ```javascript fetchRemoteWhiteLabelling: true ``` The SDK will request branding configuration from the Arcware backend. *** ### Providing White Labelling via URL The parameter can also contain a **base64-encoded JSON configuration object**. Example URL: ``` https://example.com/?wl=eyJsb2FkaW5nSWNvb... ``` Decoded example: ```json { "loadingIconUrl": "/branding/logo.png", "splashScreenUrl": "/branding/splash.jpg", "splashScreenMode": "contain" } ``` *** ## Session Control The WebSDK normally manages sessions automatically. These parameters allow manual control of session behavior. *** ### `?noSession` Disables session reuse and forces the SDK to **start without restoring a previous session**. Example: ``` https://example.com/?noSession ``` #### Applies to | Mode | Supported | | ----------- | --------- | | ArcwareInit | ✔ | | CoreSetup | ✔ | This is useful for testing scenarios where a clean instance should always be started. *** ### `?session=` Forces the SDK to connect using a specific session ID. Example: ``` https://example.com/?session=abc123 ``` #### Applies to | Mode | Supported | | ----------- | --------- | | ArcwareInit | ✔ | | CoreSetup | ✔ | If the session exists and is still active, the SDK will reconnect to that session. *** ### `?reconnect` Attempts to reconnect to a previously known session. Example: ``` https://example.com/?reconnect ``` #### Applies to | Mode | Supported | | ----------- | --------- | | ArcwareInit | ✔ | | CoreSetup | ✔ | If no valid session is found, a new session will be created automatically. *** ## Interaction with `useUrlParams` URL parameters are only interpreted if the SDK configuration enables URL parsing. Example: ```javascript ArcwareInit( { shareId: "" }, { useUrlParams: true } ); ``` If `useUrlParams` is disabled, query parameters will be ignored. *** ## Example URLs ### Enable debug overlay ``` https://example.com/?i ``` *** ### Enable white labelling ``` https://example.com/?wl ``` *** ### Provide custom white labelling ``` https://example.com/?wl= ``` *** ### Force new session ``` https://example.com/?noSession ``` *** ### Reconnect to session ``` https://example.com/?session=abc123 ``` *** ## Notes * Query parameters are primarily intended for **debugging and advanced usage**. * Production applications typically configure behavior through **SDK configuration rather than URL parameters**. * Parameters affecting the UI (such as `?i`) have no effect when using **headless CoreSetup integrations**. # Events handlers How to recognize that the stream is ready? The Arcware Pixel Streaming WebSDK exposes several **event handlers** that allow your web application to react to changes in the streaming lifecycle. These handlers can be used to implement: * loading screens * queue interfaces * connection monitoring * error handling * session tracking * analytics and debugging Event handlers are exposed on the **PixelStreaming instance** and are available to both: | Mode | Supported | | -------------------------------- | --------- | | ArcwareInit (UI integration) | ✔ | | CoreSetup (Headless integration) | ✔ | Handlers are typically implemented using the `.add()` method. Example: ```typescript PixelStreaming.someHandler.add((event) => { console.log(event); }); ``` Multiple listeners can be attached to the same handler. *** ## VideoInitialized Triggered when the video stream becomes available and the **first frame starts rendering**. This event indicates that: * the WebRTC connection is established * the stream is active * rendering has started Typical uses: * hide loading overlays * start UI timers * enable UI controls * begin analytics tracking Example: ```typescript PixelStreaming.videoInitializedHandler.add(() => { console.log("Video initialized"); }); ``` Example usage: ```typescript PixelStreaming.videoInitializedHandler.add(() => { document.getElementById("loading-overlay").style.display = "none"; }); ``` *** ## queueHandler Triggered when the user enters or moves within the **Arcware streaming queue**. The queue is used when all streaming instances are currently occupied. Instead of immediately launching a new instance, the user is placed in a queue until a streaming slot becomes available. This handler allows applications to display **custom queue interfaces**. Example: ```typescript PixelStreaming.queueHandler.add((message) => { console.log("Queue update:", message); }); ``` Queue payload: ```typescript export interface Queue { type: "queue"; queue: { /** Position in queue (zero based). */ index?: number; /** Length of the queue. */ queueLength?: number; /** Already waited for. */ waited?: number; /** Estimated wait time. */ estimatedWaitTime?: number | null; /** Average wait time. */ averageWaitTime?: number | null; /** Type of all time-values in the queue. */ valueType: QueueValueType; }; } export type QueueValueType = | "milliseconds" | "seconds" | "minutes" | "hours" | "days"; ``` Meaning of the fields: | Field | Type | Description | | ------------------------- | ----------------------------- | --------------------------------------- | | `type` | `"queue"` | Identifies the message as a queue event | | `queue.index` | `number \| undefined` | Current position in queue, zero-based | | `queue.queueLength` | `number \| undefined` | Total queue length | | `queue.waited` | `number \| undefined` | Time already waited | | `queue.estimatedWaitTime` | `number \| null \| undefined` | Estimated remaining wait time | | `queue.averageWaitTime` | `number \| null \| undefined` | Average wait time | | `queue.valueType` | `QueueValueType` | Unit used for all time values | Example usage: ```typescript PixelStreaming.queueHandler.add((message) => { const index = message.queue.index ?? 0; const queueLength = message.queue.queueLength ?? 0; const waited = message.queue.waited ?? 0; const unit = message.queue.valueType; document.getElementById("queue-position").innerText = `Position in queue: ${index + 1} / ${queueLength}`; document.getElementById("queue-waited").innerText = `Already waited: ${waited} ${unit}`; }); ``` Example UI: ```html

``` Typical queue lifecycle: ```` User connects ↓ All instances occupied ↓ User enters queue ↓ Queue updates (position changes) ↓ Instance becomes available ↓ User leaves queue ↓ Stream starts ```
`estimatedWaitTime` and `averageWaitTime` are still experimental and should currently not be relied on for production-facing UI.
--- # errorHandler Triggered when an **error occurs during the streaming lifecycle**. This includes errors originating from: * WebRTC connection failures * Pixel Streaming infrastructure errors * Arcware backend messages Example: ```typescript PixelStreaming.errorHandler.add((error) => { console.error("Streaming error:", error); }); ```` Example usage: ```typescript PixelStreaming.errorHandler.add((error) => { console.error("Streaming error:", error); alert("A streaming error occurred."); }); ``` *** ## sessionIdHandler Triggered when the streaming session receives a **session identifier**. The session ID uniquely identifies the active streaming session. This can be useful for: * analytics * logging * reconnect workflows * debugging Example: ```typescript PixelStreaming.sessionIdHandler.add((sessionId) => { console.log("Session ID:", sessionId); }); ``` Example usage: ```typescript PixelStreaming.sessionIdHandler.add((sessionId) => { localStorage.setItem("streamSession", sessionId); }); ``` *** ## loveLetterHandler Triggered when the backend sends a **Love Letter** describing the current connection stage. These messages are status updates sent by the backend while the stream is being prepared. They are especially useful for: * custom loading overlays * connection progress messaging * debugging startup issues Example: ```typescript PixelStreaming.loveLetterHandler.add((message) => { console.log("Love Letter:", message); }); ``` Love Letter payload: ```typescript export interface LoveLetter { type: "letter"; reason: string; // must start with "LL: " code: number; verbosity: number; } ``` Meaning of the fields: | Field | Type | Description | | ----------- | ---------- | ----------------------------------------------------------------- | | `type` | `"letter"` | Identifies the message as a Love Letter | | `reason` | `string` | Human-readable status message. Starts with `"LL: "` | | `code` | `number` | Numeric code representing the current loading or connection state | | `verbosity` | `number` | Indicates how verbose or detailed the message is | Example usage: ```typescript PixelStreaming.loveLetterHandler.add((message) => { document.getElementById("loading-message").innerText = message.reason; }); ``` Example UI: ```html

Starting stream...

``` These messages are commonly used to implement **custom loading screens** or connection progress indicators. *** ## applicationResponseHandler Triggered when Unreal Engine sends a **response message to the browser**. This is the main mechanism used for **bidirectional communication between the web UI and Unreal Engine**. Example: ```typescript PixelStreaming.applicationResponseHandler = (response) => { console.log("Response from Unreal:", response); }; ``` Responses are typically strings but often contain serialized JSON. Example: ```typescript PixelStreaming.applicationResponseHandler = (response) => { const data = JSON.parse(response); if (data.type === "scoreUpdate") { document.getElementById("score").innerText = data.value; } }; ``` Example UI: ```html
Score: 0
``` *** ## websocketOnCloseHandler Triggered when the **WebSocket connection to the signalling server is closed**. This event indicates that the streaming session has ended or the connection has been interrupted. Possible reasons include: * the user disconnected * the instance stopped * network connectivity issues * backend session termination Example: ```typescript PixelStreaming.websocketOnCloseHandler.add((event) => { console.log("WebSocket closed:", event); }); ``` Typical usage: ```typescript PixelStreaming.websocketOnCloseHandler.add(() => { document.getElementById("connection-status").innerText = "Connection closed"; }); ``` This handler can be used to: * display reconnect options * redirect the user * show a connection lost screen * trigger cleanup logic *** ## whiteLabellingChangedHandler Triggered whenever **white-labelling configuration is applied or updated**. White-labelling may be applied from different sources: * SDK configuration * backend-provided branding * URL-based configuration (`?wl`) * runtime updates Example: ```typescript PixelStreaming.whiteLabellingChangedHandler.add((whiteLabel) => { console.log("White labelling updated:", whiteLabel); }); ``` Typical usage: ```typescript PixelStreaming.whiteLabellingChangedHandler.add((whiteLabel) => { if (whiteLabel.splashScreenBgColor) { document.body.style.backgroundColor = whiteLabel.splashScreenBgColor; } }); ``` This handler allows applications to react when branding settings change dynamically. *** ## postInitSideEffectsHandler Triggered after the WebSDK has completed its **initial setup and post-initialization tasks**. This event occurs after the SDK has finished applying configuration and preparing the streaming environment. Example: ```typescript PixelStreaming.postInitSideEffectsHandler.add(() => { console.log("Post initialization completed"); }); ``` Typical usage: ```typescript PixelStreaming.postInitSideEffectsHandler.add(() => { console.log("SDK fully initialized"); }); ``` This handler is useful for: * initializing UI elements that depend on the SDK * starting custom analytics tracking * running post-initialization logic *** ## fileTransferHandler Triggered when **Unreal Engine sends a file to the browser through the Pixel Streaming data channel**. This feature allows Unreal Engine to transfer files directly to the client. Typical use cases include: * screenshot downloads * exporting generated assets * sending generated reports or data files Example: ```typescript PixelStreaming.fileTransferHandler.add((file) => { console.log("Received file:", file); }); ``` The received file information can be accessed through the WebSDK. Core method: ```typescript PixelStreaming.getIncomingFile() ``` The returned object typically contains: ```typescript { data: Uint8Array[], mimetype: string, extension: string, filename?: string } ``` #### UI Integration Behavior When using the **UI integration (`ArcwareInit`)**, the WebSDK automatically downloads incoming files for the user. This means that files sent from Unreal Engine will appear as normal browser downloads without additional implementation. #### Core Integration Behavior When using **CoreSetup**, file handling must be implemented manually. Core users can retrieve the incoming file and decide how to handle it. Example: manual download ```typescript PixelStreaming.fileTransferHandler.add(() => { const file = PixelStreaming.getIncomingFile(); const blob = new Blob(file.data, { type: file.mimetype }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = file.filename ?? `download${file.extension}`; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); }); ``` Core integrations can also use the built-in download helper to mirror the same behavior as the default UI integration: ```typescript PixelStreaming.fileTransferHandler.add(() => { PixelStreaming.fileDownload(); }); ``` ### Fully Custom File Handling Core integrations are not limited to browser downloads. Applications can: * parse the file contents * open custom dialogs * display previews * upload files to external servers * store files locally * process them programmatically Example: uploading to an API endpoint ```typescript PixelStreaming.fileTransferHandler.add(async () => { const file = PixelStreaming.getIncomingFile(); const blob = new Blob(file.data, { type: file.mimetype }); const formData = new FormData(); formData.append("file", blob, file.filename ?? "upload"); await fetch("/api/upload", { method: "POST", body: formData }); }); ``` This allows the WebSDK to integrate with workflows such as: * asset pipelines * data exports * automated reporting * cloud storage uploads. *** ## Using Multiple Handlers Multiple handlers can be attached to the same event. Example: ```typescript PixelStreaming.videoInitializedHandler.add(() => { console.log("Stream ready"); }); PixelStreaming.videoInitializedHandler.add(() => { startAnalyticsTracking(); }); ``` All registered handlers will be executed when the event occurs. *** ## Typical Event Lifecycle The following illustrates the typical order of events when starting a stream: ``` Connection initiated ↓ loveLetterHandler ↓ queueHandler (if queue is active) ↓ sessionIdHandler ↓ videoInitializedHandler ↓ Stream ready ``` During the session: ``` User interacts ↓ emitUIInteraction ↓ Unreal processes event ↓ applicationResponseHandler ``` These handlers allow developers to build **fully custom streaming interfaces and control logic** around the WebSDK. # Websocket close codes How to handle "Ticket destroyed" type of events? To keep a session between Arcware and the client browser alive, there is an established websocket connection. The websocket transport can close for various reasons, which can be intentional or unintential. Also Arcware has reasons to forcefully close the connection from server side. In case you need to catch websocket closure, e.g. to re-establish connection or to track the event for reporting or monitoring, here you will find the codes that will be provided: ```typescript // Assuming you have your PixelStreaming of ArcwareInit available PixelStreaming.websocketOnCloseHandler.add((event: CloseEvent) => { console.log(`WebSocket closed. CloseCode: ${event.code} Reason: ${event.reason}`); }); ``` The WebSocket default close codes can be found [here](https://github.com/Luka967/websocket-close-codes). Below you'll find a list of close codes custom to Arcware: ```typescript export enum CloseCode { UNAUTHORIZED = 4450, UNAUTHORIZED_NO_BYPASS_REGISTERED = 4451, /** Unauthorized DirectFlow attempt. */ UNAUTHORIZED_DF = 4452, SUSPENDED = 4453, TRIAL_LIMIT = 4460, MAX_RUNTIME = 4461, SESSION_NOT_FOUND = 4470, UNKNOWN_PROJECT = 4471, PROJECT_DISABLED = 4472, STREAM_DELETED = 4473, NO_STREAM_AVAILABLE = 4501, NO_PACKAGENAME_PROVIDED = 4502, STREAM_DISCONNECTED = 4503, STREAM_KEY_ALREADY_CONNECTED = 4504, CLIENT_OCCUPATION_LIMIT_REACHED = 4505, CLIENT_AFK = 4506, CLIENT_RECONNECTING = 4507, CLIENT_NO_PONG = 4508, CLIENT_DESTROYED = 4509, CLIENT_WITHOUT_TICKET = 4510, CLOSE_ABNORMAL_CUSTOM = 4606, CLOSE_SHARE_NO_RESOURCES_LEFT = 4607, CLOSE_SHARE_ERROR = 4608, CLOSE_INTERNAL_SERVER_ERROR = 4666 } ``` # Public methods ArcwarePixelStreaming This page documents the public methods exposed by: * `ArcwarePixelStreaming` It focuses on methods provided by the Arcware SDK layer. Methods inherited from Epic’s underlying Pixel Streaming libraries are not exhaustively listed here, with one important exception: `emitUIInteraction()`, because it is central to most integrations. *** ## ArcwarePixelStreaming `ArcwarePixelStreaming` is the core streaming class used by both: * `ArcwareInit` * `CoreSetup` It is the main place for: * stream control * messaging * analytics * file transfer * audio and microphone control * connection lifecycle *** ### emitUIInteraction Although this method is inherited from the underlying Pixel Streaming implementation, it is one of the most important methods available on `ArcwarePixelStreaming` and is the recommended way to send messages from the web application to Unreal Engine. ```typescript PixelStreaming.emitUIInteraction(descriptor: object | string): void ``` #### Parameters | Parameter | Type | Description | | ------------ | ------------------ | ----------------------------- | | `descriptor` | `object \| string` | Message sent to Unreal Engine | #### Example ```typescript PixelStreaming.emitUIInteraction({ action: "Jump" }); ``` ```typescript PixelStreaming.emitUIInteraction("openMenu"); ``` This method should be used by both: * UI integrations * Core / headless integrations *** ### reconnect Reconnects the stream. ```typescript PixelStreaming.reconnect(): void ``` This method reuses the existing stream object and reinitializes internal readiness tracking. #### Example ```typescript PixelStreaming.reconnect(); ``` Typical use cases: * reconnect button * manual retry after connection loss * refreshing the current connection without rebuilding the SDK objects *** ### removePlayer Stops the stream and removes internal transport and rendering hooks. ```typescript PixelStreaming.removePlayer(): void ``` This method performs cleanup and disconnects the stream. #### Example ```typescript PixelStreaming.removePlayer(); ``` Typical use cases: * component unmount cleanup * fully leaving a stream * destroying a stream before creating a new one *** ### send Sends a message to the backend signalling pipeline. ```typescript PixelStreaming.send(type: string, payload?: Record): void ``` ```typescript PixelStreaming.send(message: { type: string } & Record): void ``` #### Parameters | Parameter | Type | Description | | --------- | -------------------------------------------- | ----------------------- | | `type` | `string` | Message type | | `payload` | `Record` | Optional payload object | | `message` | `{ type: string } & Record` | Full message object | #### Examples ```typescript PixelStreaming.send("render"); ``` ```typescript PixelStreaming.send("customType", { value: 123 }); ``` ```typescript PixelStreaming.send({ type: "version" }); ``` This is a lower-level method and is mainly useful when working with the Arcware signalling protocol directly. For Unreal Engine UI interaction, use `emitUIInteraction()` instead. *** ### sendAnalyticsEvent Sends an analytics event and also emits it through the local analytics handler. ```typescript PixelStreaming.sendAnalyticsEvent(event: AnalyticsEvent): void ``` #### Parameters | Parameter | Type | Description | | --------- | ---------------- | ----------------------- | | `event` | `AnalyticsEvent` | Analytics event payload | #### Example ```typescript PixelStreaming.sendAnalyticsEvent({ type: "event", customName: "button_clicked", payload: JSON.stringify({ id: 42 }) }); ``` Use this when frontend interactions should be tracked consistently with Unreal-originated analytics events. *** ### getIncomingFile Returns the most recently received file sent from Unreal Engine. ```typescript PixelStreaming.getIncomingFile(): FileTemplate ``` #### Example ```typescript const file = PixelStreaming.getIncomingFile(); console.log(file?.mimetype); ``` This method is typically used together with `fileTransferHandler`. *** ### fileDownload Triggers a browser download for the most recently received file. ```typescript PixelStreaming.fileDownload(filename?: string): void ``` #### Parameters | Parameter | Type | Description | | ---------- | --------------------- | ------------------------------------------ | | `filename` | `string \| undefined` | Optional custom filename without extension | #### Example ```typescript PixelStreaming.fileTransferHandler.add(() => { PixelStreaming.fileDownload(); }); ``` ```typescript PixelStreaming.fileTransferHandler.add(() => { PixelStreaming.fileDownload("my-export"); }); ``` This is the easiest way for Core users to replicate the default UI file download behavior. *** ### setAudioEnabled Enables or disables audio playback. ```typescript PixelStreaming.setAudioEnabled(enabled: boolean): void ``` #### Parameters | Parameter | Type | Description | | --------- | --------- | -------------------------------------------- | | `enabled` | `boolean` | `true` enables audio, `false` disables audio | #### Example ```typescript PixelStreaming.setAudioEnabled(true); ``` This method uses a direct enabled/disabled semantic. *** ### toggleAudio Toggles audio muting on the current video and audio elements. ```typescript PixelStreaming.toggleAudio(videoElement: HTMLVideoElement, enabled: boolean): void ``` #### Parameters | Parameter | Type | Description | | -------------- | ------------------ | ------------------------------------------------ | | `videoElement` | `HTMLVideoElement` | Video element associated with the stream | | `enabled` | `boolean` | Mute state as used by the current implementation | #### Example ```typescript const video = document.querySelector("video"); if (video) { PixelStreaming.toggleAudio(video, false); } ``` `setAudioEnabled()` is usually easier to use in application code. *** ### toggleMic Enables or disables microphone usage. ```typescript PixelStreaming.toggleMic(enable: boolean, isDefault: boolean): void ``` #### Parameters | Parameter | Type | Description | | ----------- | --------- | ------------------------------------------------------------ | | `enable` | `boolean` | Enables or disables microphone input | | `isDefault` | `boolean` | If `false`, the stream reconnects so the change takes effect | #### Example ```typescript PixelStreaming.toggleMic(true, false); ``` When microphone state is changed manually, the stream reconnects to apply the new configuration. *** ### onStreamingStateChange Registers a callback that reacts to streaming state changes. ```typescript PixelStreaming.onStreamingStateChange( callback: (isStreaming: boolean) => void ): void ``` #### Parameters | Parameter | Type | Description | | ---------- | -------------------------------- | --------------------------------------- | | `callback` | `(isStreaming: boolean) => void` | Called with the current streaming state | #### Example ```typescript PixelStreaming.onStreamingStateChange((isStreaming) => { console.log("Streaming:", isStreaming); }); ``` This callback is triggered on events such as: * video play * video pause * video end * transport open * transport close *** ### clearSessionId Clears the stored session identifier from local storage. ```typescript ArcwarePixelStreaming.clearSessionId(): void ``` #### Example ```typescript ArcwarePixelStreaming.clearSessionId(); ``` Typical use cases: * forcing a clean new session * logout / reset flows * debugging reconnect behavior # Session Reuse, forceRefresh, and URL Parameters The WebSDK includes built-in logic to **reuse an existing stream session whenever possible**. This behavior is especially important in single-page applications and frontend frameworks where initialization code may run multiple times due to re-renders, remounts, or route changes. Understanding how **session reuse**, **`forceRefresh`**, **`clearSessionId()`**, and URL query parameters such as **`?noSession`** work together is important when deciding whether the SDK should: * reconnect to an existing session * reuse existing SDK objects * create a fresh session * ignore previously stored session state *** ### Two Different Layers of Reuse There are **two separate but related concepts** involved: | Layer | What is reused | | ---------------- | ------------------------------------------------------------------------ | | SDK object reuse | Previously created `Config`, `PixelStreaming`, and `Application` objects | | Session reuse | Previously known streaming session ID | These two layers are related, but they are not the same. *** ### 1. SDK Object Reuse When using `ArcwareInit`, the SDK protects your application from unintentionally creating multiple instances of: * `ArcwareConfig` * `ArcwarePixelStreaming` * `ArcwareApplication` This is particularly useful in frameworks like: * React * Vue * Angular * Svelte where component lifecycle behavior can cause initialization code to run more than once. By default, repeated calls to `ArcwareInit(...)` return the **already existing SDK objects** instead of creating fresh ones. Example: ```typescript const { Config, PixelStreaming, Application } = ArcwareInit( { shareId: "" }, configuration ); ``` If the SDK was already initialized before, this call may return the existing objects. *** ### 2. Session Reuse In addition to object reuse, the SDK can also reuse a **previously known session ID**. This means that even if the connection is interrupted or the page is reloaded, the SDK may attempt to reconnect to the same stream session instead of starting a new one. This behavior is useful for: * reconnect flows * page reloads * temporary network interruptions * preserving stream state *** ## forceRefresh The third parameter of `ArcwareInit` is: ```typescript ArcwareInit(ids, configuration, forceRefresh) ``` If `forceRefresh` is set to `true`, the SDK creates **fresh SDK objects** instead of reusing previous ones. Example: ```typescript const { Config, PixelStreaming, Application } = ArcwareInit( { shareId: "" }, configuration, true ); ``` This affects **SDK object reuse**, not necessarily session reuse. That means: * new `Config`, `PixelStreaming`, and `Application` objects are created * but a previous session may still be reused unless session reuse is also disabled *** ### What forceRefresh Does | Behavior | Result | | --------------------- | --------------------------------------- | | `forceRefresh: false` | Reuse existing SDK objects if available | | `forceRefresh: true` | Always create new SDK objects | *** ### What forceRefresh Does Not Do `forceRefresh` does **not automatically guarantee a fresh backend session**. If a previous session ID is still available and allowed to be reused, the new SDK objects may still reconnect to that session. *** ## clearSessionId The SDK also exposes a method to explicitly remove the stored session ID in code: ```typescript ArcwarePixelStreaming.clearSessionId(); ``` This affects **session reuse**, not object reuse. After calling `clearSessionId()`, the SDK will no longer be able to restore the previously stored session automatically. Typical use cases: * force a clean new session from application code * logout or reset flows * "start over" buttons * testing clean startup behavior without relying on URL parameters Example: ```typescript ArcwarePixelStreaming.clearSessionId(); const { Config, PixelStreaming, Application } = ArcwareInit( { shareId: "" }, configuration, true ); ``` This is the code-based equivalent of disabling reuse of the stored session. *** ## ?noSession The URL parameter: ``` ?noSession ``` tells the SDK to **start without reusing a previously stored session**. This affects **session reuse**, not object reuse. When `?noSession` is present, the SDK should behave as if no previous session exists. Typical use cases: * always start a fresh instance * debugging clean startup behavior * avoiding reconnect into previous state * explicit new-user or new-run flows Example: ``` https://example.com/?noSession ``` This parameter is only interpreted when: ```typescript useUrlParams: true ``` is enabled. *** ## How forceRefresh, clearSessionId, and ?noSession Work Together These mechanisms affect different layers: | Feature | Affects SDK objects | Affects session reuse | | ------------------ | ------------------- | --------------------- | | `forceRefresh` | ✔ | ✖ | | `clearSessionId()` | ✖ | ✔ | | `?noSession` | ✖ | ✔ | This means they can be combined. *** ### Example Scenarios #### Reuse everything ```typescript ArcwareInit(ids, configuration, false) ``` No `?noSession` Result: * existing SDK objects may be reused * existing session may be reused *** #### Fresh SDK objects, but same session may still be reused ```typescript ArcwareInit(ids, configuration, true) ``` No `?noSession` Result: * new SDK objects are created * previous session may still be reused *** #### Same SDK objects, but do not reuse previous session ```typescript ArcwareInit(ids, { ...configuration, useUrlParams: true }, false) ``` URL: ``` ?noSession ``` Result: * existing SDK objects may still be reused * previous session is not reused *** #### Fresh session by code ```typescript ArcwarePixelStreaming.clearSessionId(); ArcwareInit(ids, configuration, false); ``` Result: * existing SDK objects may still be reused * previous stored session is removed and cannot be reused *** #### Fully fresh start by code ```typescript ArcwarePixelStreaming.clearSessionId(); ArcwareInit(ids, configuration, true); ``` Result: * new SDK objects are created * previous stored session is removed and cannot be reused *** #### Fully fresh start by URL ```typescript ArcwareInit(ids, { ...configuration, useUrlParams: true }, true) ``` URL: ``` ?noSession ``` Result: * new SDK objects are created * previous session is not reused This is the closest behavior to a completely clean new start without calling `clearSessionId()` manually. *** ## reconnect The query parameter: ``` ?reconnect ``` indicates that the SDK should attempt to reconnect to a previous session if one is known. This is effectively the opposite intent of `?noSession`. Example: ``` https://example.com/?reconnect ``` If both reconnect behavior and previous session information are available, the SDK will attempt to restore the existing session. *** ## ?session= The URL parameter: ``` ?session= ``` explicitly provides the session ID that should be used. Example: ``` https://example.com/?session=abc123 ``` This is the most explicit form of session reuse because the session is not merely restored from storage — it is directly specified in the URL. *** ## Precedence and Intent The mechanics can be understood by separating the two decision layers. ### SDK Object Layer Question: > Should the SDK reuse previously created objects or create fresh ones? Controlled by: * `forceRefresh` *** ### Session Layer Question: > Should the stream reuse a previous session or start fresh? Influenced by: * stored session state * `clearSessionId()` * `?reconnect` * `?session=` * `?noSession` *** ## Practical Interpretation In practice, the intent of these options is usually: | Mechanism | Intent | | ---------------------- | --------------------------------------------------- | | default initialization | reuse what already exists | | `forceRefresh: true` | rebuild SDK objects | | `clearSessionId()` | remove stored session so a fresh session is started | | `?noSession` | do not restore previous session | | `?reconnect` | try to restore previous session | | `?session=` | use this exact session | *** ## Recommended Usage Patterns ### Typical SPA Integration Use the default behavior. ```typescript ArcwareInit(ids, configuration) ``` This avoids accidental duplicate stream creation and allows normal reconnect behavior. *** ### Clean New Session for Testing Use either: * `forceRefresh: true` together with `?noSession` or * `ArcwarePixelStreaming.clearSessionId()` together with `forceRefresh: true` This prevents both object reuse and session reuse. *** ### Explicit Reconnect Flow Use: * default `forceRefresh` * `?reconnect` This is useful when the application wants to guide the user back into an interrupted session. *** ### Explicit Session Restore Use: * `?session=` This is useful when session state is managed outside the SDK and passed into the application explicitly. *** ## CoreSetup `CoreSetup` does not create the UI layer, but session-related URL behavior still applies when URL parameters are enabled through configuration. The same distinction remains: * object creation is controlled by how and when `CoreSetup` is called * session reuse is controlled by stored session state, `clearSessionId()`, and URL parameters Because `CoreSetup` is headless, lifecycle and reconnect behavior are typically managed more explicitly by the application. *** ## Summary | Mechanism | Purpose | | ------------------------------ | -------------------------------------------- | | default `ArcwareInit` behavior | reuse SDK objects and possibly reuse session | | `forceRefresh` | rebuild SDK objects | | `clearSessionId()` | remove stored session | | `?noSession` | disable session reuse | | `?reconnect` | prefer reconnecting to previous session | | `?session=` | force a specific session | A fully fresh start usually requires both: * fresh SDK objects * no previous session reuse That can be achieved by combining: ```typescript forceRefresh: true ``` with either: ```typescript ArcwarePixelStreaming.clearSessionId() ``` or: ``` ?noSession ``` # Disconnect This feature isn't necessary for all implementations; only certain apps will require it. Not much is needed to close the connection properly, but it's really important to do it. Keeping your WebSocket connected means the instance stays active, leading to costs with Arcware Cloud. {% hint style="warning" %} *Just removing the video element isn't enough.* {% endhint %} So, how do you close the WebSocket Connection? If you have your ArcwarePixelStreaming ready, it's straightforward: ```typescript PixelStreaming.disconnect(); ``` It's as simple as that. # AFK Module AFK stands for Away From Keyboard ### Overview The AFK (Away-From-Keyboard) functionality detects when a user has been inactive for a configured amount of time. When inactivity is detected, the Pixel Streaming system can display a warning and eventually terminate the session - which is mainly relevant as cost saving functionality. In the Arcware WebSDK, AFK events are emitted by the **Epic Games Pixel Streaming Infrastructure** and forwarded through the `PixelStreaming` instance. The Arcware SDK does not implement its own AFK logic but exposes the events so developers can react to them. These events are available for both: | Mode | Supported | | -------------------------------- | --------- | | ArcwareInit (UI integration) | ✔ | | CoreSetup (Headless integration) | ✔ | AFK behaviour such as timeout duration is primarily configured in the **Arcware Cloud platform settings** or project configuration. *** ## Accessing AFK Events AFK events can be listened to through the `PixelStreaming` instance using the standard Pixel Streaming event system. Example: ```typescript PixelStreaming.addEventListener("eventName", callbackFunction); ``` Example setup: ```typescript const { PixelStreaming } = ArcwareInit( { shareId: "" }, configuration ); ``` *** ## Available AFK Events | Event Name | Epic Pixel Streaming Event | | ---------------------- | --------------------------- | | `afkWarningActivate` | `AfkWarningActivateEvent` | | `afkWarningDeactivate` | `AfkWarningDeactivateEvent` | | `afkWarningUpdate` | `AfkWarningUpdateEvent` | | `afkTimedOut` | `AfkTimedOutEvent` | These events represent different stages of inactivity detection. *** ## Event Lifecycle The typical AFK lifecycle follows this sequence: ``` User inactive ↓ afkWarningActivate ↓ afkWarningUpdate (countdown updates) ↓ afkTimedOut ``` If the user interacts again before the timeout occurs: ``` User inactive ↓ afkWarningActivate ↓ User interaction detected ↓ afkWarningDeactivate ``` *** ## Event Descriptions ### afkWarningActivate Triggered when the system detects inactivity and activates the AFK warning state. Typical use cases: * show a custom AFK overlay * notify the user they are about to be disconnected Example: ```typescript PixelStreaming.addEventListener("afkWarningActivate", () => { console.log("AFK warning activated"); }); ``` *** ### afkWarningDeactivate Triggered when the AFK warning is cleared because user activity was detected. Example: ```typescript PixelStreaming.addEventListener("afkWarningDeactivate", () => { console.log("User became active again"); }); ``` Typical uses: * hide custom AFK overlays * reset inactivity timers *** ### afkWarningUpdate Triggered periodically while the AFK warning is active. This event is typically used to update a **countdown display**. Example: ```typescript PixelStreaming.addEventListener("afkWarningUpdate", (event) => { console.log("AFK countdown update:", event); }); ``` Typical payload (example): ```typescript { remainingTime: number } ``` Example usage: ```typescript PixelStreaming.addEventListener("afkWarningUpdate", (event) => { document.getElementById("afk-countdown").innerText = `${event.remainingTime}`; }); ``` *** ### afkTimedOut Triggered when the AFK timeout has been reached and the session will be terminated. Example: ```typescript PixelStreaming.addEventListener("afkTimedOut", () => { console.log("Session timed out due to inactivity"); }); ``` Typical uses: * show a timeout message * redirect the user * offer a reconnect button Example: ```typescript PixelStreaming.addEventListener("afkTimedOut", () => { document.getElementById("timeout-overlay").style.display = "block"; }); ``` *** ## AFK Configuration AFK behavior is usually configured in the **Arcware Cloud platform** rather than directly in the WebSDK. Although Pixel Streaming exposes parameters such as: ``` TimeoutIfIdle AFKTimeout AFKCountdown ``` these values may be overridden by backend configuration depending on the project or share settings. For this reason, the recommended way to configure AFK behavior is through: * project settings * share configuration * Arcware Cloud platform controls *** ## Default AFK Overlays When using the **Arcware UI integration (`ArcwareInit`)**, the Pixel Streaming infrastructure may automatically show default AFK warning overlays. These overlays typically include: * inactivity warning messages * countdown timer * session termination notice If you want to implement **fully custom UI**, you can ignore the default overlays and build your own using the AFK events described above. The SDK also provides a configuration option that can hide the default AFK overlay: ```typescript settings: { whiteLabelling: { hideAfkOverlay: true } } ``` *** ## Example: Custom AFK Overlay Example implementation of a custom AFK overlay: ```typescript PixelStreaming.addEventListener("afkWarningActivate", () => { document.getElementById("afk-overlay").style.display = "block"; }); PixelStreaming.addEventListener("afkWarningDeactivate", () => { document.getElementById("afk-overlay").style.display = "none"; }); PixelStreaming.addEventListener("afkTimedOut", () => { document.getElementById("afk-overlay").innerText = "Session ended due to inactivity."; }); ``` Example UI: ```html ``` *** ## Notes * AFK events originate from the **Epic Pixel Streaming Infrastructure**. * The Arcware WebSDK exposes these events through the `PixelStreaming` instance. * AFK timeout configuration is usually managed through the **Arcware Cloud platform**, not through the WebSDK itself. # 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. ```typescript import { CoreSetup } from "@arcware-cloud/pixelstreaming-websdk/core"; const { PixelStreaming } = CoreSetup( { shareId: "" }, { 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: ```html
``` Example implementation: ```typescript 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: ```typescript document .getElementById("btn-action") .addEventListener("click", () => { PixelStreaming.emitUIInteraction({ action: "OpenMenu" }); }); ``` Receiving responses: ```typescript 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: ```html ``` *** ### Handling Queue Updates ```typescript 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 ```typescript 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: ```html ``` *** ### AFK Warning Activation ```typescript PixelStreaming.addEventListener("afkWarningActivate", () => { document.getElementById("afk-overlay").style.display = "block"; }); ``` *** ### AFK Countdown Updates ```typescript PixelStreaming.addEventListener("afkWarningUpdate", (event) => { document.getElementById("afk-countdown").innerText = `Disconnecting in ${event.remainingTime}`; }); ``` *** ### AFK Warning Cancelled ```typescript PixelStreaming.addEventListener("afkWarningDeactivate", () => { document.getElementById("afk-overlay").style.display = "none"; }); ``` *** ### AFK Timeout ```typescript 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 ```typescript PixelStreaming.fileTransferHandler.add(() => { PixelStreaming.fileDownload(); }); ``` *** ### Fully Custom File Handling ```typescript 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 ```html
``` 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. # Guidelines ## Integration & Security Guidelines ### Introduction This guide outlines recommended **security, privacy, and integration guidelines** when building applications with the **Arcware Pixel Streaming WebSDK**. Modern browsers enforce strict policies around: * device permissions * autoplay restrictions * fullscreen access * WebRTC security * cross-origin communication Following these guidelines helps ensure that your application: * behaves consistently across browsers * respects user privacy * complies with browser security models * provides a trustworthy user experience These recommendations apply to both **UI integrations (`ArcwareInit`)** and **headless integrations (`CoreSetup`)**. *** ## User Permissions and Device Access ### Request Microphone Access Explicitly Access to user devices such as microphones must always be **explicitly triggered by a user interaction**. Browsers will block microphone access if it is requested automatically during page load or connection initialization. Recommended pattern: ```javascript document.getElementById("btn-mic").addEventListener("click", () => { PixelStreaming.toggleMic(true, false); }); ``` This ensures the permission request originates from a clear user action. *** ### Provide Clear Device Usage Indicators Whenever the microphone is active, the application should **visibly indicate this state to the user**. Examples: * a microphone icon * a recording indicator * a toggle switch that reflects the current state Providing clear indicators helps users understand when their device is in use and reinforces trust in the application. *** ## Autoplay and Audio Policies Modern browsers restrict autoplay of media that contains sound. Because Pixel Streaming uses a video element internally, applications should consider the following: * initialize streams with `StartVideoMuted: true` * allow users to manually enable audio * provide an audio toggle button Example configuration: ```javascript initialSettings: { StartVideoMuted: true, AutoConnect: true, AutoPlayVideo: true } ``` Once the user interacts with the page, audio can safely be enabled. *** ## Fullscreen Functionality ### Only Trigger Fullscreen via User Interaction Browsers only allow fullscreen mode to be entered when triggered by a **direct user action**, such as clicking a button. Example implementation: ```javascript document .getElementById("btn-fullscreen") .addEventListener("click", () => { PixelStreaming.rootElement.requestFullscreen(); }); ``` Attempting to enter fullscreen automatically during page load will typically be blocked. *** ### Allow Users to Exit Fullscreen Easily Always provide users with a clear and simple way to exit fullscreen mode. Typical options include: * a fullscreen toggle button * visible UI controls when hovering the stream * keyboard shortcuts such as `Esc` This helps prevent confusion and ensures users remain in control of their browser environment. *** ## Avoid Embedding Streams via Iframes Embedding Pixel Streaming sessions through an `