像素流送演示展示了如何设计虚幻引擎内容，以便让用户在桌面或移动设备上使用Web浏览器时体验实时流送。它包括：

• 一个HTML播放器页面，可以播放由虚幻引擎应用程序生成的媒体流送，并提供用于远程控制引擎的自定义UI元素。

• 一个虚幻引擎项目，已经设置成使用像素流送插件生成媒体流送并响应从HTML播放器页面发出的自定义命令。

您可以将该样本用作一个模型来构建您自己的自定义HTML5播放器，该播放器与您的虚幻引擎内容进行交互。

新手入门

1. 在Epic Games启动程序的 学习（Learn） 选项卡上找到 像素流送（Pixel Streaming） 展示，并使用它来启动一个新的虚幻引擎项目。

2. 在Windows Explorer中，浏览该项目在计算机上的位置，然后找到"WebInterface"文件夹。

3. 将该文件夹的内容复制到虚幻引擎安装文件夹下的 Samples/PixelStreaming/WebServers/SignallingWebServer/custom_html 文件夹。 
   如果"custom_html"文件夹还不存在，请先创建该文件夹。

4. 在虚幻编辑器中打开"PixelStreamingDemo.uproject"文件。

5. 按照像素流送入门页面中的说明执行以下操作：

   • 打包该项目，或者从虚幻编辑器将该项目作为独立游戏启动。

   • 启动信令和Web服务器。

6. 打开Web浏览器，并导航至由信令和Web服务器托管的"PixelDemo.htm"播放器页面。例如：
   http://<your-server-ip-address>/PixelDemo.htm

控制播放器页面

当您正确设置了像素流送系统，并使用支持的Web浏览器访问自定义的"PixelDemo.htm"页面时，您可以使用以下各个部分介绍的功能按钮与正在运行的虚幻引擎应用程序进行交互。

1. 使用页面左侧的菜单更改当前字符、皮肤、环境和时间。

2. 工具栏为UI和查看器提供了一些额外的功能按钮：

   功能按钮	作用
   	显示和隐藏左侧菜单。
   	将摄像机在完全放大和完全缩小的位置进行切换。
   720p, 1080p, 4k	设置在服务器上运行的虚幻引擎应用程序的渲染分辨率。

   并非所有GPU都能以4K分辨率编码视频填充。

   由于当前的限制，一旦您将带宽限制为一个给定值，您将无法再次提高该限制，直到重新启动虚幻引擎应用程序。

3. 查看器控件本身提供了对虚幻引擎应用程序的直接鼠标和触摸控制：

   功能按钮	作用
   点击并拖动，或者触摸并拖动	围绕当前角色旋转摄像机。
   鼠标滚轮	放大和缩小摄像机。
   	将查看器切换到全屏模式。按 Esc 键退出。

4. 单击页面右上角的 + 按钮切换覆层，该覆层为流送提供额外的功能按钮。这些设置大多与默认"player.htm"页面中的设置相同，在入门指南中有介绍。新设置为：

   功能按钮	作用
   优先考虑质量（Prioritise Quality）	当激活时，虚幻引擎应用程序的渲染分辨率会自动调整，以匹配HTML玩家页面中玩家控件的当前大小。随着浏览器窗口变小，玩家控件的大小减小，服务器上虚幻引擎应用程序的渲染分辨率也随之降低以匹配。类似地，如果您在玩家页面上进入全屏模式，虚幻引擎应用程序将其窗口放大，以匹配客户端屏幕的分辨率。
   匹配视口分辨率（Match Viewport Resolution）	激活时，当连接可用带宽受限，像素流送系统自动限制虚幻引擎应用程序每秒生成的帧数。请参阅像素流送参考中有关 Streamer.PrioritiseQuality、Streamer.LowBitrate、Streamer.HighBitrate 和 Streamer.MinFPS 控制台命令的说明。

了解自定义UI事件

自定义HTML玩家页面"PixelDemo.htm"使用像素流送信令和Web服务器随附提供的"scripts/app.js"文件捕获鼠标、键盘和触摸事件，并将它们转发回虚幻引擎应用程序。此外，它还依赖于自己的自定义"PixelDemo.js"文件获取一些额外的功能。

玩家页面中的大多数UI元素都是通过调用"emitUIInteraction()"函数来实现的，该函数将不同的信息传递回虚幻引擎应用程序。要了解任何UI部件在后台是如何工作的，请执行以下操作：

1. 首先，在"PixelDemo.htm"文件中找到您想要了解的UI项，然后查看按下按钮时设置了什么JavaScript函数来触发。
   例如，左侧菜单中的每一项都触发一个名为"onConfigButton()"的函数，并向它传递两个数字。

   <li>
       <a href="#" onclick="onConfigButton(2,1)">Fortress</a>
   </li>

2. 在"PixelDemo.js"文件中查找该函数的定义。
   例如，"onConfigButton()"函数将这两个数字分别作为 类别（Category） 和 项目（Item） 字段的值写入JavaScript对象中，然后将该JavaScript对象传递给"emitUIInteraction()"函数：

   function onConfigButton(category, item) {
       let descriptor = {
           Category: category,
           Item: item
       };
       emitUIInteraction(descriptor);
       console.log(descriptor);
   }

3. 在虚幻引擎项目中，这些事件由 Blueprints/Pawn/Orbit_Controller 类响应。
   
   双击该类以打开其事件图表。

4. 在 绑定JSON事件（Bind JSON Events） 区域，您将看到如何使用 Bind Event to OnPixelStreamingInputEvent 节点来注册 OnJSONEvent 事件，每次在连接的浏览器中调用"emitUIInteraction()"时，都将该 OnJSONEvent 事件注册为处理程序。

   点击查看大图。

5. 每当 OnJSONEvent 事件触发时，蓝图调用 Get Json String Value 来检查存储在JavaScript对象中的键和值，这些键和值是由玩家页面传递给"emitUIInteraction()"函数的。它使用这些值来决定应该触发哪些其他事件。
   例如，当事件接收到包含 类别（Category） 字段的输入时，它调用 更改配置选项（Change Config Option） 事件。

   点击查看大图。

   此事件反过来检查类别（Category）字段的值，并使用该值确定是否应该更改角色、皮肤、环境或时间。

   点击查看大图。

   这些事件依次检查 项目（Item） 值，以确定应该激活什么类型的角色、皮肤、环境或时间。

   点击查看大图。

页面右上角覆盖层中的功能按钮，如 优先考虑质量（Prioritise Quality） 和 匹配视口分辨率（Match Viewport Resolution），工作方式略有不同。"app.js"文件在加载时将事件监听器添加到这些HTML元素中。每当用户启用或禁用其中一个元素时，"app.js"中的监听器函数就会被触发以直接响应更改。