一、HTML 页面
- 必须包含
webRtcPlayer.js
脚本文件,该文件处理浏览器和虚幻引擎应用间的通信,接受并显示来自服务器的媒体流。在非必要的情况下,请勿修改此JavaScript文件。
<script type="text/javascript" src="scripts/webRtcPlayer.js"></script>
- 建议包含
app.js
脚本文件,此文件将设置处理键盘、鼠标和触摸事件的事件监听器,其还包含数个可在播放器页面使用的函数。
<script type="text/javascript" src="scripts/app.js"></script>
- 页面必须含有一个
ID
为player
的div
元素。该元素可被流送自UE4
应用的视频帧所替换。
<div id="player"></div>
- 页面加载时必须调用
app.js
文件提供的load
函数。
二、访问像素流送蓝图 API
在虚幻引擎中运行的像素流送插件会公开一个蓝图API,可在 gameplay 逻辑中使用该 API 处理播放器 HTML 页面发送的自定义 UI 事件,并将事件从虚幻引擎发送到播放器页面,实现网页客户端与 UE 运行程序之间的交互通信。
推荐将 像素流送插件(Pixel Streaming Input
) 组件添加到 PlayerController
中。
三、从播放器页面到 UE 的通信
app.js
文件提供两个可在 HTML 播放器页面进行调用的 JavaScript 函数,以便用户从浏览器向虚幻引擎程序发送事件和命令:emitCommand
和 emitUIInteraction
函数。
-
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); }; }
-
蓝图:
在程序的 gameplay 逻辑中,使用
Bind Event to OnPixelStreamingInputEvent
节点绑定自定义事件来处理此类输入
四、从 UE 到播放器页面的通信
虚幻引擎程序可向所有连接的播放器HTML页面发射自定义事件,用户可在播放器的 JavaScript
环境中响应此类事件,可根据 gameplay 事件更改网络页面 UI。
-
在蓝图中使用
Pixel Streaming > Send Pixel Streaming Response
节点向播放器页面发送事件。 -
在播放器页面的 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 } }
-
调用
app.js
提供的addResponseEventListener
函数来注册监听器函数。为事件监听器和函数向此函数传递一个独特命名。addResponseEventListener('test', myHandleResponseFunction);
-
如需移除事件监听器,可调用
removeResponseEventListener
并传递相同命名。removeResponseEventListener('test');
参考: