Getting Started

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

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: Setting up Share ID.

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

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

We recommend to use ArcwareInit method as it contains guards against effects like rerenderings of the webpage, which if not properly handled could cause multiple websocket connections being initialized resulting in parallel requests and multiple instances which might have unwanted effects on costs, usage and state of your instance.

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: {}
  }
);

Assure you set your prepared Share ID.

More about the configuration options you can find here:

Configuration

Keep in mind, that setting AutoConnect: true will directly connect 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.