PixelStreamingInfrastructure快速上手教程10分钟让UE5应用跑进浏览器零踩坑指南【免费下载链接】PixelStreamingInfrastructureMoved to: https://github.com/EpicGamesExt/PixelStreamingInfrastructure项目地址: https://gitcode.com/gh_mirrors/pix/PixelStreamingInfrastructurePixelStreamingInfrastructure是专为 UE5 虚幻引擎打造的开源Pixel Streaming像素流送基础设施基于 WebRTC 技术让 Unreal Engine 5 应用直接运行在浏览器中——玩家无需安装客户端一条链接即可开局。本文是一份10分钟快速上手教程带你完整走通从环境准备到浏览器开玩的 6 个步骤并附上零踩坑清单新手也能一次成功。一、10秒看懂UE5 浏览器流送的架构整套基础设施由 3 个核心组件协作完成组件位置作用前端播放器 FrontendFrontend/浏览器端负责拉流、渲染视频、转发键盘/鼠标/手柄输入信令服务器 CirrusSignallingWebServer/中间人WebRTC 握手协商 托管前端网页可选Matchmaker / SFUMatchmaker/、SFU/多人排队匹配 / 一路流分发多路观众核心原理一句话UE5 端把渲染画面编码成视频流推给浏览器浏览器把玩家输入通过 WebRTC DataChannel 传回引擎——看起来就像游戏跑在浏览器里。二、准备工作安装 UE5 像素流送需要的 2 个前置条件✅检查清单Unreal Engine 5.x 项目已启用 Pixel Streaming 插件Edit → Plugins → Pixel StreamingNode.js LTS 18.17.0⚠️ 官方仅支持该版本更新版本会导致前端构建失败这是最高频的坑全局安装 npmnpm install npm -g三、第1步获取 PixelStreamingInfrastructure 代码打开终端克隆仓库仓库地址git clone https://gitcode.com/gh_mirrors/pix/PixelStreamingInfrastructure四、第2步构建前端播放器3条命令搞定前端由三个包组成按顺序构建即可包目录说明核心库Frontend/library/WebRTC、设置、输入等核心能力UI 库Frontend/ui-library/按钮、设置面板等界面组件默认实现Frontend/implementations/typescript/开箱即用的 player 页面cd Frontend/library npm install npm run build cd ../ui-library npm install npm run build-all cd ../implementations/typescript npm install npm run build-all构建成功后player.html和player.js会被输出到SignallingWebServer/Public目录作为默认玩家页面。 提示如果使用官方启动脚本前端会自动构建这一步可跳过修改过前端代码后加--build参数强制重建。五、第3步启动 Cirrus 信令服务器每个平台都提供了现成脚本位于SignallingWebServer/platform_scripts/Linux/macOSbash Start_SignallingServer.shbash 目录WindowsStart_SignallingServer.ps1cmd 目录启动后 Cirrus 同时扮演两个角色Web 服务器80 端口HttpPort对外提供玩家网页信令服务8888 端口StreamerPort等待 UE5 流媒体端连接常用配置都在SignallingWebServer/config.json新手只需关注几个配置项默认值说明HomepageFileplayer.html玩家打开首页看到的页面MaxPlayerCount-1不限限制最大同时在线玩家数UseMatchmakerfalse是否启用排队匹配UseHTTPSfalse麦克风等特性需要 HTTPS六、第4步给 UE5 项目添加 Pixel Streaming 组件在编辑器场景中选中一个 Actor如主 Pawn添加Pixel Streaming组件关键设置勾选bPixelStreamingEnabled为True保存关卡以Run PIE 或打包后的可执行文件方式启动游戏并附加启动参数-PixelStreamingIP127.0.0.1 -PixelStreamingPort8888⚠️ UE5 应用与 Cirrus 必须同时运行浏览器才能看到画面。七、第5步打开浏览器见证奇迹 浏览器访问http://127.0.0.1即运行 Cirrus 的机器 IP 80 端口看到 UE5 画面即大功告成点击播放后你的键盘、鼠标、手柄输入都会实时传入引擎。左下角设置面板支持随时调整视频质量、输入模式、延迟测试等无需改任何代码。八、进阶玩法从能跑到好用8.1 多人独立体验Matchmaker 排队系统想让每个玩家进入独立实例而不是共用一个流启用Matchmaker/matchmaker.js默认 9999 端口并把 Cirrus 配置中UseMatchmaker设为true玩家会先进入排队页面匹配到空闲实例后自动跳转。8.2 万人围观SFU 流分发一对一直连模式下引擎要为每个观众单独编码。SFU/sfu_server.js默认 8889 端口采用 simulcast 分层转发一路编码多路分发适合直播式围观场景。UE 端附加参数-SimulcastParameters1.0,5000000,20000000,2.0,1000000,5000000,4.0,50000,10000008.3 双向通信网页与引擎对话网页 → UE5通过emitCommand/emitUIInteraction向蓝图发送事件实现点击网页按钮触发动作UE5 → 网页用蓝图 API 的SendPixelStreamingMessage把游戏状态推给前端渲染 UI8.4 语音互动麦克风特性浏览器玩家可开启麦克风将语音送入 UE5 场景需要 HTTPS 环境UI 库提供了现成的麦克风开关九、零踩坑清单6个高频问题一次解决 ️#坑解决方案1前端构建报错、产物损坏换回Node.js 18.17.0新版 Node 必然失败2浏览器能打开但一直等待流媒体检查 UE5 是否已启动、-PixelStreamingIP/Port是否指向 Cirrus380/8888 端口被占用修改config.json中HttpPort、StreamerPort后同步调整 UE 启动参数4局域网其他设备连不上UE 启动参数用真实内网 IP确认防火墙放行 80、8888 及 WebRTC 端口范围5麦克风/HTTPS 场景报错开启UseHTTPS并配置证书或配合Start_TURNServer.sh部署 TURN6玩家闲置后资源被占阅读 AFK 超时文档 Timing Out Inactive Connections配置自动断连十、延伸阅读官方文档索引想深入定制以下资料都藏在仓库里前端总览与集成说明Frontend/README.md自定义玩家网页Frontend/Docs/Customizing the Player Webpage.md输入定制禁用/锁定鼠标等Frontend/Docs/Customizing Player Input Options.md信令协议全解析SignallingWebServer/Docs/SignallingProtocol.md安全部署规范Docs/Security-Guidelines.md变更日志CHANGELOG.md恭喜 10 分钟你已经拥有了完整的 UE5 浏览器流送能力。接下来可以尝试自定义播放器 UI参考Frontend/implementations/react/的 React 示例把专属游戏入口嵌进你自己的网站吧。【免费下载链接】PixelStreamingInfrastructureMoved to: https://github.com/EpicGamesExt/PixelStreamingInfrastructure项目地址: https://gitcode.com/gh_mirrors/pix/PixelStreamingInfrastructure创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考