Ctrlk
For the complete documentation index, see llms.txt. This page is also available as Markdown.

Javascript + HTML

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.

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

Replace the example shareId 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.

<!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 ArcwareInit

  • 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 <your-shareId-goes-here> 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 AutoConnect 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.

PreviousCode examplesNextReact

Last updated