采用以下步骤将虚幻引擎项目渲染输出从本地网络流送到浏览器和移动设备。
此页上的步骤图像展示流程中使用的项目 第三人称蓝图 模板构建。实际上该步骤可用于所有虚幻引擎项目。
先决条件
- 检查操作系统和硬件- 像素流送插件只能在运行Windows和Linux操作系统的电脑上编码视频,对电脑的GPU硬件还有一定要求。欲知详情,请查阅像素流送参考。
- 安装node.js - 如果电脑上尚未安装 node.js ,则需要下载并安装。
- 打开网络端口- 必须打开本地网络上的以下端口进行通信:80、888。如需修改默认端口,请查阅像素流送参考。
- 停止其他Web服务器 - 如果电脑正在运行其他Web服务器,则将其停止。
- IP地址- 如果你希望通过网络测试像素流,你需要知悉电脑的IP地址。
不过,你可以先通过LAN或VPN测试像素流送。你可以使用
localhost
或127.0.0.1
作为你的像素流IP地址。 如果尝试从不同网络的电脑或移动设备上进行连接,则你可能需要将信令服务器配置成使用STUN/TURN服务器。访问此像素流参考页面了解操作方法。
1 - 准备虚幻引擎应用程序
在这个步骤中将为项目创建一个独立可执行文件。
- 只有将项目作为打包应用程序运行时、或使用 独立游戏(Standalone Game) 选项在虚幻引擎中启动时才能使用像素流送插件。
- 要使像素流送插件从应用程序中提取并流送音频,需要用一条特殊的命令行标签启动虚幻引擎:
-AudioMixer
。以下步骤将解释如何在两种情况下进行设置。
- 在虚幻编辑器中打开项目。
- 在虚幻编辑器的主菜单中选择 编辑(Edit) > 插件(Plugins) 。
-
在 图像(Graphics) 下找到 像素流送(Pixel Streaming) 插件并勾选 启用(Enabled) 框。
-
点击 立即重启(Restart Now) 重启项目并应用修改。
- 返回虚幻编辑器,从主菜单中选择 编辑(Edit) > 项目设置(Project Settings) 。
-
如果项目中有角色,而您希望启用触控设备的输入(如手机和平板电脑)在关卡中移动此角色,则可能需要在屏幕上显示触摸控制器。 在 引擎(Engine) > 输入类型(Input category) 下启用 固定显示触控界面(Always Show Touch Interface) 设置。
此项为任选,并非所有项目强制要求。然而,在第三人称面板之类的项目中,这能确保拥有触控设备的用户能对流送的应用程序进行控制(前提是项目的玩家控制器支持输入)。
- 在主菜单中选择 编辑(Edit) > 编辑器偏好(Editor Preferences...)
-
在 关卡编辑器(Level Editor) > 播放(Play) 中找到 额外启动参数(Additional Launch Parameters) 设置,并将其值设为
-AudioMixer -PixelStreamingIP=localhost -PixelStreamingPort=8888
。 - 打包Windows项目。从虚幻编辑器的主菜单中选择 文件(Files) > 打包项目(Package Project) > Windows > Windows (64-bit) 。
-
在项目找打开虚幻引擎放置项目打包版本的文件夹,点击 选择文件夹(Select Folder) 。
-
虚幻编辑器将开始打包进程。
-
打包进程完毕后,前往上方第6步中选择的文件夹。将找到一个名为
WindowsNoEditor
的文件夹,其中的内容类似于下图: - 每次启动打包应用程序时,均需要传递与第9步中一样的命令行标签。执行此操作的一种方法是设置一个快捷方式:
-
按住 Alt 键并拖动 .exe 文件即可在相同文件夹中(或在其他任意处)新建一个快捷方式。
-
右键点击快捷方式并从上下文菜单中选择 属性(Properties) 。
-
在 快捷方式属性(Shortcut Properties) 窗口的 快捷方式(Shortcut) 选项卡中,在 目标(Target) 域的末尾附加文本
-AudioMixer -PixelStreamingIP=localhost -PixelStreamingPort=8888
并点击 确认 。
-
让像素流送系统开始运行后,可能还需要添加 -RenderOffScreen
命令行参数。如果虚幻引擎应用程序窗口意外被最小化,像素流送视频和输入流送将停止工作。-RenderOffScreen
能以headless模式运行应用程序,不带可见窗口,避免意外发生。
最终结果
在打包的独立虚幻引擎应用程序中启用像素流送插件后,即可开始流送渲染帧和音频。
2 - 获取像素流服务器
最近对像素流送的一些更改已将像素流送的前端和Web服务器元素移至外部仓库。我们将其称作像素流送基础设施。
访问像素流送基础设施的方法有多种。
- 从以下地址直接访问github仓库:https://github.com/EpicGames/PixelStreamingInfrastructure
- 在你偏好的终端中执行
git clone --branch UE5.1 https://github.com/EpicGames/PixelStreamingInfrastructure.git
(确保你安装了git)。 - 找到
\Engine\Plugins\Media\PixelStreaming\Resources\WebServers
并运行get_ps_servers
命令(确保将相应的.bat
脚本用于Windows,将相应的.sh
脚本用于Linux)。这会自动将相关像素流送基础设施分支提取到该文件夹中。
上述git命令将提取基础设施的5.1分支。如果你需要不同的分支,请相应修改git命令。
有关像素流送前端和Web服务器更改的更多详情,请参阅像素流送基础设施
3 - 启动服务器
在这一步骤中,你将启动Web服务,以便在虚幻引擎应用程序和客户端浏览器之间建立点对点连接。如果还未完成上一步骤,则无法访问这些服务器。
以下步骤假定你使用的是Windows。但Linux也是同一流程,不同之处仅仅是在SignallingWebServer\platform_scripts\bash文件夹中运行脚本。
-
在拉取像素流送基础设施的位置,在文件夹
SignallingWebServer
下找到信令服务器的位置。 -
为了准备信令服务器,首先以管理员身份打开PowerShell并运行
SignallingWebServer\platform_scripts\cmd\setup.ps1
。这会安装所有需要的依赖项。 -
运行
SignallingWebServer\platform_scripts\cmd\Start_SignallingServer.ps1
开启信令服务器。首次运行服务器时其将下载需要的所有依赖性。服务器启动,能够接收连接后,控制台窗口中将出现以下命令行:WebSocket listening to Streamer connections on :8888 WebSocket listening to Players connections on :80 Http listening on *: 80
-
现在用上一节中创建的快捷方式来启动虚幻引擎应用程序。或者,如果你习惯用命令行来启动应用,请执行以下命令:
MyPixelStreamingApplication.exe -PixelStreamingIP=127.0.0.1 -PixelStreamingPort=8888
为便于使用,打包虚幻引擎应用程序时这些服务器也会被复制到包含打包可执行文件的文件夹中。他们位于上述路径下的 Engine 子文件夹中。可从该处启动服务器,而非从虚幻引擎安装文件夹中启动。 须注意:如要修改这些文件夹中的任意文件(尤其是信令和Web服务器的播放器页面或配置文件),需要在原始位置中进行修改,如果在打包文件夹中进行修改,下次打包应用程序时修改可能会被覆盖。
最终结果
当虚幻应用程序运行连接到信令服务器和Web服务器时,应该可以在信令和Web服务器打开的控制台窗口中看到以下输出行:
Streamer connected: ::1
这说明虚幻引擎应用程序已经启用了像素流送插件,前端信令和Web服务器也已准备好将客户端连接到虚幻引擎应用程序。
如有必要,你可以分别中断并重启虚幻引擎应用程序及信令和Web服务器。只要它们同时运行,就能够自动重连。
此时必要的设置均已在电脑上完成。现在只需连接到浏览器。
4 - 连接!
在该步骤中将把多个不同设备上运行的网络浏览器连接到像素流送播放。
- 在运行虚幻引擎应用程序的电脑上按下Alt+Tab组合键,将聚焦从虚幻引擎应用程序上移开,然后启动一个支持的Web浏览器(Google Chrome和Mozilla Firefox是不错的选择)。
-
在地址栏中导航至
http://127.0.0.1
。这是本地机的IP地址,因此请求应由信令服务器进行处理: - 点击页面进行连接,然后再次点击"播放(Play)"按钮开始流送。
-
现在便会连接到应用程序,渲染输出将流入播放器Web页面中:
默认的播放器页面已进行设置,将把键盘、鼠标和触控屏输入发送到虚幻引擎,以便控制应用程序并前往各处,就像直接在应用程序进行控制一样。
-
点击窗口右侧的 + 按钮,展开流送控制的一些内置选项:
设置 描述 扩大显示以填充窗口(Enlarge Display to Fill Window) 确认媒体播放器是否应调整大小来匹配浏览器窗口的当前大小,还是应维持固定大小和位置。 是质量控制器?(Is Quality Controller?) 让像素流送插件的编码器使用当前的浏览器连接来确定可用的带宽,进而确定流送编码的质量。 虽然像素流送将使流送质量匹配可用的带宽,但像素流送插件只会对视频帧进行一次编码。此编码用于所有客户端。因此只有一个客户端连接可以"拥有"用于自适应流送的质量。如其他客户端与服务器之间的连接更优,则其显示的流送质量可能会低于预期。从另一方面来讲,如其他客户端与服务器之间的连接更差,则其可能会出现卡顿现象。 每次有新浏览器连接时,其将默认获得流送的所有权。使用此勾选框可以让其他连接的浏览器重新获得拥有权。
匹配视口分辨率(Match Viewport Resolution) 直观地显示浏览器与虚幻引擎应用程序之间的连接的相关统计信息。 待接收商品(Offer to Receive) 浏览器将启动WebRTC握手,而非虚幻引擎应用程序。这是一个高级设置,供用户自定义前端。 首选SFU(Prefer SFU) 将尝试使用选择性转发单元,仅在已有单元在运行时才适用。 使用麦克风(Use Microphone) 将开始从麦克风接收音频输入,并通过流播放。此设置目前仅适用于本地机器。 强制单声道音频(Force Mono Audio) 将开始将所有音频作为单声道音频发送,而非立体声。 强制TURN(Force TURN) 将尝试专门通过TURN服务器连接。如果没有激活的TURN服务器就无法正常工作。 控制方案(Control Scheme) 将指示流是捕获你的鼠标,还是保持鼠标空闲。 隐藏浏览器光标(Hide Browser Cursor) 将切换光标在流上方时的可见性。在项目中使用自定义光标时,此设置有用。 显示FPS(Show FPS) 将显示当前FPS 请求关键帧(Request Keyframe) 将向流请求关键帧。如果你的流不断变换方向,需要追赶进度,则此设置适用。 编码器设置(Encoder Settings) 允许你指定最小和最大QP。数值越低质量越高,但比特率也越高。最大值为51。-1将禁用所有硬限制。 WebRTC设置(WebRTC Settings) 允许你指定想要WebRTC流送的FPS,以及最小和最大比特率。不要设置得过高,因为WebRTC可能会开始掉帧。 流设置(Stream Settings) 目前处于试验阶段,未来会用于支持多个视频轨道/流。 重新启动流(Restart Stream) 重新启动与流的对等连接。如果你更改了上述设置,则应使用此选项,以确保应用更改后的设置。
查看信令Web服务器文件夹中 player.htm
和 app.js
文件的内容,了解这些控制方法的实现方式。
-
现在找到网络中的其他电脑和/或移动设备。重复相同步骤,但使用
127.0.0.1
来将浏览器指引到运行虚幻引擎应用程序与信令服务器的电脑的IP地址。
最终结果
在电脑上运行虚幻引擎的实例后,即可通过本地网络在多台设备上播放媒体流送。关卡的内容均在最初的电脑上进行渲染,但连接的每台设备均能看到相同的图像。
连接的所有设备默认均通过虚幻引擎应用程序共享控制,发送所有键盘、鼠标和触控屏输入。
![]() |
![]() |
![]() |
台式机 | iPhone | Android |
4 - 自由发挥
上述步骤讲述了使用单个服务器主机和默认播放器页面进行相对简单的设置。再做一些工作即可对像素流送系统进行拓展。举例而言:
- 可对播放器HTML页面重新进行设计,满足项目的需求。控制谁能将输入发送给虚幻引擎应用程序,甚至在页面上创建HTML5 UI元素,将自定义Gameplay事件发送到虚幻引擎。 如需了解详情,请参阅自定义播放器Web页面。关于实践示例,请参阅Epic Games启动程序中的 学习 选项卡下的像素流程演示。
- 如果需要通过开放网络或子网络提供像素流送服务,则很可能需要进行一些高级网络配置。或者可以让每个连接的客户端从虚幻引擎的单独实例流送内容,或通过一个单独的播放器页面提供不同控制。 如需了解详情,请参阅创建主机和网络连接指南。
-
像素流送系统的每个组件均有多个配置属性,可用于控制编码分辨率、屏幕大小、IP地址和通信端口等。 如需了解这些属性和设置方法,请参阅像素流送参考。
- 要查看像素流送中的新试验性功能,请参阅试验性像素流送功能页面。
- 流调优指南页面可帮助你进一步掌控流的质量和设置。