Source:

https://github.com/e3ds/E3DS-Iframe-Demo/tree/iframe-demo-html

Iframe Demo:
https://iframe.eagle3dstreaming.com/

ReactJS Iframe Demo:
https://iframe_react.eagle3dstreaming.com/

UE5 Iframe Demo::
https://iframe_ue5.eagle3dstreaming.com/

Unreal project source code used in the demo:
https://bitbucket.org/Eagle3DStreaming/e3dsfeaturestemplate/

Overview

Communication means the transmission of data between two people or entities. Where one will send data and another one will receive it and vice versa.

Part-1 :
Sending data from the parent webpage to the Unreal App

To communicate with the unreal app you must send data from the webpage to the unreal app and the app will send you a response. Data must be sent as a string to the unreal app. To send Integer data, we have to convert the integer into a string using toString() method. To send JSON object, we have to stringify it using JSON.stringify() method. For an array, we need to convert it to a JSON object and then stringify the object. Below is an example of how to send JSON data from the webpage to the unreal app.

From the Javascript client page:

let descriptor = {
		Teleport: "6"
	};
let obj = {
	cmd: "sendToUe4",
	value: descriptor
}
document.getElementById("iframe_1").contentWindow.postMessage(JSON.stringify(obj), "*");

Part-2 :
Manipulating style attribute of an HTML element

This can also be achieved by sending data from the webpage. But we need to make a few changes in the JSON object for that. Here’s an example that hides the settings button inside the streaming UI:

const toggleSettings = (id)=>{

    let descriptor = {
        id,
        property: 'display',
        value: 'none'
    };
    let obj =
        {
            cmd: "style",
            value: descriptor,
        }
    document.getElementById("iframe_1").contentWindow.postMessage(JSON.stringify(obj), "*");
}

Here id is the ID of the HTML element whose style you are trying to change.

Part-3 :
Receiving data from Unreal App to the parent webpage

After sending the data we will receive a response the the unreal app. This response can be caught by using window.e3ds.onEvent function. Here’s an example of that -

window.e3ds.onEvent("increaseSessionExpireTime", (data) => {
    console.log("Increasing session expire time", data);

    // Example of iframe
    let iframe = document.createElement("iframe");
    iframe.src="http://example.com";
    iframe.classList.add("iframeStyle");
    iframe.style.display = "block";
    document.getElementsByTagName("body")[0].append(iframe);

    // Example of a button
    let button1 = document.createElement("button");
    button1.innerText = "Close Iframe";
    button1.classList.add("closeButtonOfIframe");
    button1.addEventListener("click", (ev) => {
        iframe.style.display = "none";
    });
    document.getElementsByTagName("body")[0].append(button1);
});

Part-4 :
Set Custom Resolution from Webpage with Iframe

Go to the following document to learn about how to set custom resolution from your webpage.

Need help? Contact Support

If you still need help, contact support to get your issue resolved quickly.

Submit a new request at E3DS support portal or send an Email at support@eagle3dstreaming.com.

Seek advice. Connect with others. Share your experiences. Join our lively Community Forum today.