深入解析 Peer-Stream：为虚幻引擎5像素流打造的轻量级 WebRTC SDK

peer-stream

Peer-Stream：为虚幻引擎5像素流量身打造的轻量级 WebRTC 解决方案

在游戏开发和交互式内容创作领域，虚幻引擎5(Unreal Engine 5)无疑是一个重量级的存在。而其中的像素流(Pixel Streaming)功能更是为远程渲染和实时交互提供了强大支持。然而，如何高效、轻量地实现这一功能的前端对接一直是开发者面临的挑战。今天，我们要深入探讨一个专门为此设计的解决方案——Peer-Stream。

Peer-Stream 简介

Peer-Stream 是一个轻量级的 WebRTC SDK，专门为虚幻引擎5的像素流功能设计。与 Epic Games 官方提供的较为复杂的 SDK 相比，Peer-Stream 采用了零依赖的设计理念，仅包含一个前端组件（基于 WebComponents API）和一个信令服务器（基于 NodeJS）。

这个项目的核心组件包括：

peer-stream.js：用于播放器的浏览器端 SDK
signal.js：基于 Node.js 的信令服务器
signal.json：用于配置 signal.js 的配置文件
signal.html：signal.js 的图形界面，同时也是 peer-stream.js 的使用示例

核心优势

轻量级设计：零依赖的架构使得 Peer-Stream 能够快速部署，并且对系统资源的占用极小。
简单易用：相比官方 SDK 的复杂设计，Peer-Stream 提供了更加直观和简洁的 API，大大降低了开发者的学习成本。
灵活配置：通过 signal.json 文件，开发者可以轻松调整各种参数，如端口号、认证信息、负载均衡策略等。
自动化支持：支持 UE5 实例的自动启动和管理，简化了部署流程。
良好的扩展性：支持多 UE5 实例和多玩家连接，可根据需求灵活扩展。

快速上手

要开始使用 Peer-Stream，首先需要安装 WebSocket：

npm install ws@8.5.0

然后启动信令服务器：

node signal.js

接下来，启动打包好的 UE5 应用：

start path/to/UE5.exe -PixelStreamingURL="ws://localhost:88"

最后，在浏览器中访问示例页面：

start http://localhost:88/signal.html

深入配置：signal.json

signal.json 文件是 Peer-Stream 的核心配置文件，通过它我们可以精细控制系统的行为。以下是一些关键配置项：

PORT：WebSocket 和 HTTP 服务的端口号，默认为 88。
UE5：当玩家连接时自动运行的命令数组，用于 UE5 的自动启动。
one2one：是否启用一对一的玩家与 UE5 实例映射，默认为 false。
auth：HTTP Basic 认证的用户名和密码。
boot：是否在系统启动时自动运行 signal.js。
exeUeCoolTime：同一 UE 实例再次启动的时间间隔。
preload：预启动的 UE 实例数量。

负载均衡

signal.js 支持多个 UE5 实例和玩家连接，默认情况下采用负载均衡的方式将玩家分配给 UE5 实例。如果需要一对一的映射，可以将 one2one 选项设置为 true。此外，通过配置 UE5 选项，系统还可以自动启动 UE5 实例，大大简化了部署流程。

虚幻引擎配置

要在虚幻引擎中启用像素流功能，需要进行以下配置：

启用像素流插件：Plugins > Built-In > Graphics > Pixel Streaming > Enabled
设置启动参数：Editor Preferences > Level Editor > Play > Additional Launch Parameters

常用的启动选项包括：

-PixelStreamingURL="ws://localhost:88"
-RenderOffScreen
-Unattended
-GraphicsAdapter=0
-ForceRes
-ResX=1280
-ResY=720
-PixelStreamingWebRTCFps=30
-Windowed
-AudioMixer
-AllowPixelStreamingCommands
-PixelStreamingEncoderRateControl=VBR

前端集成：peer-stream.js

peer-stream.js 提供了简单直观的 API，可以轻松集成到任何 web 项目中。以下是两种使用方式：

直接在 HTML 中使用：

<script src="//localhost:88/peer-stream.js"></script>
<video is="peer-stream" id="ws://127.0.0.1:88/"></video>

使用 JavaScript 动态创建：

<script type="module">
import "//localhost:88/peer-stream.js";
const ps = document.createElement("video", { is: "peer-stream" });
ps.id = "ws://127.0.0.1:88/";
document.body.append(ps);
</script>

消息传递

Peer-Stream 提供了简单的消息传递机制，方便与 UE5 实例进行交互：

发送消息：

// 对象会被自动 JSON.stringify()
ps.emitMessage(msg: string | object);

接收消息：

ps.addEventListener("message", e => {
    // e.detail 会被自动 JSON.parse()
    console.log(e.detail);
});

系统要求

要顺利运行 Peer-Stream，需要满足以下条件：

Google Chrome 90+
Unreal Engine 5.0.3+
NodeJS 14+
npm/ws 8.0+

实际应用案例

Peer-Stream 应用示例

在实际应用中，Peer-Stream 已经在多个项目中展现出了其优秀的性能和易用性。例如，在一个大型虚拟展厅项目中，开发团队利用 Peer-Stream 实现了高质量的远程渲染和实时交互。用户可以通过普通的 web 浏览器，体验到接近本地运行的流畅度和画质，大大提升了用户体验。

另一个典型案例是在线教育平台。通过 Peer-Stream，平台能够为学生提供复杂的 3D 交互式课程内容，而无需学生安装庞大的客户端软件。这不仅降低了使用门槛，也为教育内容的创作者提供了更大的发挥空间。

未来展望

尽管 Peer-Stream 已经在多个方面展现出了优势，但开发团队并未就此止步。未来的发展方向可能包括：

进一步优化性能，减少延迟。
增强安全性，提供更多的加密和认证选项。
扩展对其他引擎的支持，如 Unity。
提供更多的自定义选项，以满足不同项目的特殊需求。

社区贡献

Peer-Stream 是一个开源项目，欢迎社区成员参与贡献。无论是提交 bug 报告、改进文档，还是提供新功能的 pull request，都将为项目的发展注入新的活力。如果你对这个项目感兴趣，可以访问 GitHub 仓库了解更多信息。

结语

Peer-Stream 为虚幻引擎5的像素流功能提供了一个轻量、高效的前端解决方案。通过简化开发流程、提供灵活的配置选项，以及优秀的性能表现，Peer-Stream 正在成为越来越多开发者的首选工具。无论你是在开发游戏、虚拟现实应用，还是其他需要高质量远程渲染的项目，Peer-Stream 都值得你深入探索和尝试。

随着 WebRTC 技术和虚幻引擎的不断发展，我们有理由相信，Peer-Stream 这样的工具将在推动交互式内容的创新和普及方面发挥越来越重要的作用。让我们一起期待 Peer-Stream 和虚幻引擎生态系统的美好未来！