# Javascript + HTML

{% hint style="danger" %}
Important: In production environments you should never install or import the SDK using the latest tag. Always pin the exact version you want to use.
{% endhint %}

This example provides a simple starting point for integrating the Arcware Pixel Streaming WebSDK into a plain **HTML + JavaScript** application.

It is intended as a lightweight reference implementation that helps you understand the basic integration flow:

* importing the SDK
* initializing the stream
* attaching the stream to the DOM
* sending messages from the web application to Unreal Engine
* receiving responses from Unreal Engine

You can also try the example directly in CodePen:

[Open the HTML + JavaScript example on CodePen](https://codepen.io/Arcware/pen/WNPXZJO)

Replace the example <mark style="color:orange;">`shareId`</mark> with your own project Share ID to test the integration with your application.

***

### Code template

You can use the following template as a quick starting point for your own project.

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Arcware Pixel Streaming WebSDK</title>

    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        background: #000;
        font-family: system-ui;
      }

      #video-container {
        width: 100vw;
        height: 100vh;
        position: relative;
      }

      /* Simple loader */
      #loader {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 18px;
        background: black;
        z-index: 5;
      }

      .button-interaction {
        position: absolute;
        width: 200px;
        right: 100px;
        bottom: 20px;
        z-index: 10;
      }
    </style>

    <script type="module">
      import { ArcwareInit } from "https://unpkg.com/@arcware-cloud/pixelstreaming-websdk@1.4.11/index.mjs";

      let Application;

      const { Application: ArcwareApplication } = ArcwareInit(
        {
          shareId: "share-d2477d89-0548-4785-9b9f-149071fb4fe3"
        },
        {
          initialSettings: {
            StartVideoMuted: true,
            AutoConnect: true,
            AutoPlayVideo: true
          },
          settings: {
            infoButton: true,
            micButton: true,
            audioButton: true,
            fullscreenButton: true,
            settingsButton: true,
            connectionStrengthIcon: true
          }
        }
      );

      Application = ArcwareApplication;

      Application.getApplicationResponse((response) => {
        console.log("ApplicationResponse", response);
      });

      window.addEventListener("DOMContentLoaded", () => {
        const container = document.getElementById("video-container");
        const loader = document.getElementById("loader");

        // Wait until rootElement is ready
        const waitForRoot = setInterval(() => {
          if (Application?.rootElement instanceof Node) {
            container.appendChild(Application.rootElement);

            // remove loader once video is ready
            loader.style.display = "none";

            clearInterval(waitForRoot);
          }
        }, 50);
      });

      // Expose command sender
      window.handleSendCommand = function (command) {
        if (Application) {
          Application.emitUIInteraction(command);
        }
      };
    </script>
  </head>

  <body>
    <div id="video-container">
      <div id="loader">Loading Pixel Stream...</div>
    </div>

    <button
      class="button-interaction"
      onclick="handleSendCommand({ test: 'Send command' })"
    >
      Emit command to Unreal
    </button>
  </body>
</html>
```

***

### What this example does

This example:

* initializes the SDK using <mark style="color:orange;">`ArcwareInit`</mark>
* connects to the stream automatically
* appends the stream container to the DOM
* listens for messages returned from Unreal Engine
* sends a test message to Unreal Engine when the button is clicked

***

### Notes

* Replace <mark style="color:orange;">`<your-shareId-goes-here>`</mark> with your own valid Share ID.
* For production usage, replace the version in the CDN import with the exact SDK version you want to use.
* If you want more control over when the connection starts, set <mark style="color:orange;">`AutoConnect`</mark> to `false` and trigger the connection later in your application flow.
* For framework-based applications such as React, Vue, or Angular, the integration pattern is similar, but the DOM mounting should be adapted to the framework lifecycle.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.arcware.cloud/web-integration/new-websdk/code-examples/javascript-+-html.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
