This example uses HTML and JavaScript, but it can be used as a reference for integrations with any framework.
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.
Copy 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++;
}
Copy <!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> 
