演示如何在 JavaScript 框架内设置虚幻渲染流的示例项目。

该项目应该是在 iFrame 中设置虚幻像素流的基本演练，而不是一个完全充实的项目。它应该作为构建在其之上的基础。

使用 iFrame 设置像素流是一个非常简单的过程，实际上没有太多内容。为了进行演示，这个简单的 Vue.js 应用程序包含一个由 unreal 提供的默认像素流示例的 iFrame，并使用 JavaScript 方法 .postMessage() 和标准事件侦听器来允许 Vue 应用程序和信令服务器之间的跨源通信。在此示例中，我们使用简单的按钮单击事件作为触发器向信令服务器发送自定义消息。我们还在已安装的 Vue 生命周期挂钩上添加了一个事件侦听器，以接收从信令服务器发送到 Vue 前端的消息，这会被注销并设置为警报，但应提供足够的上下文以在任何情况下使用响应Vue 应用程序中的容量。

iFrame 的纵横比是通过使用宽度和高度的绑定计算属性来维护的。场景交互性由 iFrame 内容窗口内的信令服务器处理，这可以在光标穿过 Vue 应用程序和 iFrame 之间的边界时看到。此光标行为由 Singalling Server 使用 inputOptions 对象启用，并在 LockedMouse 和 HoveringMouse 之间进行选择，使用 HoveringMouse 无需单击 iFrame 即可启用交互。

虚幻应用程序本身的设置方式与处理任何像素流输入/输出的方式相同。我们用于该项目的示例只是记录收到的消息并发送单击的对象的名称。下面我们提供了用于管理场景的蓝图的屏幕截图（所有这些都简单地放置在关卡蓝图中），但是有关虚幻应用程序设置的完整文档；此处找到的文档。

下面是如何通过 iFrame 发送消息的示例。

// Send a json message via the iFrame
document.getElementById("myIframe").contentWindow.postMessage(JSON.stringify(this.jsonMessage), "*");

在我们的版本中，我们使用带有 type 属性的基本 JSON 对象，以允许更灵活地处理数据

window.onmessage = function(messageFromVue) {
   console.log("Message recieved on Signalling Server: " + messageFromVue.data);
   var jsonPayload = JSON.parse(messageFromVue.data);
   if(jsonPayload.type == "TestType") {
      emitUIInteraction(jsonPayload);
   }
}

要接收从信令服务器发送的数据，只需向窗口添加一个监听器即可。该窗口可能会接收来自各种来源的消息，因此值得添加检查以便正确处理数据。

// Adds a listener for any messages coming from the iFrame
window.onmessage = function (e) {
  console.log("Message Recieved from Signalling Server: " + e.data);
};

从 VueJS 应用程序接收数据可以通过与上面所示相同的方式来实现，只需在窗口中添加一个侦听器即可。如前所述，窗口可能会接收来自各种来源的消息，因此值得添加适当的检查和尝试捕获。内容可以添加到虚幻信令服务器内 app.js 中将被调用的任何位置。对于启用了像素流的 Windows 版本，可以在以下位置找到（从版本 4.25 开始）：WindowsNoEditor\WindowsNoEditor\Engine\Source\Programs\PixelStreaming\WebServers\SignallingWebServer\scripts

window.onmessage = function (messageFromVue) {
  // Parse the json payload
  var jsonPayload = JSON.parse(messageFromVue.data);
  // If it is a message we want to send on to the Unreal Application
  if (jsonPayload.type == "TestType") {
    // Log the contents of the payload
    console.log("Message from VueJS recieved on Signalling Server: " + messageFromVue.data);
    // Send the payload  to the Unreal Application
    emitUIInteraction(jsonPayload);
  }
};

要从虚幻应用程序接收消息，请调用 app.js 中名为“addResponseEventListener”的现有方法，命名侦听器并提供处理事件的方法。我们只是将调用添加到 load() 方法的底部。在此示例中，消息只是与虚幻场景中单击的对象名称相关的字符串，但如果需要，它可以是 json 对象。

function handleUnrealMessage(message) {
  // Log the message recieved
  console.log("Message recieved on signalling server from unreal: " + message);
  // Post the data back to the VueJS app
  window.top.postMessage(message, "*");
}
function load() {
setupHtmlEvents();
setupFreezeFrameOverlay();
registerKeyboardEvents();
start();
addResponseEventListener("handle_responses", handleUnrealMessage);
}

如上所述，通过将 inputOptions 中的控制方案类型（在 app.js 中找到）设置为 HoveringMouse；如果需要，您无需单击 iFrame 即可开始交互。

var inputOptions = {
  controlScheme: ControlSchemeType.HoveringMouse,
};

接收消息蓝图（添加到关卡蓝图）与 Unreal 文档上的像素流文档中的内容非常相似，区别仅在于将通过 VueJS 发送的消息打印到屏幕上。

发送消息蓝图（也添加到关卡蓝图中）与虚幻文档中的内容略有不同，只是获取场景中单击的演员的名称并发送回其字符串名称。正如 unreal 文档中提到的，如果您希望能够处理更复杂的对象结构，这也可以是 json 字符串。

与上面两个蓝图完全相同的功能只是合并到同一个蓝图中，以处理从信令服务器发送和接收数据。

有关示例工作的更清晰图像，请参阅此处。