PixelStreamingInfrastructure 播放器控件样式定制指南3 个抓手给云游戏 UI 换肤【免费下载链接】lama LaMa Image Inpainting, Resolution-robust Large Mask Inpainting with Fourier Convolutions, WACV 2022项目地址: https://gitcode.com/GitHub_Trending/la/lamaPixelStreamingInfrastructure 把 3A 云游戏送进浏览器默认播放器却是通用风格。播放器控件样式定制只有 3 个抓手样式表、UIOptions 配置、自定义 HTML——想换色就动样式表想改按钮就动配置想彻底换界面就上 HTML。下面按定制深度由浅入深一次讲清。️ 前端能力地图两个包三个抓手这套 Epic Games 开源的像素流送Pixel Streaming即把主机端渲染画面压成视频流送进浏览器基础设施前端拆成两个包Frontend/library/管连接——WebRTC浏览器端视频传输技术建流、信令浏览器和游戏服务器之间的接线握手、输入捕获、设置项Frontend/ui-library/管界面——按钮、面板、叠加层Overlay、全部样式。整个播放器界面长在Application的rootElement挂载点上页面里想插哪儿插哪儿。所以定制入口只有三个样式表全局颜色与控件外观UIOptions5 类默认控件的去留与替换自定义 HTML把挂载点嵌进你自己的页面布局想怎么摆怎么摆。对应三层定制深度轻度只换色中度换控件、改叠加层重度整页自绘。 轻度改 8 个 CSS 变量一键切换深浅色主题整套 UI 的颜色由--color0~--color7驱动天天打交道的是这 4 个--color1视频区背景深色下默认纯黑--color2文字颜色--color3强调色按钮和边框都吃它--color7按钮背景构造PixelStreamingApplicationStyle时传lightModePalette/darkModePalette就能整体换肤运行时调setColorMode(isLightMode)切换深浅色const styles new PixelStreamingApplicationStyle({ lightModePalette: { --color1: #F5F1E8, // 视频区背景换成暖米色 --color3: #FF6B00, // 强调色换成品牌橙 }, }); styles.applyStyleSheet(); // 关键必须在 new Application() 之前 const app new Application({ stream, ...options }); // 之后随时切换主题styles.setColorMode(true)设置面板、统计面板、按钮悬停效果会全部自动跟随新配色不用逐个控件修。️ 中度增删播放器控件自定义设置面板Application默认生成 5 类控件每类在UIOptions里都能三选一保留默认 / 换成自定义元素 / 彻底禁用。settingsPanelConfig⚙️ 设置面板——信令地址、编解码、输入开关都收在这statsPanelConfig 统计面板——帧率、码率、延迟fullScreenControlsConfig⛶ 全屏按钮xrControlsConfig WebXR 沉浸模式按钮videoQpIndicatorConfig️ 视频 QP 指示器QP 是编码质量参数值越小画质越好做面向玩家的云游戏页时常见组合是关设置面板、藏 QP 指示器全屏按钮交给自己的 HTML 接管const application new Application({ stream, settingsPanelConfig: { isEnabled: false }, // 关掉设置面板 videoQpIndicatorConfig: { disableIndicator: true }, // 隐藏 QP 指示器 fullScreenControlsConfig: { // 全屏按钮接管 creationMode: UIElementCreationMode.UseCustomElement, customElement: document.getElementById(myFullscreenBtn), }, }); 中度进阶Overlay 叠加层定制播放期间播放器会按状态自动弹 6 种 Overlay全屏状态提示层连接中、点击播放、信息提示、错误提示、断线重连、AFK 空闲倒计时玩家挂机离开前的提醒。它们同样吃 CSS 变量前面换完色风格自动统一。要动背景、圆角、字体、动画这类细节构造样式类时传customStyles选项写一小段 CSS 覆盖默认值即可。更深一层的玩法继承Overlay基类自己写叠加层什么时候弹、弹什么参考Application.ts的createOverlays。️ 重度整页自绘做品牌专属玩家页面两条被验证过的路线只挂视频流界面全自绘Frontend/implementations/react/的PixelStreamingWrapper组件只挂视频画面播放遮罩和按钮全用 React 状态实现适合前端团队接管整套界面照 showcase 做游戏商城式页面Frontend/implementations/typescript/src/showcase.ts在播放器旁加了侧边栏点角色头像、皮肤按钮就能通过数据通道驱动 UE 里的内容。自绘页面有个硬要求body必须撑满视口100vw × 100vh再指定挂载点细节见官方文档 HTML Page Requirements.md。⚠️ 避坑清单5 个高频翻车点顺序applyStyleSheet()必须跑在new Application()前面晚了样式不生效别改源码优先customStyles CSS 变量覆盖以后升级不冲突重复按钮UseCustomElement接管控件时记得把默认按钮设成Disable构建环境前端改动后重新构建只认 NodeJS LTS 18.17.0其他版本可能失败验证本地起信令服务器访问http://127.0.0.1:8888直接看改后效果。 延伸阅读样式定制Customizing the Player Widget Style.md玩家页面定制Customizing the Player Webpage.md设置面板全解Settings Panel.mdUI 库源码Frontend/ui-library/TypeScript / React / Angular 示例Frontend/implementations/【免费下载链接】lama LaMa Image Inpainting, Resolution-robust Large Mask Inpainting with Fourier Convolutions, WACV 2022项目地址: https://gitcode.com/GitHub_Trending/la/lama创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 PixelStreamingInfrastructure 播放器控件样式定制指南：3 个抓手给云游戏 UI 换肤
PixelStreamingInfrastructure 播放器控件样式定制指南3 个抓手给云游戏 UI 换肤【免费下载链接】lama LaMa Image Inpainting, Resolution-robust Large Mask Inpainting with Fourier Convolutions, WACV 2022项目地址: https://gitcode.com/GitHub_Trending/la/lamaPixelStreamingInfrastructure 把 3A 云游戏送进浏览器默认播放器却是通用风格。播放器控件样式定制只有 3 个抓手样式表、UIOptions 配置、自定义 HTML——想换色就动样式表想改按钮就动配置想彻底换界面就上 HTML。下面按定制深度由浅入深一次讲清。️ 前端能力地图两个包三个抓手这套 Epic Games 开源的像素流送Pixel Streaming即把主机端渲染画面压成视频流送进浏览器基础设施前端拆成两个包Frontend/library/管连接——WebRTC浏览器端视频传输技术建流、信令浏览器和游戏服务器之间的接线握手、输入捕获、设置项Frontend/ui-library/管界面——按钮、面板、叠加层Overlay、全部样式。整个播放器界面长在Application的rootElement挂载点上页面里想插哪儿插哪儿。所以定制入口只有三个样式表全局颜色与控件外观UIOptions5 类默认控件的去留与替换自定义 HTML把挂载点嵌进你自己的页面布局想怎么摆怎么摆。对应三层定制深度轻度只换色中度换控件、改叠加层重度整页自绘。 轻度改 8 个 CSS 变量一键切换深浅色主题整套 UI 的颜色由--color0~--color7驱动天天打交道的是这 4 个--color1视频区背景深色下默认纯黑--color2文字颜色--color3强调色按钮和边框都吃它--color7按钮背景构造PixelStreamingApplicationStyle时传lightModePalette/darkModePalette就能整体换肤运行时调setColorMode(isLightMode)切换深浅色const styles new PixelStreamingApplicationStyle({ lightModePalette: { --color1: #F5F1E8, // 视频区背景换成暖米色 --color3: #FF6B00, // 强调色换成品牌橙 }, }); styles.applyStyleSheet(); // 关键必须在 new Application() 之前 const app new Application({ stream, ...options }); // 之后随时切换主题styles.setColorMode(true)设置面板、统计面板、按钮悬停效果会全部自动跟随新配色不用逐个控件修。️ 中度增删播放器控件自定义设置面板Application默认生成 5 类控件每类在UIOptions里都能三选一保留默认 / 换成自定义元素 / 彻底禁用。settingsPanelConfig⚙️ 设置面板——信令地址、编解码、输入开关都收在这statsPanelConfig 统计面板——帧率、码率、延迟fullScreenControlsConfig⛶ 全屏按钮xrControlsConfig WebXR 沉浸模式按钮videoQpIndicatorConfig️ 视频 QP 指示器QP 是编码质量参数值越小画质越好做面向玩家的云游戏页时常见组合是关设置面板、藏 QP 指示器全屏按钮交给自己的 HTML 接管const application new Application({ stream, settingsPanelConfig: { isEnabled: false }, // 关掉设置面板 videoQpIndicatorConfig: { disableIndicator: true }, // 隐藏 QP 指示器 fullScreenControlsConfig: { // 全屏按钮接管 creationMode: UIElementCreationMode.UseCustomElement, customElement: document.getElementById(myFullscreenBtn), }, }); 中度进阶Overlay 叠加层定制播放期间播放器会按状态自动弹 6 种 Overlay全屏状态提示层连接中、点击播放、信息提示、错误提示、断线重连、AFK 空闲倒计时玩家挂机离开前的提醒。它们同样吃 CSS 变量前面换完色风格自动统一。要动背景、圆角、字体、动画这类细节构造样式类时传customStyles选项写一小段 CSS 覆盖默认值即可。更深一层的玩法继承Overlay基类自己写叠加层什么时候弹、弹什么参考Application.ts的createOverlays。️ 重度整页自绘做品牌专属玩家页面两条被验证过的路线只挂视频流界面全自绘Frontend/implementations/react/的PixelStreamingWrapper组件只挂视频画面播放遮罩和按钮全用 React 状态实现适合前端团队接管整套界面照 showcase 做游戏商城式页面Frontend/implementations/typescript/src/showcase.ts在播放器旁加了侧边栏点角色头像、皮肤按钮就能通过数据通道驱动 UE 里的内容。自绘页面有个硬要求body必须撑满视口100vw × 100vh再指定挂载点细节见官方文档 HTML Page Requirements.md。⚠️ 避坑清单5 个高频翻车点顺序applyStyleSheet()必须跑在new Application()前面晚了样式不生效别改源码优先customStyles CSS 变量覆盖以后升级不冲突重复按钮UseCustomElement接管控件时记得把默认按钮设成Disable构建环境前端改动后重新构建只认 NodeJS LTS 18.17.0其他版本可能失败验证本地起信令服务器访问http://127.0.0.1:8888直接看改后效果。 延伸阅读样式定制Customizing the Player Widget Style.md玩家页面定制Customizing the Player Webpage.md设置面板全解Settings Panel.mdUI 库源码Frontend/ui-library/TypeScript / React / Angular 示例Frontend/implementations/【免费下载链接】lama LaMa Image Inpainting, Resolution-robust Large Mask Inpainting with Fourier Convolutions, WACV 2022项目地址: https://gitcode.com/GitHub_Trending/la/lama创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考