UE4项目如何部署到html网页上，有什么限制和要求？

UE4项目如何部署到html网页上，有什么限制和要求？

 

HTML页面要求

您的自定义HTML播放器页面必须遵循一些最低要求。

  • 您必须包括/scripts/webRtcPlayer.js文件。该文件处理浏览器和虚幻引擎应用程序之间的通信，接收并显示来自服务器的媒体流。除非绝对必要，否则请勿修改此JavaScript文件。

    <script type="text/javascript" src="scripts/webRtcPlayer.js"></script>

  • 我们强烈建议您也包含/scripts/app.js文件。此文件设置事件侦听器，用于处理键盘，鼠标和触摸事件。它还包含一些功能和挂钩，您可以在播放器页面中使用这些功能和挂钩，如本页以下各节所述。如果您对JavaScript有一定的了解，则可以随意研究此文件的代码并修改默认行为以适合您的需求。例如，如果要禁用键盘输入但使鼠标和触摸事件保持工作状态，则需要通过查找并注释掉处理键盘事件的代码来自定义此文件。

    <script type="text/javascript" src="scripts/app.js"></script>

  • 该页面必须具有divID为的元素player。该元素将替换为从UE4应用程序流式传输的视频帧。

    <div id="player"></div>

  •  

    <body onload="load()">

自定义播放器输入选项

该app.js文件提供了一些JavaScript配置参数，您可以在自定义播放器页面中覆盖这些参数，以控制播放器小部件响应用户交互的方式。该 inputOptions对象公开以下属性：

属性

默认

描述

控制方案

ControlSchemeType.LockedMouse

确定播放器窗口小部件在播放器与窗口小部件进行交互时是否捕获并锁定鼠标。接受以下值：

  • ControlSchemeType.LockedMouse-当此控制方案处于活动状态时，单击播放器小部件将使其捕获并锁定鼠标光标。鼠标的任何进一步移动都会立即传递给虚幻引擎应用程序中的输入控制器。通常，这允许用户通过简单地拖动鼠标来移动和旋转相机。要从播放器小部件的控件中释放光标，用户可以按Esc键。

  • ControlSchemeType.HoveringMouse-当此控制方案处于活动状态时，鼠标光标悬停在播放器小部件上，而不与之交互。为了将鼠标移动发送到虚幻引擎应用程序的输入控制器，用户需要单击并按住鼠标的左键。

inhibitorBrowserKeys

真正

启用此设置后，播放器小部件将拦截功能键（F1至F12）和Tab键，并将这些按键事件传递给Unreal Engine应用程序，而不是允许浏览器正常处理它们。例如，这意味着在此设置处于活动状态时，按F5不会刷新浏览器中的播放器页面。相反，该事件将传递到虚幻引擎应用程序，并具有其通常的功能，即切换视图以可视化着色器复杂性。

fakeMouseWithTouches

假

启用此选项后，如果用户正在带有触摸屏的设备上观看流，例如智能手机或平板电脑，则此设置将使虚幻引擎应用程序将单指触摸事件解释为鼠标单击和拖动事件。启用此设置可以使移动设备上的用户能够部分控制您的虚幻引擎应用程序，即使该应用程序的输入控制器未专门处理触摸输入事件也是如此。

您可以在播放器页面中通过包含如下代码块来设置这些值。确保在将app.js文件加载到页面之后但调用其load 函数之前的任何时间都运行此代码。

<script>
inputOptions.controlScheme = ControlSchemeType.HoveringMouse;
inputOptions.fakeMouseWithTouches = true; 
</script>

禁用用户输入

要完全禁用一种或多种类型的输入设备的用户输入，您可以使用空的实现在播放器页面的JavaScript环境中覆盖以下功能：

  • registerHoveringMouseEvents- 将inputOptions.controlScheme设置为ControlSchemeType.HoveringMouse时，禁用所有输入鼠标事件。

  • registerLockedMouseEvents- 将inputOptions.controlScheme设置为ControlSchemeType.LockedMouse时，禁用所有输入鼠标事件。

  • registerTouchEvents-在移动设备和平板电脑上禁用触摸事件。

  • registerKeyboardEvents-禁用所有键盘事件。

例如，您可以在播放器HTML页面中包含此JavaScript块以禁用所有输入。如上所述，在将app.js文件加载到页面之后但调用其load函数之前，可以随时运行此代码。

<script>
registerHoveringMouseEvents = function() {}
registerLockedMouseEvents = function() {}
registerTouchEvents = function() {}
registerKeyboardEvents = function() {} 
</script>

要使一种或多种输入类型保持活动状态，请注释掉或删除与要保留的输入类型相对应的行。

自定义播放器小部件样式

 

但是，小部件有时可能需要重新初始化其大小。通常在调整浏览器窗口大小（如果将小部件设置为自动填充可用空间）时，或者在更新输入视频流的分辨率时，会发生这种情况。发生这种情况时，styleplayer元素的属性将被新值覆盖，这可能会覆盖您在自己的HTML或JavaScript中设置的值。

为避免这种情况，您可以在名为的特殊全局变量中设置自定义CSS值styleAdditional。每当app.js需要调整播放器大小并清除其样式时，它将在styleAdditional变量中设置的值附加到它分配给播放器元素的新样式属性的末尾。例如，当用户将鼠标悬停在播放器小部件上时，以下值会将鼠标光标更改为手形：

styleAdditional = 'cursor: grab; cursor: -moz-grab; cursor: -webkit-grab';

访问像素流蓝图API

在虚幻引擎中运行的Pixel Streaming插件公开了一个Blueprint API，您可以在游戏逻辑中使用该API处理玩家HTML页面发送的自定义UI事件，并将事件从虚幻引擎发送到玩家页面。

要访问此蓝图API：

  1. 在启动时，像素流插件始终将组件添加到当前的播放器控制器。您可以使用“演员”>“按类别获取组件”节点从播放器控制器中检索它。单击“组件类”输入，然后在列表中查找PixelStreamingInputComponent：
    PixelStreamingInputComponent

    如果需要引用当前的播放器控制器，请使用“游戏”>“获取播放器控制器” 节点，如上所示。

  2. 从“按类获取组件”节点的输出端口上向右拖动，然后查找“像素流”类别。

    像素流蓝图API

    单击查看完整图像。

从播放器页面与UE4进行通信

该app.js文件提供了两个JavaScript函数，您可以在HTML播放器页面中调用这些函数，以允许用户将事件和命令从浏览器发送到Unreal Engine应用程序：

  • emitCommand 可以向游戏发送命令的预设列表，以更改分辨率，执行控制台命令或降低编码器的比特率。请参阅下面的使用emitCommand函数 。

  • emitUIInteraction 将任意字符串或JavaScript对象发送到游戏。使用此功能可以从玩家UI发送自己的自定义命令，您可以在游戏逻辑中进行响应以在应用程序中产生所需的任何效果。请参阅下面的使用emitUIInteraction函数 。

使用emitCommand函数

调用该emitCommand 函数时，必须向其传递一个JavaScript对象。该对象必须包含与以下字符串之一匹配的键：

  • ConsoleCommand-使用此键在远程虚幻引擎应用程序上执行控制台命令。该键的值应该是一个字符串，其中包含要运行的命令以及所需的任何参数。例如：

    let descriptor = {
    ConsoleCommand: 'stat fps'
}
emitCommand(descriptor);

  • Resolution-使用此键重置虚幻引擎应用程序的渲染分辨率。此项的值应为包含Width和Height属性的对象。例如：

    let descriptor = {
    Resolution: {
        Width: 1024,
        Height: 768
    }
}
emitCommand(descriptor);

  • Encoder-使用此键将命令发送到编码器以控制媒体流的质量。当前，它支持一个命令：BitrateReduction。该值指定应将测量的可用带宽的百分比分配给视频编码器的比特率。将该值设置得太高可能会导致网络拥塞和数据包丢失，进而导致增加的延迟和客户端上的视频失真。默认情况下，此值设置为50％。如果发现部署中存在延迟和视频伪像问题，则可以尝试进一步降低该值。例如：

    let descriptor = {
    Encoder: {
        BitrateReduction: 20
    }
}
emitCommand(descriptor);

由于虚幻引擎控制台命令的emitCommand 功能强大，该功能可能会带来安全风险。为了使该功能正常工作，-AllowPixelStreamingCommands在启动虚幻引擎应用程序或使用“独立游戏”选项从虚幻编辑器启动它时，还需要在命令行上提供参数。

使用emitUIInteraction函数

调用该emitUIInteraction 函数时，可以向其传递单个字符串或JavaScript对象。例如：

emitUIInteraction("MyCustomCommand");

要么

let descriptor = {
    LoadLevel: "/Game/Maps/Level_2"
    PlayerCharacter: {
        Name: "Shinbi"
        Skin: "Dynasty"
    }
}
emitUIInteraction(descriptor);

如果传递JavaScript对象，则该emitUIInteraction 函数会在内部将其转换为JSON字符串。然后，它将结果字符串传递回虚幻引擎应用程序中的Pixel Streaming插件，这将在输入控制器上引发一个事件。在应用程序的游戏逻辑中，您可以使用将事件绑定到OnPixelStreamingInputEvent节点来绑定自己的自定义事件以处理这些输入。例如：

将事件绑定到OnPixelStreamingInputEvent

单击查看完整图像。

您需要绑定一次此事件，通常是在游戏开始时。每当连接到您的虚幻引擎应用程序实例的任何播放器HTML页面都调用emitUIInteraction`function, your custom event is automatically invoked, regardless of the input passed to generateUIInteraction`时。

您分配的自定义事件（例如，上图中的UI Interaction节点）具有一个名为Descriptor的输出，您可以使用该输出检索该emitUIInteraction 函数发送给您的Unreal Engine应用程序的字符串。您可以使用该值来确定每次emitUIInteraction 调用游戏代码时需要如何响应。

例如，以下蓝图测试以查看给定的输入是否emitUIInteraction 包含字符串“ MyCustomCommand”，并调用自定义函数来处理事件：

搜索子串

单击查看完整图像。

如果您最初将JavaScript对象传递给emitUIInteraction，则可以使用Pixel Streaming> Get Json String Value节点从该JSON对象检索任何键的值。例如，以下蓝图测试名为LoadLevel的键。如果存在该键，它将调用一个自定义函数来处理该事件：

获取JSON字段值

单击查看完整图像。

如果需要检索嵌套键，请对键使用JavaScript中常见的点符号。例如，PlayerCharacter.Name或PlayerCharacter.Skin。

从UE4与播放器页面进行通信

您可以使您的虚幻引擎应用程序向所有连接的播放器HTML页面发出自定义事件，您可以在播放器的JavaScript环境中对其进行响应。这使您可以更改网页UI以响应游戏事件。

要进行设置：

  1. 在您的虚幻引擎应用程序中，只要您想向播放器页面发送事件，请使用“像素流”>“发送像素流响应”节点。为节点指定一个自定义字符串参数，以向播放器页面指示发生了什么事件。

    pixelstreaming-send-game-event.png

    单击查看完整图像。

  2. 在播放器页面的JavaScript中，您需要编写一个自定义事件处理函数，该页面每次在收到虚幻引擎应用程序的响应事件时都会被调用。它将传递由“发送像素流响应”节点发送的原始字符串参数。例如：

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

  3. 通过调用addResponseEventListener 提供的函数来注册您的侦听器函数app.js。您为该函数传递事件侦听器和函数的唯一名称。例如：

    addResponseEventListener("handle_responses", myHandleResponseFunction);

  4. 如果您需要删除事件侦听器，请调用removeResponseEventListener 并传递相同的名称。例如：

    removeResponseEventListener("handle_responses");

如果要传递更复杂的数据，可以将传递给“发送像素流响应”节点的字符串格式化为JSON。例如：
使用JSON发送像素流响应
然后，在您的JavaScript事件处理函数中，使用  JSON.parse(data)将该字符串解码回JavaScript对象。

暂停不活动的连接

在某些类型的Pixel Streaming部署中，您可能希望自动断开在一段时间内不活动的用户的连接。例如，如果您具有有限的虚幻引擎应用程序池，并且可以访问由匹配服务器控制的实例，则可能需要删除不活动的较旧的连接，以确保您有可用的应用程序实例来处理新的传入连接要求。

您可以配置Pixel Streaming播放器页面以检测用户何时似乎远离键盘（AFK），即用户何时未在可自定义的时间间隔内与播放器小部件进行交互。AFK系统会警告用户：

AFK超时警告

如果用户继续不响应，则AFK系统最终将断开其会话。

用户与播放器面板的任何交互都会重置AFK计时器。这包括鼠标的移动和拖动，鼠标按钮的按下，键盘的按下，移动设备上的触摸事件以及使用emitCommand和emitUIInteraction 功能设置的自定义交互。

要使用AFK系统，请在播放器页面的JavaScript中设置以下三个属性。在加载app.js文件之后但在调用其load函数之前执行此操作。

属性

描述

afk.enabled

确定AFK系统是否应检查用户交互。默认值为false; 将此值设置为true使非活动连接超时。

afk.warnTimeout

设置用户可以在看到播放器小部件中的警告覆盖之前可以远离键盘的最大时间间隔（以秒为单位）。默认值为120，即两分钟。

afk.closeTimeout

在afk.warnTimeout间隔过去之后，并且用户看到有关断开连接的警告消息之后，此变量设置时间间隔（以秒为单位），直到用户的连接自动断开（除非他们与播放器小部件进行交互）。默认值为10。

如果要自定义叠加层的内容，可以updateAfkOverlayText()在播放器页面中重新定义功能。在您的实现中，将afk.overlay.innerHTML属性设置为您希望当用户离开AFK超时值以上时播放器窗口小部件显示的HTML。

本页提供了一些示例，说明如何设置像素流架构的组件以实现不同的目标。

STUN和TURN服务器

为了使Signaling和Web Server能够协商虚幻引擎应用程序和浏览器之间的直接连接，各方需要发送对方自己的IP地址。浏览器需要能够访问UE4应用程序发送的IP地址，反之亦然。

在简单的局域网中，每个端点通常可以假定对方可以使用其自己的网卡已知的专用IP地址访问它。通过开放Internet，跨子网，或者在浏览器和UE4应用程序之间插入网络地址转换（NAT）服务时，通常不是这种情况。相反，各方需要通过查询实现STUN（用于NAT的会话遍历实用程序）协议的服务器来查找自己的公共可见IP地址。在STUN服务器告知每个终结点其公共可见的IP地址之后，信令和Web服务器可以继续代理其直接连接。

STUN和TURN服务器的像素流

或者，您可以使用TURN服务器在UE4应用程序和浏览器之间中继媒体流。使用TURN协议，TURN服务器一方面连接到UE4应用程序，另一方面连接到浏览器。UE4应用程序将其所有流数据发送到TURN服务器，该服务器将数据转发到浏览器。在这种情况下，UE4应用程序和浏览器之间没有直接连接。（如果需要通过无线运营商网络支持移动设备，则可能别无选择，只能使用TURN服务器。移动网络通常会阻止客户端通过WebRTC协议成功连接。）

STUN和TURN协议以及从一台服务器回退到另一台服务器的能力共同构成了ICE（交互式连接建立）框架。

您可以 在Internet上找到几种STUN和TURN服务器的开源实现。 您甚至可以免费使用公共STUN服务器代替托管自己的服务器，尽管在使用不托管自己的服务时应谨慎行事。（由于通过TURN协议中继媒体涉及吞吐量和带宽，因此很少有免费提供公共TURN服务。）

为了方便起见，虚幻引擎还附带了C ++ WebRTC SDK中定义的STUN和TURN参考服务器的二进制版本。您可以在Engine/Source/ThirdParty/WebRTC/rev.23789/programs/Win64/VS2017/releaseUnreal Engine安装位置下的文件夹中找到这些文件。这些实现可能无法提供生产级的可靠性，但可以帮助您入门。

要将像素流设置为使用ICE连接，需要在信号和Web服务器的peerConnectionOptions配置参数中设置要使用的STUN和TURN服务器的主机名。有关如何格式化此参数以及如何提供此参数的详细信息，请参见《像素流参考》 。

另外，如果您要托管自己的STUN或TURN服务器，则必须确保在openInternet上可见在peerConnectionOptions参数中为其指定的IP地址和端口。

多个玩家端点

您可能希望所有用户都在同一个虚幻引擎会话中，但不具有完全相同的控制该会话的能力。

例如，您可能想要创建一个演示文稿之类的体验，在该演示文稿中，演示者可以从其浏览器完全控制虚幻引擎，而其他用户只能查看该流。或者，您可能希望为不同的用户创建自定义的控件集，以便他们可以协作以实时控制体验的不同方面。

对于此类情况，您可以使一个虚幻引擎实例与一堆Web服务一起运行，但是在Signaling和Web Server上创建不同的Player HTML页面：

多个播放器页面

在这种情况下，您可以自定义每个不同的HTML播放器页面及其JavaScript环境，以仅显示所需的控件。然后，每类用户将需要从信令和Web服务器请求不同的URL。例如，也许主持人加载http://yourhostname/presenter.html而其他用户加载http://yourhostname/attendee.html。

有关如何自定义播放器页面的更多详细信息，请参见“自定义播放器网页” 。

对接会的多个完整筹码

您可能希望每个人最终获得自己的交互式体验，而不是让所有用户都连接到同一流。为此，您可以为每个用户运行单独的Pixel Streaming组件堆栈，并将每个用户定向到单独的Signaling和Web Server来启动连接。

您可以在单独的主机上设置像素流组件的每个堆栈，也可以在同一主机上放置多个堆栈，只要为每个堆栈中的组件配置端口设置，以便它们都可以通过不同的端口进行通信。有关  这些端口设置的详细信息，请参见《 像素流参考》。

如果您打算在同一台计算机上使用像素流来运行虚幻引擎的多个实例，请注意，许多消费者级别的图形卡（例如NVIDIA GeForce系列）最多只能同时运行两个编码器。Quadro和Tesla等专业级卡没有相同的限制。

为了帮助设置这种配置，Pixel Streaming系统可以使用一个媒人服务器来跟踪哪些信令服务器和Web服务器可用，以及客户端连接是否正在使用它们。

Matchmaker服务器具有多个完整堆栈

他们首先连接到Matchmaker服务器，而不是每个客户端都需要连接到其自己的Signaling和Web Server URL。Matchmaker负责将每个请求者重定向到其自己的Signaling and Web Server，后者在客户端与其UE4应用程序之间建立对等连接。只要该连接处于活动状态，Matchmaker Server就不会将任何新的传入浏览器连接重定向到同一Signaling和Web Server。

像素流系统在该Engine/Source/Programs/PixelStreaming/WebServers/Matchmaker文件夹下包括Matchmaker Server的参考实现。您可以原样使用此服务器；或者，您可以自定义matchmaker.js文件以满足您的需要，只要您处理来自Signaling和Web Server的相同消息即可。

设置Matchmaker服务器：

  1. 在启动信号和Web服务器之前，请通过运行其run.bat文件来启动Matchmaker服务器。默认情况下，服务器在端口90上侦听来自客户端的HTTP连接，并在端口9999上侦听来自Signaling和Web服务器的连接。您可以通过在命令行上提供以下配置参数来覆盖这些设置：

    参数

    描述

    --httpPort

    定义Matchmaker Server侦听来自浏览器的传入HTTP连接的端口。

    --matchmakerPort

    定义Matchmaker Server侦听来自Signaling和Web Server的传入状态消息的端口。

    例如：

    > run.bat --httpPort 88 --matchmakerPort 9988

  2. 为信令和Web服务器设置以下配置参数：

    参数

    描述

    UseMatchmaker

    将此参数设置true为使Signaling Web Server将其当前状态发送到Matchmaker Server。

    媒人地址

    该信令和Web服务器将连接到的Matchmaker服务器的IP地址。

    MatchmakerPort

    该信令和Web服务器需要在向Matchmaker Server发送消息时将使用的端口。确保此值与您为Matchmaker Server设置的--matchmakerPort值匹配。

    公共IP

    信令和Web服务器的公共可见IP地址。Matchmaker Server将用户重定向到该信令和Web服务器时，会将其发送到该IP地址。因此，它必须对连接的浏览器可见。

    httpPort

    信令和Web服务器侦听HTTP连接的端口。Matchmaker Server将用户重定向到此信令和Web服务器时，会将其发送到此端口。

    有关如何设置这些参数的说明，请参见《像素流参考》 。

按需扩展

如果要使用上述策略，其中一个单独的完整堆栈为每个传入的客户端连接服务，那么您可能不希望运行预设数量的虚幻引擎应用程序。如果您的用户少于服务器，则将浪费资源。相反，如果您的服务器数量少于用户数量，则人们可能需要等待直到空闲连接为止。相反，您可能想在每次客户端尝试连接时启动一个新的服务器实例。

借助Pixel Streaming系统和可选的Matchmaker Server的组件，您应该拥有设置像这样的动态扩展托管系统所需的所有组件。但是，目前，此级别的云部署取决于您在自己的云服务提供商上进行设置。

主机硬件功能

如果选择使用服务提供商（例如Amazon（AWS）或Microsoft Azure）托管您的虚幻引擎应用程序和Pixel Streaming Web服务，则可以在具有不同硬件功能的多个不同主机层之间进行选择。请记住，主机的功能可能会影响您可以提供的流的质量。

例如，AWS计算机通常不提供硬件声卡。在此类主机上运行虚幻引擎应用程序时，您的媒体流将不包含任何声音。同样，如果您选择的GPU的功能不强或内存较少的主机，则可能无法在流中获得最大的视频质量。

Pixel Streaming Signaling and Web Server提供了一个示例播放器页面，该页面已经设置为从您的虚幻引擎应用程序流式传输媒体，并将鼠标，键盘和触摸事件发送回该应用程序。（有关说明，请参阅Pixel Streaming入门 。）如果可以满足需要，可以按原样使用此默认播放器页面。 

但是，只要有一点点创意和对JavaScript和HTML等网络技术的了解，您就可以完全控制播放器页面，创建自己的自定义UI以便与Unreal Engine内容进行远程交互。您可以触发并响应游戏事件，发出控制台命令来控制虚幻引擎的行为，等等。

我们建议使用默认播放器页面作为创建自己的自定义播放器页面的起点。您可以Engine/Source/Programs/PixelStreaming/WebServers/SignallingWebServer/player.htm在虚幻引擎安装文件夹下找到此页面 。然后，使用此页面上的信息来学习如何扩展页面并将其与Project的游戏逻辑联系在一起。

pixelstreaming-customplayer-example-template.png

默认播放器页面

pixelstreaming-customplayer-example-mclaren.png

具有HTML5 UI的自定义播放器

播放器文件位置和URL

您可以选择几个位置来放置自定义HTML播放器页面，以及客户端浏览器如何访问它。

  • 您可以custom_html在Signaling and Web Server的根文件夹内创建一个名为的文件夹，并将自定义HTML播放器页面放置在该文件夹内。然后，可以通过将其文件名附加到运行Signaling and Web Server的计算机的IP地址或主机名来访问它。
    例如，名为的文件custom_html/myplayerpage.html可通过访问http://127.0.0.1/myplayerpage.html。

  • 您可以自定义HomepageFileSignaling and Web Server的参数，并将路径设置为自定义HTML播放器页面相对于Signaling and Web Server根文件夹的文件名。然后，当您访问运行信令和Web服务器的计算机的IP地址或主机名时，便可以访问它。
    例如，如果将文件保存到Engine/Source/Programs/PixelStreaming/WebServers/SignallingWebServer/myfolder/myplayerpage.html，并将HomepageFile参数设置为myfolder/myplayerpage.html，则可以访问该页面，而无需在URL：中提供文件名http://127.0.0.1/。

  • 您也可以将Signaling和Web Server的AdditionalRoutes参数用于自定义计算机上URL路径和本地文件夹之间的映射。

有关这些参数的更多详细信息，另请参见《像素流参考》 。