Javascript + HTML

Attention: "Please make sure in a production environments to never pull with latest tag but to pin the exact version"

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.mjs";
      (() => {
        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 3 hours ago

<!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.mjs"; (() => { 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>

hashtagCode template

Code template