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
  • Prerequisites
  • Installation
  • Quick Start Guide
  • Setup
  • Next Steps
  1. Web Integration
  2. PixelStreaming WebSDK
  3. Implementing the stream on your app

Getting Started

This guide will walk you through the initial steps to integrate the Arcware Pixel Streaming WebSDK into your web application.

PreviousImplementing the stream on your appNextCode examples

Last updated 1 year ago

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: .

  • 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.


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:

npm install @arcware-cloud/pixelstreaming-websdk --save
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.

Import ArcwareInit from the "@arcware-cloud/pixelstreaming-websdk" and configure it to your needs.

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:

Keep in mind, that setting AutoConnect: true will directly connect and the client to an instance, no matter if you follow Step 2 directly or not. So use ArcwareInit (or creation of the ArcwarePixelStreaming Instance) either with AutoConnect off or right in time.

Step 2: Embed into Your Application

Append the stream to the DOM.

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.

Assure you set your prepared .

⬆️
Setting up Share ID
Code examples
Share ID
Configuration