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>
Last updated