Javascript + HTML

Last updated 1 year ago

Javascript + HTML

The example below serves as a foundational template for your experimentation. You will find a sample of a test stream in operation. Navigate through the HTML, CSS and JavaScript sections to understand the mechanics of the implementation. By selecting Edit on CodePen, you can further experiment with our WebSDK using your project's shareID in a fully interactive environment prior to integrating our solution into your application.

Code template

For a quick start, feel free to utilize the following code snippet as a template. It is pre-configured to assist you in beginning your project with ease.

<!DOCTYPE html>
<html>
  <head>
    <title>Arcware Pixel Streaming WebSDK | HTML + JavaScript</title>
    <style> 
      * {
        margin: 0;
        padding: 0;
      } 
      #video-container {
        width: 100vw;
        height: 100vh;
        position: relative;
      }
      #video-container video {
        left: 0;
        top: 0;
      }   
      .button-interaction {
        position: absolute;
        width: 200px;
        right: 100px;
        bottom: 20px;
        margin: auto;
        zindex: 9;
      }   
    </style>
    <script type="module">
      let Application;
      import * as PixelStreamingWebSdk from "https://unpkg.com/@arcware-cloud/pixelstreaming-websdk@latest/index.esm.js";
      (() => {
        const { ArcwareInit } = PixelStreamingWebSdk;
        const initResult = new 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 = initResult.Application;
        Application.getApplicationResponse(
          (response) => console.log("ApplicationResponse", response)
        );

        setTimeout(() =>
          document
            .getElementById("video-container")
            .appendChild(Application.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>

PreviousCode examples NextReact

Last updated 1 year ago

Code template

For a quick start, feel free to utilize the following code snippet as a template. It is pre-configured to assist you in beginning your project with ease.

<!DOCTYPE html>
<html>
  <head>
    <title>Arcware Pixel Streaming WebSDK | HTML + JavaScript</title>
    <style> 
      * {
        margin: 0;
        padding: 0;
      } 
      #video-container {
        width: 100vw;
        height: 100vh;
        position: relative;
      }
      #video-container video {
        left: 0;
        top: 0;
      }   
      .button-interaction {
        position: absolute;
        width: 200px;
        right: 100px;
        bottom: 20px;
        margin: auto;
        zindex: 9;
      }   
    </style>
    <script type="module">
      let Application;
      import * as PixelStreamingWebSdk from "https://unpkg.com/@arcware-cloud/pixelstreaming-websdk@latest/index.esm.js";
      (() => {
        const { ArcwareInit } = PixelStreamingWebSdk;
        const initResult = new 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 = initResult.Application;
        Application.getApplicationResponse(
          (response) => console.log("ApplicationResponse", response)
        );

        setTimeout(() =>
          document
            .getElementById("video-container")
            .appendChild(Application.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>