Intro
Building a Web Page
LibZL is the Javascript library that gives access to ZeroLight products. To connect to a control an OmniStream experience we need to use the the ZLCloudSteam sub-module.
Basics
Including LibZL dynamically
The module is hosted to allow dynamic inclusion like so:
<script src="https://libzl.zlthunder.net/libzl/versions/latest/libzl.js"></script>
A specific version identifier can be used to stick to a specific version:
<script src="https://libzl.zlthunder.net/libzl/versions/5.1.3/libzl.js"></script>
Connect
Connects to a stream using the defined connection settings. Event listeners should be bound before calling connect, to be sure of catching all events.
cloudstream.connect(cloudstreamSettings);
Connection Parameters
The settings that define where a cloudstream will attempt to connect to to retrieve a stream, and where on the hosting page to display the stream.
const cloudstreamSettings = {
//True when connecting to a specific machine you know the address of, false for normal usage
directConnection: false,
//Your account settings
cloudConnectionParameters: {
//Your project name
customer: "omnistream",
//Your streaming renderService (eg. stage or live)
renderService: "yourservicename",
},
//Optional: Address for a direct connection to a instance or PC - leave empty for normal usage
directConnectionParameters: {
ipAddress: "localhost",
},
//Container in hosting page to present stream in to
parent: "streamContainer",
//Optional: video or xr, to request a video stream or xr stream
streamingMode: "video",
//Optional: defaults to true - touch events will produce fake mouse events
fakeMouseWithTouch: true,
};
caution
Replace "customer" and "renderService" with the details from your account.
Simple Example
<!-- We need libZL -->
<script src="https://libzl.zlthunder.net/libzl/versions/latest/libzl.js"></script>
<!-- We need a container to attach the stream to -->
<div id="streamContainer"></div>
<!-- We need a bit of javascript to sort the connection out -->
<script>
const libzl = new LibZL();
const cloudstreamSettings = {
directConnection: false,
cloudConnectionParameters: {
customer: "omnistream",
renderService: "yourservicename",
},
streamingMode: "video",
parent: "streamContainer",
};
libzl.cloudstream("cloudstreamExample").then(function (api) {
//Adding to the global namespace
cloudstream = window.cloudstream = api;
//Adding event listeners to what we're interested in
cloudstream.addEventListener("error", function (error) {
console.log("OmniStream had an error: ", error);
});
cloudstream.addEventListener("streamReady", function () {
console.log("The stream is ready!");
});
//Connecting to the stream
// - options contains parent DOM element name to attach to
cloudstream.connect(cloudstreamSettings);
});
</script>