Skip to main content

Native integration overview

If you need more control than the OmniStream Viewer provides, use a native integration. This approach supports custom loading screens, finer control over video codecs, and deeper coupling between your webpage and the streamed application through Send and Receive messaging.

Native integrations use LibZL from the Palette SDK. For OmniStream, you use the ZLCloudStream sub-module rather than zlbolt.

Before you connect​

Load LibZL​

Include LibZL on your page following the Palette SDK installation guide. OmniStream integrations do not require a separate library.

Allow your domain​

When accessing an OmniStream stream from outside of a ZeroLight domain, add your origin in the render service settings.

Find connection parameters​

Your customer and renderService values are shown in Portal when viewing a Render Service stream.

ZLCloudStream basics​

Connect​

Connects to a stream using the defined connection settings. Bind event listeners before calling connect so you do not miss early events.

cloudstream.connect(cloudstreamSettings);

Connection parameters​

The settings object defines where the stream is hosted and which DOM element displays the video.

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 Render Service (e.g. stage or live)
    renderService: "yourservicename",
  },
  // Optional: address for a direct connection to an instance or PC — leave empty for normal usage
  directConnectionParameters: {
    ipAddress: "localhost",
  },
  // Container in the hosting page to present the stream in
  parent: "streamContainer",
  // Optional: video request a video stream or image mode
  streamingMode: "video",
  // Optional: defaults to true — touch events will produce fake mouse events
  fakeMouseWithTouch: true,
};

Simple example​

<!-- Load LibZL — see Palette SDK docs for version pinning -->
<script src="https://libzl.zlthunder.net/libzl/versions/latest/libzl.js"></script>

<div id="streamContainer"></div>

<script>
  const libzl = new LibZL();

  const cloudstreamSettings = {
    directConnection: false,
    cloudConnectionParameters: {
      customer: "omnistream",
      renderService: "yourservicename",
    },
    streamingMode: "video",
    parent: "streamContainer",
  };

  libzl.cloudstream("cloudstreamExample").then(function (api) {
    cloudstream = window.cloudstream = api;

    cloudstream.addEventListener("error", function (error) {
      console.log("OmniStream had an error: ", error);
    });
    cloudstream.addEventListener("streamReady", function () {
      console.log("The stream is ready!");
    });

    cloudstream.connect(cloudstreamSettings);
  });
</script>

Next steps​

Advanced example​

For a full state integration, see https://github.com/ZeroLight-Ltd/omnistream-web-state-example/blob/main/OmniStreamStateExample.html