BimAnt

VueJS集成虚幻像素流送

admin -

最近，我们一直在研究使用虚幻引擎 (UE) 来渲染和探索通过我们的地图解决方案生成的大型场景。虽然 UE 可以轻松处理这些场景，但我们知道可以通过可靠的基于 Web 的应用程序将它们呈现给用户也很重要。

尽管有几种现有的解决方案可用于查看世界的 3d 渲染并与之交互，但主要限制之一是能够以合理的帧速率运行它们所需的硬件要求。这导致许多流行设备（例如智能手机）无法充分利用此类软件。

如果你发现自己处于类似情况，那么本指南将成为你通过像素流在前端呈现 UE 场景的第一步。该解决方案的整体架构主要由三个部分组成，即 UE 引擎应用程序本身、预先存在的 UE 节点服务器和自定义前端应用程序。对于我们的网络应用框架，我们将使用 Vue.js。

在本教程中，我们重点关注两个要点：

  • 向虚幻应用程序发送数据
  • 从虚幻应用程序接收数据

1、虚幻项目

在开始本基础教程和设置 Unreal 应用程序之前，我们建议您你看使用 Unreal Engine 像素流送的官方文档，并熟悉 iFrame 环境之外的基本设置。、

虚幻项目的设置与虚幻引擎中设置的任何其他像素流式处理应用程序相同，但是能够更好地解释必要的步骤（并能够复制它们）；我们将通过一个示例进行讨论。该示例本身定义了关卡蓝图中的所有蓝图逻辑，尽管可以根据需要将其移动到任何参与者蓝图中。

2、接收来自 VueJS 的消息

从 VueJS 应用程序接收到 JSON 有效负载后，我们希望能够将有效负载中的消息打印到屏幕上。为了做到这一点，我们可以构建一个非常基本的蓝图来监听来自信令服务器的事件。

监听信号事件的基本蓝图

所有发送到像素流应用程序的消息，通过将事件绑定到PixelStreamingInputComponent类方法BindEventToOnInputEvent来接收。为此，我们可以将自定义事件绑定到BindEventToOnInputEvent节点。事件描述符将包含从 VueJS 应用程序接收到的 JSON 有效负载。通过将CustomEvent描述符连接到GetJsonStringValue节点，我们可以提取想要打印的字段，在本例中为“消息”字段。

通过添加分支节点并连接到GetJsonStringValue节点的成功输出，我们可以确保在继续之前成功检索到值。最后一步是将GetJsonStringValue节点的输出字符串连接到PrintString节点以及Branch节点的真正执行。

尽管在我们的示例中我们只想打印消息字段，但你可以通过从 JSON中检索类型字段并相应地处理每个案例来处理自定义案例。

2、向 VueJS 发送消息

在这个发送示例中，我们希望能够单击虚幻场景中的Actor并将其名称返回给 VueJS 应用程序。

基本的actor交互蓝图

虽然乍一看发送蓝图可能看起来更复杂，但它实际上非常简单。大多数节点用于检索必要的虚幻信息，并且仅在你希望实现相同目标时才需要。

感兴趣的主节点是SendPixelStreamingResponse节点。该节点需要连接到PixelStreamingInputComponent类的实例，在本例中，将在单击演员时执行。SendPixelStreamingResponse接收一个字符串值，其内容被发送回 VueJS 应用程序。尽管在本例中我们发送的是字符串名称，但这可以是任何可以序列化为字符串的内容，例如 JSON 对象。

3、完整蓝图

可以在下面看到我们在像素流应用程序中使用的完整蓝图逻辑，处理发送和接收数据。

像素流的完整蓝图

4、Node.js 服务器

Node js 服务器使用服务器端渲染向提供的地址提供静态 html 页面，同时全屏显示当前在 UE 中渲染的场景。它使用 webRTC 和 web 套接字来提供像素流，并将事件侦听器添加到静态 html 页面以将交互数据提供回 UE。服务器默认在 localhost 端口 80 上运行。打开目录并运行“ node server.js ”将启动服务器并提供 vue 应用程序稍后在 iFrame 中呈现所需的页面。

一些小改动是必要的，首先将inputOptions对象更改为使用controlSchemeType HoveringMouse ，这使得 iFrame 和服务器之间的行为更加流畅。接下来，要设置 Vue 应用程序和 UE 之间的交互，请添加示例 GitHub 存储库中的两个函数window.onmessage以添加用于接收消息的侦听器，然后使用已定义的 emitUIInteraction 函数将有效负载传递给用户。添加 handleUnrealMessage 函数，其中使用window.top.postMessage来“转发”从 UE 发送的消息，现在可以处理双向传递消息。

5、Vue.js 应用程序

我们的示例 Vue 应用程序可从 GitHub 获得，但是如果你希望从头开始设置自己的 Vue 应用程序，请按照以下步骤操作。

5.1 设置 Vue 应用程序

首先，你需要安装 vue，使用终端命令“ npm install vue ”，并创建一个新项目“vue create pixel-streaming”，在将目录更改为该项目之前选择路由器和历史模式选项，最后' npm run serve ' 将部署 vue 应用程序的本地版本进行开发。在 views 文件夹中，创建一个新的 View 来容纳 iFrame 和像素流行为。要在应用程序中显示此视图，请在主App.vue文件中包含 router-link 组件，并使用 router 文件夹中的index.js文件确保 ' / ' 的路径链接到你刚刚创建的新视图.

5.2 设置 iFrame

视图中只需要一个简单的模板，包括一个 ID 为“ myIframe ”的 iframe。这里还必须包含 iFrame 内容的位置，我们将使用 ':' 简写绑定到状态。我们使用“ http://localhost:80 ”的signallingServerAdress，因为这是node js服务器默认运行的地方，如果在不同的机器上运行可以更改，但对于测试来说效果很好。我们还包括了一些简单的 CSS 样式，但这对于工作项目来说不是必需的。

5.3 设置流逻辑和接收消息

UE 提供的 Node.js 服务器将处理开箱即用的流式传输、用户交互和场景导航，因此通过运行它并将 iFrame 从 vue 应用程序指向它所服务的 html 页面，将提供相同的结果，但在更多有用的前端框架。唯一需要注意的是，你需要处理一些纵横比维护，并将任何自定义事件从 vue 应用程序通过服务器传播回 UE。利用Vue中的生命周期钩子实现这一点相对简单，定义三个方法并在mounted钩子中调用它们；resizeIFrame、addResizeListener和addListener。这些方法将在 vue 组件创建和挂载后立即执行。

  • resizeIFrame：使用 0.75（在数据中设置）的 iFrameScale 和 1.778 的纵横比更改 IFrame 的宽度和高度样式属性。
  • addResizeListener：向窗口添加事件侦听器，调整大小时将调用 resizeIFrame 方法以保持纵横比。
  • addListener：使用window.onmessage为任何跨站点通信添加侦听器。此方法还包括检查消息类型是否为对象并忽略 webpack 消息的逻辑。可以在此处设置额外的安全性以确认消息来自预期位置。当前在收到消息时，会触发 JavaScript 警报来显示消息，但此时消息可用于触发其他方法或将数据保存到状态，因此 Vue 前端可以提供比节点服务器本身更大的灵活性.

5.4 设置发送消息

最后一个方法sendMessage是在组件上定义的。此方法用于将消息发送到节点服务器。我们提供的示例使用了 data.json 中定义的 JSON 消息。此内容使用.contentWindow.postMessage发布。这个方法目前是通过向我们原始模板中的按钮添加一个点击事件来触发的，数据中的自定义 JSON 消息也绑定到我们原始模板的输入，作为一个例子，vue 在与UE提供的流媒体。

原文链接：Unreal Engine WebRTC Streaming within a VueJS App

BimAnt翻译整理，转载请标明出处