# Getting Started

{% hint style="danger" %}
Attention: "Please make sure in a production environments to never pull with latest tag but to pin the exact version"
{% endhint %}

#### Prerequisites

Before integrating the <mark style="color:purple;">`@arcware-cloud/pixelstreaming-websdk`</mark> into your project, please ensure the following prerequisites are met:

* <mark style="color:orange;">**`Share ID`**</mark>: 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](https://docs.arcware.cloud/arcware-cloud-platform/getting-started-with-arcware-cloud/sharing-your-project).
* <mark style="color:orange;">**`Web Application Development Environment`**</mark>: Ensure that your web application development environment is set up with either `yarn` or `npm`. These package managers are required for installing the WebSDK.
* <mark style="color:orange;">**`TypeScript Recommendation`**</mark>: 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.

***

#### NPM Package&#x20;

<https://www.npmjs.com/package/@arcware-cloud/pixelstreaming-websdk>

***

#### Installation

To integrate the <mark style="color:orange;">Arcware CloudR Pixel Streaming WebSDK</mark> into your project, you can use either `npm` or `yarn`. Run one of the following commands in your project directory:

```sh
npm install @arcware-cloud/pixelstreaming-websdk --save
```

```sh
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 <mark style="color:orange;">`ArcwareConfig`</mark>, <mark style="color:orange;">`ArcwarePixelStreaming`</mark> and <mark style="color:orange;">`ArcwareApplication`</mark> one by one, or utilize the <mark style="color:orange;">`ArcwareInit`</mark> method.

{% hint style="info" %}
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.
{% endhint %}

Import <mark style="color:orange;">`ArcwareInit`</mark> from the "@arcware-cloud/pixelstreaming-websdk" and configure it to your needs.

```javascript
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: [WebSDK Configuration](https://docs.arcware.cloud/web-integration/new-websdk/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.

**Step 2: Embed into Your Application**

Append the stream to the DOM.

```javascript
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.