...

...

...

...

Refer to Multiplayer Demo, Embed Stream into Webpage using iFrame and communicate with Unreal App.

Overview

Communication means refers to the transmission of data between two people individuals or entities. Where one will send data and another one will receive it , where one sends data and the other receives it, and vice versa.

...

1

...

. Sending data from the parent

...

Webpage to the Unreal App

To communicate with the unreal app, you must should send data from the webpage to the unreal app and the app will send you a response. Data

To send Integer data, we have to convert the integer into a string using the toString()method.

To send a JSON object, we have to should stringify it using the 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.

...

let descriptor = {
		Teleport: "6"
	};
let obj = {
	cmd: "sendToUe4",
	value: descriptor
}
document.getElementById("iframe_1").contentWindow.postMessage(JSON.stringify(obj), "*");
//here "iframe_1" is the id of the HTML iframe element

...

2

...

. Manipulating the style attribute of an HTML element

This can also be achieved by sending data from the webpage . But but we need to make a few changes in the JSON object for that.

Here’s an example that hides the settings button inside within 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.

...

3. Receiving data from the Unreal App to the parent

...

Webpage

After sending the data we will receive a response from the unreal app.

This response can be caught by using window.e3ds.onEvent function. Here’s an message event handler defined in the page .

Below is a detailed example of that - :

function HandleResponseFromUE4(jsonObj) {
  //process whateverProcess uthe wantJSON toobject dosent withby yourthe objectUnreal {app to  console.log(jsonObj);the webpage
  

 if(window.e3ds.events[jsonObj.cmd]){}


const eventHandler  window.e3ds.events[jsonObj.cmd](jsonObj);
  }
}


//eagle3dstreaming's Server   to Iframe communication
const eventHandler = (event) => {
  console.log('Message From SS -- > Iframe  ', event.data);
= (event) => {
  // This function will receive all kinds of events the webpage receives
  
  // Check if event.data.type exists to identify if it was sent by the Unreal app
  if (!event.data.type) {
    // If isevent.data itincludes a field named cmd, then this data is notcoming from serverthe Unreal app.
  {  // If  console.log('Message From UE4-- > Iframe  :', event.data);your Unreal app uses a different field name, replace this field name with the one you have used in your Unreal app
    if (typeof event.data === 'string' && event.data.includes('cmd')) {
      // We are receiving data as a string. Now we try to parse it to check
      // if this string represents a JSON or not.
      // If you are sending a normal string from the Unreal app, then this is not needed 

      const parsedData = JSON.parse(event.data);
      if (parsedData.cmd) { //than It is itJSON aobject data sent from ue4 ???UE4
        HandleResponseFromUE4(parsedData); //process Process the data sent by ue4UE4
      }
    }
  }
  else{
		//data sent from server
		messageHandler(event);

	}
}
// We are binding eventHandler to receive all kinds of messages the webpage receives
window.addEventListener("message", eventHandler);

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.

Part 5:
How to send a Pixel Streaming Response from unreal app to webpage

Useful Events:

See this document on Useful Events in Iframe Solution.

Need help? Contact Support

...

4. Receiving Non-Unreal Data from an Iframe on a Webpage

If a message doesn’t contain event.data.type, it is sent to messageHandler function.

See this document to learn different types of event sent to messageHandler.

const messageHandler = (event) => {
	const loaderStep1 = document.getElementById("loaderStep1");
	const loaderStep2 = document.getElementById("loaderStep2");
	const loaderStep3 = document.getElementById("loaderStep3");
	const iframeElem = document.getElementById("iframe_1");
	const sidebar = document.getElementById("sidebar");


	console.log("received data event type " + event.data.type)
	switch (event.data.type) {
		case "ResponseFromUE4":
			console.log("UE4->iframe: " + event.data.descriptor)
			myHandleResponseFunction(event.data.descriptor);
			break;
		case "stage1_inqueued":
			loaderStep1.style.visibility = "visible";
			break;
		case "stage2_deQueued":
			// loading screen 1 hides
			break;
		case "stage3_slotOccupied":
			loaderStep1.style.display = "none";
			loaderStep2.style.visibility = "visible";
			break;
		case "stage4_playBtnShowedUp":
			//loading screen 2 hides
			loaderStep2.style.visibility = "hidden";
			iframeElem.style.visibility = "visible";
			// loaderStep3.style.visibility = "visible";
			let playButton = document.getElementById("playButtonParent");
			playButton.click();
			onPlayBtnPressed();
			break;
		case "stage5_playBtnPressed":
			sidebar.style.visibility = "visible";
			loaderStep2.style.display = "none";
			iframeElem.style.visibility = "visible";
			$('#iframe_1').focus();
			break;
		case "_focus":
			document.getElementById("iframe_1").focus();
			break;
		case "isIframe":
			let obj = {
				cmd: 'isIframe',
				value: true
			};
			document.getElementById("iframe_1").focus();
			document.getElementById("iframe_1").contentWindow.postMessage(JSON.stringify(obj), "*");;
			break;
			
		case "QueueNumberUpdated":
			console.log("QueueNumberUpdated. New queuePosition: : " +  event.data.queuePosition)
			break;
			
		case "stage3_1_AppAcquiringProgress":
			console.log("stage3_1_AppAcquiringProgress percent: " + JSON.stringify( event.data.percent))
			break;
			
		case "stage3_2_AppPreparationProgress":
			console.log("stage3_2_AppPreparationProgress percent:" + JSON.stringify( event.data.percent))
			break;	
		case "shortCuts":
			console.log("Key pressed");
			break;
		case "Error_Redirect":
			loaderStep2.style.display = "none";
			iframeElem.style.visibility = "visible";
			$('#iframe_1').focus();
		default:
			console.error("Unhandled message data type");
			break;
	}
}

5. Setting a Custom Resolution via an Iframe on a Webpage

Refer to this document to learn how to set a custom resolution on your webpage.

6. Sending a Pixel Streaming Response from the Unreal App to the Webpage

Refer to this document.

Useful Events

See this document for Useful Events in Iframe Solution.

...

Need help? Contact Support

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

Requests sent on weekends will not be addressed until the following business day.