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
  1. Web Integration
  2. PixelStreaming WebSDK
  3. Interacting with the Stream

Customizing the User Interface

PreviousVideo ElementNextHandling Dynamic Content

Last updated 8 months ago

Customizing the User Interface

When integrating streaming into your application, you have the option to implement a custom UI that interacts seamlessly with the stream.

Setup and Implementation:

UI Container: Start by defining an HTML element with a unique ID to act as the container for your custom UI. For example:

<div id="stream-ui"></div>

Fullscreen Functionality: By default, the fullscreen feature is applied only to the VideoElementParent, which is part of the core WebSDK code. To ensure your custom UI benefits from fullscreen capabilities and other WebSDK functionalities, we recommend wrapping your custom UI within the stream-ui ID. This approach allows the WebSDK to correctly place your UI.

Showcases: For practical examples of custom UI implementation, refer to two of our showcases designed in this manner. These examples provide insight into how to effectively integrate and enhance your streaming UI using the WebSDK:

This method ensures a cohesive integration of your custom UI elements with the streaming experience, leveraging the full capabilities of the WebSDK.

⬆️
Automotive Configurator
Automotive industry showcase
Luminara Jewelry
Jewelry and Fashion industry showcase
Logo
Logo