Unreal——像素流送播放器页面与 UE 通信

一、HTML 页面

1. 必须包含 webRtcPlayer.js 脚本文件，该文件处理浏览器和虚幻引擎应用间的通信，接受并显示来自服务器的媒体流。在非必要的情况下，请勿修改此JavaScript文件。
   <script type="text/javascript" src="scripts/webRtcPlayer.js"></script>
2. 建议包含 app.js 脚本文件，此文件将设置处理键盘、鼠标和触摸事件的事件监听器，其还包含数个可在播放器页面使用的函数。
   <script type="text/javascript" src="scripts/app.js"></script>
3. 页面必须含有一个 ID 为 player 的 div 元素。该元素可被流送自 UE4 应用的视频帧所替换。
   <div id="player"></div>
4. 页面加载时必须调用 app.js 文件提供的 load 函数。

二、访问像素流送蓝图 API

在虚幻引擎中运行的像素流送插件会公开一个蓝图API，可在 gameplay 逻辑中使用该 API 处理播放器 HTML 页面发送的自定义 UI 事件，并将事件从虚幻引擎发送到播放器页面，实现网页客户端与 UE 运行程序之间的交互通信。

推荐将 像素流送插件（Pixel Streaming Input） 组件添加到 PlayerController 中。

三、从播放器页面到 UE 的通信

app.js 文件提供两个可在 HTML 播放器页面进行调用的 JavaScript 函数，以便用户从浏览器向虚幻引擎程序发送事件和命令：emitCommand 和 emitUIInteraction 函数。

1. js 代码：

       // 从播放器页面到UE4的通信
       let testButton = document.getElementById('test-button');
       if (testButton !== null) {
           testButton.onclick = function (event) {
   
               // emitCommand 执行控制台命令
               // ConsoleCommand - 使用此键可在远程虚幻引擎程序上执行控制台命令。
               // 此键的值应为字符串，其中包含要运行的命令及其所需的参数
               let consoleDescriptor = {
                   ConsoleCommand: 'Stat FPS'
               };
               emitCommand(consoleDescriptor);
   
               // emitUIInteraction
               // 可向其传递单个字符串或JavaScript对象
               let descriptor = {
                   Command: "MyCustomCommand",
                   LoadLevel: "/Game/Maps/Level_2",
                   PlayerCharacter: {
                       Name: "Shinbi",
                       Skin: "Dynasty"
                   }
               }
               emitUIInteraction(descriptor);            
           };
       }
   

2. 蓝图：

   在程序的 gameplay 逻辑中，使用 Bind Event to OnPixelStreamingInputEvent 节点绑定自定义事件来处理此类输入

   

四、从 UE 到播放器页面的通信

虚幻引擎程序可向所有连接的播放器HTML页面发射自定义事件，用户可在播放器的 JavaScript 环境中响应此类事件，可根据 gameplay 事件更改网络页面 UI。

1. 在蓝图中使用 Pixel Streaming > Send Pixel Streaming Response 节点向播放器页面发送事件。

   

2. 在播放器页面的 JavaScript 中编写自定义事件处理器函数

   function myHandleResponseFunction(data) {
   
       console.warn("Response received!");
       console.log(data);
       switch (data) {
           case "MyCustomEvent":
               // handle one type of event
           case "AnotherEvent":
               // handle another event
       }
   }
   

3. 调用 app.js 提供的 addResponseEventListener 函数来注册监听器函数。为事件监听器和函数向此函数传递一个独特命名。

   addResponseEventListener('test', myHandleResponseFunction);

4. 如需移除事件监听器，可调用 removeResponseEventListener 并传递相同命名。

   removeResponseEventListener('test');

参考：

1. 自定义播放器网页