Demo Site: https://test.akhi-kajol.com/

Step-1:

From your dashboard go to Plugins → Add New Plugin and search “iframe“.

...

Now apply all the changes and the stream should start.

Communicate with Your App:

Step-1:

First you’ll need to add a plugin to use javascript in your website. Go to Plugins → Add New Plugin and search “simple custom css and js“.

...

Install and activate the marked plugin.

Step-2:

Go to Dashboard → Custom CSS $ JS → Add Custom JS. Now add the title of the javascript file. You can get the necessary javascript codes here: https://github.com/e3ds/E3DS-Iframe-Demo/tree/wordpress-demo-js

Add all three javascript files one by one and publish them. After publishing you can go to All Custom Code to view all your javascript files.

...

Step-3:

Now go back to your page and add another container. Inside that container add an HTML widget.

Edit HTML to add buttons with click handlers in your webpage.

...

Sample HTML:

 <div>
    <div>
    <button onclick="switchTo(1)">Teleport(1)</button>
    <button onclick="switchTo(3)">Teleport(3)</button>
    </div>
    <br/>
    <input type="text" placeholder="Enter Streaming URL" id="urlInput"/>
    <button onclick="updateStreamURL()">Set URL</button>
</div>

Here, switchTo() and updateStreamURL() functions are defined inside demo.js file.

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

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

function updateStreamURL(){
	const url = document.getElementById('urlInput').value;
	document.getElementById("iframe_1").src = url;
}

Step-4:

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) => {
	alert("Increasing session expire time: " + data.value);

});