search

Javascript + HTML

triangle-exclamation

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 CodePenarrow-up-right

Replace the example shareId with your own project Share ID to test the integration with your application.

hashtag
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 | HTML + JavaScript</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

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

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

    <script type="module">
      import { ArcwareInit } from "https://unpkg.com/@arcware-cloud/[email protected]/index.mjs";

      let Application;

      const { PixelStreaming, Application: ArcwareApplication } = ArcwareInit(
        {
          shareId: "<your-shareId-goes-here>"
        },
        {
          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");
        container.appendChild(PixelStreaming.rootElement);
      });

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

  <body>
    <div id="video-container"></div>

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

hashtag
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

hashtag
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