Send and Receive

The Send and Receive functionality allows for a deep integration between the OmniStream hosted application and the webpage showing the application stream. This is useful if you want to have some UI outside of the stream window for example, or if you want to display information from the application within the page. Data is sent between the two ends using a open JSON schema.

Send Data

Send a message to the application using a JSON object.

cloudstream.sendJsonData(data);

Receive Data

Receive a message from the application as a JSON object.

cloudstream.addEventListener("jsondatareceived", (args) => {
  // Get the text from the message and convert to json object
  const data = JSON.parse(args);

  // display as string
  const jsonString = JSON.stringify(data);

  //print it
  console.log("jsondatareceived", jsonString);
});

Testing

To help with testing and debugging state messages the OmniStream Test Page allows messages to be sent and received in an isolated environment.

Example

<!-- We need libZL -->
<script src="https://libzl.zlthunder.net/libzl/versions/latest/libzl.js"></script>

<head>
  <title>ZL Cloud Stream API Example</title>
  <style>
    #textBoxSend {
      margin-bottom: 10px; /* add 20px of margin to the top of the text area */
    }
    #textBoxReceive {
      margin-bottom: 10px; /* add 20px of margin to the top of the text area */
    }

    #sendButton {
      margin-bottom: 10px; /* add 10px of margin to the top of the button */
    }
  </style>
</head>

<!-- We need a container to attach the stream to -->
<div id="streamContainer"></div>

<b>Send json data</b>
<br />
<textarea id="textBoxSend" rows="5" cols="50"></textarea>
<br />
<button id="sendButton">Send Data</button>
<br />
<b>Receive json data</b>
<br />
<textarea id="textBoxReceive" rows="5" cols="50"></textarea>

<!-- 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!");
    });

    const textBoxReceive = document.getElementById("textBoxReceive");

    cloudstream.addEventListener("jsondatareceived", (args) => {
      // Get the text from the message and convert to json object
      const data = JSON.parse(args);

      // display as string
      const jsonString = JSON.stringify(data);
      textBoxReceive.value = jsonString;

      //print it
      console.log("jsondatareceived", jsonString);
    });

    //Connecting to the stream
    //    - options contains parent DOM element name to attach to
    cloudstream.connect(cloudstreamSettings);
  });

  // Get references to the text box and button elements
  const textBoxSend = document.getElementById("textBoxSend");
  const sendButton = document.getElementById("sendButton");

  // Add an event listener to the button
  sendButton.addEventListener("click", () => {
    // Get the text from the text box and convert it to a JSON object
    const data = JSON.parse(textBoxSend.value);
    // Call the cloudstream.sendJsonData function with the data object
    cloudstream.sendJsonData(data);
  });
</script>

Send Data​

Receive Data​

Testing​

Example​

Send Data

Receive Data

Testing

Example