LogoLogo
Quick Links
  • Arcware Cloud
  • Arcware Cloud Platform
    • Getting started with Arcware Cloud
      • Sign up and sign in
      • Select a Plan & Creating your Tenant
      • Creating your Tenant
      • 04. Creating your first project
      • 05. Upload and manage your Unreal packages
      • 06. Setting up your project
      • 07. Preview and share the stream
      • 08. Upgrade your Tenant
      • 👑09. Organization
      • 👑10. Add-ons
      • 11. Help Center
      • 👑12. Customer Support
    • 👑Add-ons guide
      • Direct Flow
      • Asset Management
    • Advanced settings
      • 01. AFK Module - User inactivity
      • 02. Max instance run-time
    • Common Arcware Cloud Questions
  • 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
    • ⬇️WebRTC Plugin
      • Getting started
      • Props and Types
      • SizeContainer, container and videoRef
      • Enabling the audio
      • Afk-module
      • Interacting with Unreal Engine
      • Example WebRTC Plugin Applications
        • React
        • AngularJS
        • VueJS
        • Plain HTML
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