@arcware-cloud/pixelstreaming-websdk-core NPM

Getting Started with Arcware Pixel Streaming WebSDK

This guide will walk you through the initial steps to integrate the New Arcware Pixel Streaming WebSDK into your web application. The process is streamlined to get you up and running quickly.

***Note: This library wraps the "PixelStreamingInfrastructure" repository of EpicGames. For more info see the github repo: https://github.com/EpicGames/PixelStreamingInfrastructure

Prerequisites

Before you begin, ensure you have the following:

Node.js installed on your system.
Access to Unreal Engine's Pixel Streaming setup.
A web application where you wish to implement the SDK.

Installation

To install the Arcware Pixel Streaming WebSDK, run the following command in your project's root directory:

npm install @arcware-cloud/pixelstreaming-websdk-core --save

Or if you prefer using Yarn:

yarn add @arcware-cloud/pixelstreaming-websdk-core

Quick Start Guide

Step 1: Import and Configure

Import the necessary classes from the SDK and create a new ArcwareConfig object to configure your Pixel Streaming instance.

import { ArcwareConfig, ArcwarePixelStreaming } from "@arcware-cloud/pixelstreaming-websdk-core";

const config = new ArcwareConfig({
  useUrlParams: false,
  initialSettings: {
    // Your initial settings here
  },
  settings: {
    // Your custom settings here
  },
});`

Step 2: Initialize ArcwarePixelStreaming

Create an instance of ArcwarePixelStreaming by passing the configuration object. This instance will manage the streaming session.

const pixelStreamingInstance = new ArcwarePixelStreaming(config);

Step 3: Embed into Your Application

Append the ArcwarePixelStreaming instance to your application's DOM to start the streaming session.

document.getElementById('your-container-id').appendChild(pixelStreamingInstance.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.

Remember, as this SDK is in beta, you are encouraged to provide feedback and report any issues you encounter. Your contributions are valuable to the continuous improvement of the WebSDK.

Configuration and Initialization

Configuration and Initialization the New Arcware Pixel Streaming WebSDK is designed to be flexible and 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 creating a new instance of ArcwareConfig, you provide an object with two main properties: initialSettings and settings.

initialSettings

This property is an object that defines the initial environment and behavior of the Pixel Streaming session. Here's a breakdown of the options used in the example:

ss: This is the URL to the signalling server, which is essential for establishing the WebRTC connection. It is typically provided by your environment configuration.
StartVideoMuted: A boolean that, when set to true, starts the video in a muted state.
AutoConnect: If true, the client will automatically attempt to connect to the Pixel Streaming session as soon as possible.
AutoPlayVideo: When set to true, the video will automatically play as soon as it's ready.

settings

The settings property is an object containing various configuration options that tailor the user interface and interaction capabilities of the streaming session:

shareId: An identifier used for sharing sessions. *Required
session: The session ID, which can be used for session management and reconnection.
token: An authentication token, if required by your backend.
infoButton: A boolean to toggle the visibility of an information button in the UI.
micButton: A boolean to control the display of a microphone toggle button.
audioButton: A boolean to show or hide the audio control button.
fullscreenButton: A boolean to enable a fullscreen toggle button.
settingsButton: A boolean to add a settings button to the UI.
connectionStrengthIcon: A boolean to display an icon indicating the connection strength.

Initialization Process

After configuring ArcwareConfig, you create an instance of ArcwarePixelStreaming by passing the configuration object. This instance is responsible for managing the streaming session and handling user interactions.

const pixelStreamingInstance =  new  ArcwarePixelStreaming(config);

Once initialized, pixelStreamingInstance can be used to interact with the streaming session. For example, you can retrieve the application's response or emit UI interactions:

const application =  new  ArcwareApplication({
    stream: pixelStreamingInstance,
});

application.getApplicationResponse(``string``): This method can be called to get a response from the application, which might include status updates or other messages.
application.emitUIInteraction(descriptor: object | string``): This method allows you to send UI interaction events to the streaming application, such as button presses or command inputs.

Implementation Examples

Plain HTML

Please ensure in the following examples, to use

index.esm.js (recommended)

<html>
  <head>
    <title>Arcware CloudRT - Pixel Streaming</title>
    <script type="module">
      import * as PixelStreamingWebSdkCore from "https://unpkg.com/@arcware-cloud/pixelstreaming-websdk-core@0.0.2-beta/index.esm.js";
 
      const { ArcwareConfig, ArcwarePixelStreaming, ArcwareApplication } = PixelStreamingWebSdkCore;

      const application = new ArcwareApplication({
        stream: new ArcwarePixelStreaming(new ArcwareConfig({
          useUrlParams: true,
          initialSettings: {
            ss: 'wss://signalling-client.ragnarok.arcware.cloud/',
            StartVideoMuted: true,
            AutoConnect: true,
            AutoPlayVideo: true,
          },
          settings: {
            // If you figure out the last digit of the id, feel free to try :)
            shareId: "share-0be4620b-77aa-42b1-98cb-f7ee61be443?",
            audioButton: true,
            fullscreenButton: true,
          },
        })),
      });
              
      document.getElementById('videoContainer').appendChild(application.rootElement);
    </script>
  </head>
  <body>
    <div id="videoContainer" style="height: 1000px; width: 1000px;"></div>
  </body>
</html>

index.esm.js

<script src="https://unpkg.com/@arcware-cloud/pixelstreaming-websdk-core@0.0.2-beta/index.umd.js"></script>
<script type="module">
  const { ArcwareConfig, ArcwarePixelStreaming, ArcwareApplication } = window.arcware; // Module name, subject to change.
  // Rest of the script as above (esm).
</script>

Library implementation examples

React

coming soon

Other

coming soon

LICENSE

MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.