In-Game UI

Important notes

This example uses HTML and JavaScript, but it can be used as a reference for integrations with any framework.

Button Element

In this case, the button element can be created within the Unreal Engine application as part of the in-game UI. However, the functionality on the Blueprint side must be the same as with the web implementation, because to download the file, the browser will always need to listen for the response from Unreal Engine and then process the file.

Function to download the screenshot

We need a JavaScript function that listens for a response from Unreal Engine (which you can name as you wish; in this example, we used CreateScreenshot). This function will handle any browser logic needed to download the file.

let Application;
let screenshotCounter = 1;
import * as PixelStreamingWebSdk from "https://unpkg.com/@arcware-cloud/pixelstreaming-websdk@latest/index.esm.js";

(function() {
  const { ArcwareInit } = PixelStreamingWebSdk;
  const initResult = new ArcwareInit(
    { shareId: "share-ee32808e-34fe-466a-8dd9-178b71ed5501" },
    {
      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 => {
    if (response.startsWith("CreateScreenshot")) createFile(window.file);
  });
  
  setTimeout(() => {
    document.getElementById("video-container").appendChild(Application.rootElement);
  });
  window.file = Application.webRtcController.file;
})();

function createFile(file) {
  const blob = new Blob(file.data, { type: file.mimetype });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  const counterString = String(screenshotCounter).padStart(2, '0');
  a.href = url;
  a.download = `screenshot${counterString}${file.extension}`;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
  screenshotCounter++;
}

Code Example

To help guide your implementation, you can refer to the following options:

CodePen Interactive example

HTML + JavaScript code example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pixel Streaming Screenshot</title>
  <style>
    * { margin: 0; padding: 0; }
    #video-container { width: 100vw; height: 100vh; position: relative; }
    #video-container video { left: 0; top: 0; }
  </style>
</head>
<body>
  <div id="video-container"></div>

  <script type="module">
    let Application;
    let screenshotCounter = 1;
    import * as PixelStreamingWebSdk from "https://unpkg.com/@arcware-cloud/pixelstreaming-websdk@latest/index.esm.js";
    
    (function() {
      const { ArcwareInit } = PixelStreamingWebSdk;
      const initResult = new ArcwareInit(
        { shareId: "share-ee32808e-34fe-466a-8dd9-178b71ed5501" },
        {
          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 => {
        if (response.startsWith("CreateScreenshot")) createFile(window.file);
      });
      
      setTimeout(() => {
        document.getElementById("video-container").appendChild(Application.rootElement);
      });
      window.file = Application.webRtcController.file;
    })();
    
    function createFile(file) {
      const blob = new Blob(file.data, { type: file.mimetype });
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      const counterString = String(screenshotCounter).padStart(2, '0');
      a.href = url;
      a.download = `screenshot${counterString}${file.extension}`;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(url);
      screenshotCounter++;
    }
  </script>
</body>
</html>

PreviousWeb UI NextBlueprint overview

Last updated 7 months ago

Important notes

This example uses HTML and JavaScript, but it can be used as a reference for integrations with any framework.

Button Element

Function to download the screenshot

let Application;
let screenshotCounter = 1;
import * as PixelStreamingWebSdk from "https://unpkg.com/@arcware-cloud/pixelstreaming-websdk@latest/index.esm.js";

(function() {
  const { ArcwareInit } = PixelStreamingWebSdk;
  const initResult = new ArcwareInit(
    { shareId: "share-ee32808e-34fe-466a-8dd9-178b71ed5501" },
    {
      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 => {
    if (response.startsWith("CreateScreenshot")) createFile(window.file);
  });
  
  setTimeout(() => {
    document.getElementById("video-container").appendChild(Application.rootElement);
  });
  window.file = Application.webRtcController.file;
})();

function createFile(file) {
  const blob = new Blob(file.data, { type: file.mimetype });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  const counterString = String(screenshotCounter).padStart(2, '0');
  a.href = url;
  a.download = `screenshot${counterString}${file.extension}`;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
  screenshotCounter++;
}

Code Example

To help guide your implementation, you can refer to the following options:

CodePen Interactive example

HTML + JavaScript code example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pixel Streaming Screenshot</title>
  <style>
    * { margin: 0; padding: 0; }
    #video-container { width: 100vw; height: 100vh; position: relative; }
    #video-container video { left: 0; top: 0; }
  </style>
</head>
<body>
  <div id="video-container"></div>

  <script type="module">
    let Application;
    let screenshotCounter = 1;
    import * as PixelStreamingWebSdk from "https://unpkg.com/@arcware-cloud/pixelstreaming-websdk@latest/index.esm.js";
    
    (function() {
      const { ArcwareInit } = PixelStreamingWebSdk;
      const initResult = new ArcwareInit(
        { shareId: "share-ee32808e-34fe-466a-8dd9-178b71ed5501" },
        {
          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 => {
        if (response.startsWith("CreateScreenshot")) createFile(window.file);
      });
      
      setTimeout(() => {
        document.getElementById("video-container").appendChild(Application.rootElement);
      });
      window.file = Application.webRtcController.file;
    })();
    
    function createFile(file) {
      const blob = new Blob(file.data, { type: file.mimetype });
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      const counterString = String(screenshotCounter).padStart(2, '0');
      a.href = url;
      a.download = `screenshot${counterString}${file.extension}`;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(url);
      screenshotCounter++;
    }
  </script>
</body>
</html>