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
  • Overview
  • Key Differences
  • Installation
  • Basic Usage Changes
  • Testing
  • Conclusion
  1. Web Integration
  2. PixelStreaming WebSDK
  3. Implementing the stream on your app

Migration from @arcware/webrtc-plugin

Overview

The @arcware-cloud/pixelstreaming-websdk package is an advanced, feature-rich library for integrating Unreal Engine's Pixel Streaming technology into web applications. It offers a more streamlined and flexible approach compared to the older @arcware/webrtc-plugin package.


Key Differences

  1. Package Scope and Features:

    • @arcware/webrtc-plugin primarily focuses on establishing WebRTC connections.

    • @arcware-cloud/pixelstreaming-websdk extends functionality to include full Pixel Streaming integration, offering a more comprehensive set of tools for interaction with Unreal Engine applications.

  2. API Design:

    • The new package offers a more modern, modular API design, making it easier to integrate and scale with web applications.

  3. Performance and Optimization:

    • Enhanced performance optimizations are present in the new package, ensuring smoother streaming and interaction experiences.


Installation

Replace the old package with the new one in your project:

npm uninstall @arcware/webrtc-plugin
npm install @arcware-cloud/pixelstreaming-websdk

Basic Usage Changes

Initialization:

  • Old package:

    import { WebRTC } from '@arcware/webrtc-plugin';
    const webrtc = new WebRTC(config);
  • New package:

    import { ArcwareInit } from '@arcware-cloud/pixelstreaming-websdk';
    const { Application } = ArcwareInit(config);

Configuration:

  • The configuration object structure may have changed. Review the new package's documentation for the updated configuration format.

Event Handling:

  • Update event handling according to the new API documentation. The new package likely offers more events and a different way to handle them.

Customization and Advanced Features:

  • Explore additional features like UI customization, advanced streaming settings, and interaction options provided by the new package.


Testing

After integrating the new package, thoroughly test your application to ensure all functionalities work as expected. Pay special attention to:

  • Connection stability and video quality.

  • Interaction latency and responsiveness.

  • Compatibility across different browsers and devices.


Conclusion

Migrating to @arcware-cloud/pixelstreaming-websdk provides access to improved features and performance optimizations for Unreal Engine's Pixel Streaming in web applications. The migration process involves updating package dependencies, refactoring code to match the new API, and thorough testing to ensure seamless integration.

PreviousAngularJSNextBest practices

Last updated 1 year ago

⬆️
Configuration
Events handlers
Ticket destroyed.
Disconnect
ConnectionIdentifier
Settings-Menu
AFK-module