LogoLogo
Quick Links
  • Arcware Cloud
  • Arcware Cloud Platform
    • Getting started with Arcware Cloud
      • Sign up and sign in
        • Reset your password
      • Selecting a Plan & Creating your Tenant
      • Creating & Managing your projects
        • Project Dashboard
          • Statistics
        • Uploading and releasing packages
          • Resume package upload
        • Preview stream
        • Project settings
          • Max instance run-time
          • AFK Module - User inactivity
          • Queue
      • Sharing your project
      • Upgrading your Plan
      • Organization
      • Products
        • The Marketplace
          • Direct Flow
          • Asset Management
      • Help Center
        • Customer Support tickets
  • Unreal Engine Setup
    • Set up Pixel Streaming in your own project​
      • 01. Core Settings
        • 01.1. Plugin
        • 01.2. Pixel Streaming Input / Json messages
        • 01.3. Resolution
        • 01.4. Camera Aspect Ratio
        • 01.5. Framerate
        • 01.6. Mouse
        • 01.7. Touch Input Setup for Mobile
        • 01.8. DirectX version
      • 02. Optional Settings
        • 02.1 Touch Controllers
        • 02.2 Playing Media files
    • Using the Arcware Pixel Streaming Template Project
      • Template Overview
      • Getting Started
        • 01. Template download
        • 02. Arcware Blueprints
          • 02.1. Arcware GameMode
          • 02.2. Arcware Player Controller
            • 02.2.1. Sending and Receiving Json messages
            • 02.2.2. Creating and Testing Your Own Events
          • 02.3. Arcware Pawn
            • 02.3.1 Change Movement Mode
            • 02.3.2 Set Collision Channels
            • 02.3.3 Add new camera views
          • 02.4. Arcware HUD
        • 03. Packaging your project
  • ARCWARE FEATURES
    • Screenshot Functionality
      • Frontend Overview
        • Web UI
        • In-Game UI
      • Blueprint overview
  • Web Integration
    • ⬆️PixelStreaming WebSDK
      • Implementing the stream on your app
        • Getting Started
        • Code examples
          • Javascript + HTML
          • React
          • VueJS
          • AngularJS
        • Migration from @arcware/webrtc-plugin
        • Best practices
      • Configuration
      • Interacting with the Stream
        • Stream Container
        • Video Element
        • Customizing the User Interface
        • Handling Dynamic Content
        • Stream Display Customization
      • Interacting with Unreal Engine
      • In depth
        • Ticket destroyed.
        • Events handlers
        • Disconnect
        • ConnectionIdentifier
        • Settings-Menu
        • AFK-module
      • Showcase
Powered by GitBook
LogoLogo

Arcware Cloud Platform

  • Getting started​
  • Add-ons guide
  • Common Arcware Cloud Questions

Unreal Engine Setup

  • Set up Pixel Streaming in your own project​
  • Using the Arcware Pixel Streaming Template Project
  • Common Unreal Engine Questions

Arcware Features

  • Screenshot Functionality

Web Integration

  • PixelStreaming WebSDK
  • WebRTC Plugin

Copyright 2024 - Arcware GmbH

On this page
  • Configuration Options
  • Interaction with Unreal Engine Application
  1. Web Integration
  2. PixelStreaming WebSDK

Configuration

Configuration and Initialization the Arcware Pixel Streaming WebSDK is designed to be easily configurable to fit the needs of various web applications.

Below, we'll explain the configuration options and initialization process based on the provided React code example.


Configuration Options

When initializing the required classes by using the ArcwareInit method, you will provide two objects.

With the first input you have to provide the necessary connection information:

interface ConnectionInfo {
    // Required ShareId.
    shareId: string;
    // If the ShareId is setup with multiple projects,
    // you'll have to add the projectId.
    projectId?: string;
}

The second input is split into 2 sections, the initialSettings and the settings object.

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

 const { Config, PixelStreaming, Application } = ArcwareInit(
  { shareId: "share-0be4620b-77aa-42b1-98cb-f7ee61be443?" },
  {
    // 1:1 Settings infered from source library.
    initialSettings: {},
    // Additonal Arcware settings.
    settings: {}
  }
);

initialSettings

However, please keep in mind, that Arcware Cloud does not provide all of the features that are stated by this original library.

Properties which are not visible in the Menu or not tackled in this documentation are most likely not working with Arcware Cloud.

type initialSettings = {
    AutoConnect: boolean; // Default: false,
    StartVideoMuted: boolean; // Default: true,
    AutoPlayVideo: boolean; // Default: true,
    
    // Input
    KeyboardInput: boolean; // Default: true,
    MouseInput: boolean; // Default: true,
    GamepadInput: boolean; // Default: false,
    TouchInput: boolean; // Default: true,
    XRControllerInput: boolean; // Default: false,
    UseMic:  boolean; // Default: true,
}

For more details, check @epicgames-ps/lib-pixelstreamingfrontend-ue5.2.


settings

The settings object helps to configure Arcware Cloud features.

import type { ErrorMessage, Queue, LoveLetter } from "@arcware-cloud/pixelstreaming-websdk";

type settings = {
    /** ShareId, used for sharing your project.
    * Using ArcwareInit will set this required property for you. */
    shareId: string;
    /** Id of your project, only required if your shareId refers to multiple projects.
    * Using ArcwareInit will set this required property for you. */
    projectId?: string;
    
    /** Overwrites the Session-Tool and uses the provided session instead. */
    session?: string;
    
    /** Show or hide the fullscreen button. */
    fullscreenButton?: boolean; //Default TRUE
    /** Show or hide the settings button. */
    settingsButton?: boolean; //Default TRUE
    /** Show or hide the info button. */
    infoButton?: boolean; //Default FALSE
    /** Show or hide the audio button. */
    audioButton?: boolean; //Default FALSE
    /** Show or hide the microphone button. */
    micButton?: boolean; //Default FALSE
    /** Show or hide the microphone button. */
    stopButton?: boolean; //Default FALSE
    /** Show or hide the connectionStrengthIcon button. */
    connectionStrengthIcon?: boolean; //Default FALSE
    
    /** Handler for server side error messages. */
    errorHandler?: (message: ErrorMessage) => void;
    /** Handler for queue events. */
    queueHandler?: (message: Queue) => void;
    /** Handler for sessionId message. */
    sessionIdHandler?: (sessionId: string) => void;
    /** Handler for love letters.
    * "LoveLetters" are send from backend to the SDK to state what phase the connection currently is in. */
    loveLetterHandler?: (message: LoveLetter) => void;
    
    /** Enable/Disable LoveLetter logging to the console. */
    loveLetterLogging?: boolean;
    /** Enable/Disable Connection Identifier logging to the console. */
    connectionIdentifierLoggingDisabled?: boolean;
}

We have some plans in mind, how to extend this functionally, sadly we can't give any more details or an ETA yet.


Interaction with Unreal Engine Application

If you have come this far, you might be interested in how to interact with your application from your web-app:

PreviousBest practicesNextInteracting with the Stream

Last updated 1 year ago

These settings directly expose the initialSettings object of the .

⬆️
original library of Epic Games
Interacting with Unreal Engine