Web UI
Important notes
This example uses HTML and JavaScript, but it can be used as a reference for integrations with any framework.
Button Element
To trigger the action from the frontend, you will need to implement a button that uses the handleSendCommand method to request Unreal Engine to trigger the action in the blueprint responsible for taking the screenshot.
<button class="button-interaction" onclick="handleSendCommand({CreateScreenshot: 'CreateScreenshot'})">Take Screenshot</buttoFunction 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 handleSendCommand(command) {
if (Application) {
Application.emitUIInteraction(command);
}
}
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:
Last updated