Skip to main content

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>