First, go to the GitHub repository and clone the repository:

git clone https://github.com/e3ds/E3DS-Iframe-Demo 

Then, checkout demo-to-change-levels branch:

git checkout demo-to-change-levels

Then, go inside the E3DS-Iframe-Demo and open E3DS_Iframe_Demo.htm file. Inside, you will find an HTML iframe tag.

<iframe
  allow="camera;microphone"
  style="visibility: hidden"
  id="iframe_1"
  src="https://connector.eagle3dstreaming.com/v5/demo/E3DSFeaturesTemplate_Arslan_Ship/E3DS-Iframe-Demo"
  width="100%"
  height="100%"
  allowfullscreen
  >
  </iframe>

Here, the value of src attribute refers to the streaming URL of your app.

Now, open the E3DS_Iframe_Demo.htm file in a web browser.

Clicking on these two buttons will take you to different maps. To learn how it works open demo.js file inside js folder and find switchMap() function:

 function switchMap(val) 
{
	console.log("=== Registered switchTo action, Value is: ", val);

	let descriptor = {
		"type":"changeLevel",
		"value":val// it have to be same as unreal umap name 
	};
	//emitUIInteraction(descriptor);
	let obj =	{
					cmd: "sendToUe4",
					value: descriptor,
				}
	

	document.getElementById("iframe_1").contentWindow.postMessage(JSON.stringify(obj), "*");
}
 

Here, iframe_1 is the id of the iframe tag. The descriptor gets sent to the unreal app.

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.