PixelStreamingInfrastructure React集成实战百行代码搭建UE5流送应用【免费下载链接】PixelStreamingInfrastructureMoved to: https://github.com/EpicGamesExt/PixelStreamingInfrastructure项目地址: https://gitcode.com/gh_mirrors/pix/PixelStreamingInfrastructurePixelStreamingInfrastructure 是 Epic Games 开源的 Unreal Engine 像素流送基础设施负责将 UE5 画面通过 WebRTC 实时推送到浏览器并回传输入。本文以官方 React 示例为蓝本带你用不足百行代码完成 Pixel Streaming 的 React 集成快速搭建一个可交互的 UE5 流送应用。 动手前流送应用由三部分组成在写代码前先了解整体架构避免排查问题时找不到方向组成部分位置作用前端库Frontend/library/核心库lib-pixelstreamingfrontend负责信令连接、WebRTC 播放器、输入回传、DataChannel 自定义通信不含任何 UI信令与 Web 服务器SignallingWebServer/撮合浏览器与 UE5 端建立 WebRTC 连接并托管前端页面UE5 工程你的 Unreal 项目添加 Pixel Streaming Bridge 组件负责编码画面与接收输入UE5 侧只需要在关卡 Actor 上添加 Pixel Streaming 组件并配置好即可✅ 环境准备从克隆到本地跑通一键搭建步骤官方仅支持 Node.js LTS 18.17.0新版 Node 会破坏构建安装 Node.js LTS 18.17.0克隆仓库git clone https://gitcode.com/gh_mirrors/pix/PixelStreamingInfrastructure cd PixelStreamingInfrastructure/Frontend/implementations/react安装依赖并构建build-all会自动链接并先构建核心库无需手动操作Frontend/library/npm install npm run build-all npm run serve浏览器打开开发服务器中的index.html同时在 UE5 中运行带-PixelStreaming参数的打包工程画面即会出现在页面上。 构建产物默认输出到SignallingWebServer/Public目录与官方信令服务器目录结构天然对齐可直接被服务器托管。⚙️ 核心代码拆解一个组件搞定连接生命周期React 示例的核心思想是把流送会话的生命周期绑定到 React 组件的挂载/卸载上。全部核心代码就 3 个文件。PixelStreamingWrapper挂载即连接文件Frontend/implementations/react/src/components/PixelStreamingWrapper.tsx约 90 行它做了四件事用useRef拿到一个div作为PixelStreaming库挂载视频元素的父节点组件挂载时创建Config与PixelStreaming实例自动发起连接监听playStreamRejected事件——浏览器拒绝自动播放视频时显示 Click to play 遮罩点击后调用play()组件卸载时调用disconnect()单页应用路由跳转时会自动断开流送会话。核心逻辑只有短短几行const config new Config({ initialSettings }); const streaming new PixelStreaming(config, { videoElementParent: videoParent.current }); streaming.addEventListener(playStreamRejected, () { setClickToPlayVisible(true); }); return () { try { streaming.disconnect(); } catch {} };App初始配置决定连接行为文件Frontend/implementations/react/src/components/App.tsx通过initialSettings属性传入配置PixelStreamingWrapper initialSettings{{ AutoPlayVideo: true, AutoConnect: true, ss: ws://localhost:80, StartVideoMuted: true, HoveringMouse: true, WaitForStreamer: true }} /关键配置项速查表配置项作用ss信令服务器 WebSocket 地址生产环境应改为wss://AutoConnect页面加载后自动连接无需用户点击WaitForStreamerUE5 端未就绪时页面会等待而不是直接报错AutoPlayVideo尝试自动播放视频流StartVideoMuted视频静音启动配合AutoPlayVideo提高自动播放成功率HoveringMouse鼠标不锁定悬停位置即 UE5 内鼠标位置适合 UI 交互类应用index.tsx 与 index.html入口保持极简Frontend/implementations/react/src/index.tsx仅用createRoot(document.body).render(App /)挂载应用。注意index.html中 body 必须设置width: 100vw; height: 100vh——播放器会填满父容器的 100%而空 body 高度为 0不设置会导致画面不显示。这是官方文档中 HTML 页面的硬性要求之一。 进阶输入回传与蓝图通信连接建立后键盘、鼠标、触屏、手柄输入由核心库自动捕获并回传给 UE5无需额外代码。UE5 端可以在编辑器中配置哪些输入生效若需要页面与 UE5 双向通信PixelStreaming实例提供了完整能力页面 → UE5emitCommand()发送控制台命令、emitUIInteraction()发送 UI 交互事件UE5 → 页面通过 DataChannel 自定义消息 事件监听双向自定义数据直接读写 DataChannel。想深入了解可参考Frontend/Docs/下的《Communicating from the Player Page to UE5》与《Accessing the Pixel Streaming Blueprint API》文档。 生产部署注意事项运行npm run build生成生产产物webpack.prod.js产物同样落在SignallingWebServer/Public页面部署到 HTTPS 后ss配置必须改为wss://协议否则浏览器会拦截混合连接需要排队、多实例调度时可结合仓库中的 Matchmaker 模块参考Matchmaker/Docs/Setting up Matchmaker.md。❓ 常见问题速查问题解决方案画面黑屏、提示需点击播放浏览器禁止自动播放示例已内置 Click to play 遮罩兜底连接一直转圈确认信令服务器已启动、UE5 端带-PixelStreaming参数运行构建报错、依赖异常换回官方支持的 Node.js 18.17.0 并重新npm install想要官方设置/统计面板在Frontend/ui-library/基础上叠加Application组件或在核心库之上自建 UI整个 React 集成从克隆到出画面不到 10 分钟核心自定义代码不到百行。掌握PixelStreaming实例的创建、事件监听与initialSettings配置后你就可以在它之上构建登录页、商城、多人匹配等任意 React 业务界面把 UE5 变成 Web 应用的一个实时渲染引擎。【免费下载链接】PixelStreamingInfrastructureMoved to: https://github.com/EpicGamesExt/PixelStreamingInfrastructure项目地址: https://gitcode.com/gh_mirrors/pix/PixelStreamingInfrastructure创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考