UE 像素流与 Web 协同开发

2024-06-12 12:04
文章标签 开发 web ue 像素 协同

本文主要是介绍UE 像素流与 Web 协同开发,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

UE 像素流与 Web 协同开发

  • 创建Web端应用
  • Web向UE发送消息
    • emitCommand
    • emitConsoleCommand
    • emitUIInteraction
  • UE接收Web的消息
  • UE向Web发送消息
  • Web接收UE的消息
  • UE 冻结帧

与Web交互主要涉及两个方面,一个是UE向Web发送消息,另一个就是Web端向UE程序发送消息,UE程序中需要启用像素流插件,Web端需要安装@epicgames-ps/lib-pixelstreamingfrontend-ue5.x依赖包。
在这里插入图片描述

创建Web端应用

Web端需要通过npm i @epicgames-ps/lib-pixelstreamingfrontend-ue5.x @epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.2’安装对应版本的依赖npm包,然后就可以在代码中调用 UE Web 封装好的api来与UE程序进行交互了,更详细的API可以参考git上的文档,或者直接阅读Typescript类型定义文档。


// 导入需要的依赖
import { Config, PixelStreaming } from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.3';
import { Application, UIOptions, PanelConfiguration, UIElementCreationMode } from '@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.3'// 创建像素流
const config = new Config({useUrlParams: true,initialSettings: {ss: 'ws://192.168.1.58:8080', // 像素流的 WS 地址,默认端口是8080AutoConnect: true,AutoPlayVideo: true,MinQP: 30,XRControllerInput: false,GamepadInput: false,TouchInput: false,HoveringMouse: true,}
});
const stream = new PixelStreaming(config);// 创建像素流播放界面
const application = new Application({stream: stream,onColorModeChanged: (isLightMode) => PixelStreamingApplicationStyles.setColorMode(isLightMode),settingsPanelConfig: { isEnabled : false,visibilityButtonConfig : { creationMode : UIElementCreationMode.Disable }},fullScreenControlsConfig: {creationMode: UIElementCreationMode.UseCustomElement,customElement: document.getElementById('myCustomFullscreenButton')}
});// 将 UI 添加到 Web 页面 DOM 节点上
document.getElementById('ue_container')?.appendChild(application.rootElement);// 监听创建后播放流的事件,还有其它事件,可以阅读 *.d.ts 类型定义文件了解
stream.addEventListener('playStream', () => {getCurrentWaterLevel();
});

Web向UE发送消息

UE 像素流 Web API 提供了emitCommand、emitConsoleCommand、emitUIInteraction三个函数来向UE发送消息。

emitCommand

可以用 JSON 对象的形式向UE发送任意命令。

let descriptor = {ConsoleCommand: 'stat fps'// ConsoleCommand 是 UE 的保留的关键字Name:'asdad' // 自定义的消息
}
this.stream.emitCommand(descriptor);

emitConsoleCommand

可以向UE发送控制台命令。例如, stat fps 显示帧速率。

注意: 由于虚幻引擎控制台命令的强大功能,该 emitConsoleCommand 功能可能会带来安全风险,所以UE程序默认没有启用这个功能。如需启用,需要在UE程序的快捷方式里添加启动参数 -AllowPixelStreamingCommands ,或者使用“独立游戏”选项从虚幻编辑器启动它。

this.stream.emitConsoleCommand('stat fps');  // 显示帧速率

emitUIInteraction

将任意字符串或JSON对象发送到游戏。使用这个方法从 Web 发送消息到UE程序,在UE程序中可以接收并进行处理。

this.stream.emitUIInteraction("MyCustomCommand");
// 或
const descriptor = {LoadLevel: "/Game/Maps/Level_2",PlayerCharacter: {Name: "Shinobi",Skin: "Dynasty",},
};
this.stream.emitUIInteraction(descriptor);

UE接收Web的消息

当在Web端用emitUIInteraction 发送了消息之后,在UE程序中使用 Pixel Streaming Input > Bind Event to On Input Event 节点来绑定事件,每当有新的消息进来,就会执行该事件。这个事件上的Descriptor字符串里存放的就是Web端传过来的消息。
在这里插入图片描述
这个蓝图节点还具有处理读取JSON的功能,如果传过来的是JSON对象,则可以用 Pixel Streaming > Get Json String Value 节点来读取对应类型的字段值。取值的时候支持用 . 符号直接下钻获取,例如:class.student.name
在这里插入图片描述

UE向Web发送消息

UE程序可以向Web页面发送消息,Web端可以通过JavaScript来接收消息并作出相应的处理。使用 Pixel Streaming -> Send Pixel Streaming Response 节点向Web端发送消息。该节点可以传入一个字符串作为参数,字符串也可以是JSON内容,用以表明需要发送给Web端的事件内容。
在这里插入图片描述

Web接收UE的消息

Web端通过 addResponseEventListener 来监听UE程序传来的消息,用 removeResponseEventListener 来移除监听,这两个方法的第一个参数是字符串类型,只是用来做标识的,如果注册多个监听,每一个监听事件都会收到消息,因此为了避免重复执行建议只注册一个监听消息事件,在这个事件回调函数中自己写逻辑来处理不同的消息Data。
如果需要传递复杂消息,可以封装成一个JSON字符串,Web端收到之后使用 JSON.parse(data) 来解析。

this.stream.addResponseEventListener("handle_responses", (data)=>{console.log(`接收到了UE传来的消息:${data}`);
});this.stream.removeResponseEventListener("handle_responses");

UE 冻结帧

在像素流推流的过程中,有时候并不需要一直实时推流,如果用户长期视角未动,可以使用“冻结帧”实现暂停的效果。暂停之后浏览器会显示暂停时候的画面,UE客户端也会停止实时渲染、像素流推送也会停止,此时可以节约 GPU和网络占用率
暂停的时候可以使用当前画面,或者指定一个纹理作为展厅画面。想要恢复每帧流送时,使用 Unfreeze Frame 节点可以手动恢复渲染和推流。
在这里插入图片描述
在这里插入图片描述

这篇关于UE 像素流与 Web 协同开发的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1054162

相关文章

SpringBoot开发中十大常见陷阱深度解析与避坑指南

《SpringBoot开发中十大常见陷阱深度解析与避坑指南》在SpringBoot的开发过程中,即使是经验丰富的开发者也难免会遇到各种棘手的问题,本文将针对SpringBoot开发中十大常见的“坑... 目录引言一、配置总出错?是不是同时用了.properties和.yml?二、换个位置配置就失效?搞清楚加

如何使用Maven创建web目录结构

《如何使用Maven创建web目录结构》:本文主要介绍如何使用Maven创建web目录结构的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录创建web工程第一步第二步第三步第四步第五步第六步第七步总结创建web工程第一步js通过Maven骨架创pytho

Java Web实现类似Excel表格锁定功能实战教程

《JavaWeb实现类似Excel表格锁定功能实战教程》本文将详细介绍通过创建特定div元素并利用CSS布局和JavaScript事件监听来实现类似Excel的锁定行和列效果的方法,感兴趣的朋友跟随... 目录1. 模拟Excel表格锁定功能2. 创建3个div元素实现表格锁定2.1 div元素布局设计2.

如何使用Haporxy搭建Web群集

《如何使用Haporxy搭建Web群集》Haproxy是目前比较流行的一种群集调度工具,同类群集调度工具有很多如LVS和Nginx,本案例介绍使用Haproxy及Nginx搭建一套Web群集,感兴趣的... 目录一、案例分析1.案例概述2.案例前置知识点2.1 HTTP请求2.2 负载均衡常用调度算法 2.

Python中对FFmpeg封装开发库FFmpy详解

《Python中对FFmpeg封装开发库FFmpy详解》:本文主要介绍Python中对FFmpeg封装开发库FFmpy,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录一、FFmpy简介与安装1.1 FFmpy概述1.2 安装方法二、FFmpy核心类与方法2.1 FF

基于Python开发Windows屏幕控制工具

《基于Python开发Windows屏幕控制工具》在数字化办公时代,屏幕管理已成为提升工作效率和保护眼睛健康的重要环节,本文将分享一个基于Python和PySide6开发的Windows屏幕控制工具,... 目录概述功能亮点界面展示实现步骤详解1. 环境准备2. 亮度控制模块3. 息屏功能实现4. 息屏时间

Python实例题之pygame开发打飞机游戏实例代码

《Python实例题之pygame开发打飞机游戏实例代码》对于python的学习者,能够写出一个飞机大战的程序代码,是不是感觉到非常的开心,:本文主要介绍Python实例题之pygame开发打飞机... 目录题目pygame-aircraft-game使用 Pygame 开发的打飞机游戏脚本代码解释初始化部

使用Python开发一个现代化屏幕取色器

《使用Python开发一个现代化屏幕取色器》在UI设计、网页开发等场景中,颜色拾取是高频需求,:本文主要介绍如何使用Python开发一个现代化屏幕取色器,有需要的小伙伴可以参考一下... 目录一、项目概述二、核心功能解析2.1 实时颜色追踪2.2 智能颜色显示三、效果展示四、实现步骤详解4.1 环境配置4.

Python使用smtplib库开发一个邮件自动发送工具

《Python使用smtplib库开发一个邮件自动发送工具》在现代软件开发中,自动化邮件发送是一个非常实用的功能,无论是系统通知、营销邮件、还是日常工作报告,Python的smtplib库都能帮助我们... 目录代码实现与知识点解析1. 导入必要的库2. 配置邮件服务器参数3. 创建邮件发送类4. 实现邮件

使用Python实现获取屏幕像素颜色值

《使用Python实现获取屏幕像素颜色值》这篇文章主要为大家详细介绍了如何使用Python实现获取屏幕像素颜色值,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 一、一个小工具,按住F10键,颜色值会跟着显示。完整代码import tkinter as tkimport pyau