UE像素流送、交互

官网地址 =====》 https://docs.unrealengine.com/4.26/zh-CN/

第一步

先决条件

检查操作系统和硬件-

像素流送插件只能在运行Windows和Linux操作系统的电脑上编码视频，对电脑的GPU硬件还有一定要求。欲知详情，请查阅像素流送参考。

安装node.js -

如果电脑上尚未安装 node.js，则需要下载并安装。

打开网络端口-

必须打开本地网络上的以下端口进行通信：80、888。如需修改默认端口，请查阅像素流送参考。

停止其他web服务器 -

如果电脑正在运行其他Web服务器，则将其停止。

IP地址-

如果你希望通过网络测试像素流，你需要知悉电脑的IP地址。

不过，你可以先通过LAN或VPN测试像素流送。你可以使用 localhost 或 127.0.0.1 作为你的像素流IP地址。如果尝试从不同网络的电脑或移动设备上进行连接，则你可能需要将信令服务器配置成使用STUN/TURN服务器。访问此像素流参考页面了解操作方法。

1 - 准备虚幻引擎应用程序

在这个步骤中将为项目创建一个standalone可执行文件。

只有将项目作为打包应用程序运行时、或使用

Standalone Game 选项在虚幻引擎中启动时才能使用像素流送插件。

要使像素流送插件从应用程序中提取并流送音频，需要用一条特殊的命令行标签启动虚幻引擎：

-AudioMixer。以下步骤将解释如何在两种情况下进行设置。

在虚幻编辑器中打开项目。

在虚幻编辑器的主菜单中选择

编辑（Edit） > 插件（Plugins）。

在图像（Graphics）下找到像素流送（Pixel Streaming）插件并勾选启用（Enabled）框。

点击立即重启（Restart Now）重启项目并应用修改。

返回虚幻编辑器，从主菜单中选择

编辑（Edit） > 项目设置（Project Settings）。

如果项目中有角色，而您希望启用触控设备的输入（如手机和平板电脑）在关卡中移动此角色，则可能需要在屏幕上显示触摸控制器。

在引擎（Engine） > 输入类型（Input category）下启用固定显示触控界面（Always Show Touch Interface）设置。

此项为任选，并非所有项目强制要求。然而，在第三人称面板之类的项目中，这能确保拥有触控设备的用户能对流送的应用程序进行控制（前提是项目的玩家控制器支持输入）。

在主菜单中选择

编辑（Edit） > 编辑器偏好（Editor Preferences...）

关卡编辑器（Level Editor） > 播放（Play）中找到额外启动参数（Additional Launch Parameters）设置，并将其值设为 -AudioMixer -PixelStreamingIP=localhost -PixelStreamingPort=8888。

打包Windows项目。从虚幻编辑器的主菜单中选择文件（Files） > 打包项目（Package Project） > Windows > Windows (64-bit)。

在项目找打开虚幻引擎放置项目打包版本的文件夹，点击选择文件夹（Select Folder）。

虚幻编辑器将开始打包进程。

打包进程完毕后，前往上方第6步中选择的文件夹。将找到一个名为 WindowsNoEditor 的文件夹，其中的内容类似于下图：

每次启动打包应用程序时，均需要传递与第9步中一样的命令行标签。执行此操作的一种方法是设置一个快捷方式：

右键点击快捷方式并从上下文菜单中选择属性（Properties）

在 *快捷方式属性（Shortcut Properties）** 窗口的 **快捷方式（Shortcut）** 选项卡中，在 **目标（Target）** 域的末尾附加文本 `-AudioMixer -PixelStreamingIP=localhost -PixelStreamingPort=8888` 并点击 **确认**。

2 - 启动服务器

在这个步骤中将开启网络服务，在虚幻引擎应用程序和客户端浏览器间建立点对点的连接。

以下步骤假设你使用的是Windows系统。不过，Linux系统上的操作方式相同，唯一不同在于你要执行 SignallingWebServer\platform_scripts\cmd\bash 目录中的脚本。

在虚幻引擎安装文件夹中，在

Samples/PixelStreaming/WebServers/SignallingWebServer 中找到信令服务器的路径。

![信令服务器和网络服务器](pixelstreaming-gs-servers-signalling.png)

为了准备信令服务器，首先以管理员身份打开PowerShell并运行

SignallingWebServer\platform_scripts\cmd\setup.ps1。这会安装所有需要的依赖项。

运行

SignallingWebServer\platform_scripts\cmd\Start_SignallingServer.ps1 开启信令服务器。首次运行服务器时其将下载需要的所有依赖性。服务器启动，能够接收连接后，控制台窗口中将出现以下命令行：

WebSocket listening to Streamer connections on :8888WebSocket listening to Players connections on :80Http listening on *: 80

现在用上一节中创建的快捷方式来启动虚幻引擎应用程序。或者，如果你习惯用命令行来启动应用，请执行以下命令：

MyPixelStreamingApplication.exe -PixelStreamingIP=127.0.0.1 -PixelStreamingPort=8888

启动信令服务时遇到的问题

解决方法：取消代理，并设置淘宝镜像

npm config delete proxy
npm config delete https-proxy
npm install -g cnpm --registry=https://registry.npm.taobao.org

app.js 修改端口

ws = new WebSocket('ws://127.0.0.1:80')

页面通讯

点击UE魔板时 js发送数据到UE js-----> UE

所有的信息传递都由 UE工程写好蓝图

例如

相对应的在UE里的蓝图表现为

理解为js端通过apiSend调用emitUIInteraction 方法类似于事件发送

UE端拿到json后解析funName（poi，jt）然后拿到值

/***向后端发送一个json对象，进行数据交互* @param {JSON} jsonData*/
export function apiSend (jsonData) {debounce(() => emitUIInteraction(jsonData), 100)
}

反过来

UE像JS端发送消息

场景为====》当点击某个模型时传回该模型的Id 以ID查到该模型的数据再通过上述方法传回UE进行实时渲染。

那么这个UE传ID到JS的过程就是

UE的蓝图写了一个方法然后我点击模型的时候UE会通过apiOnResponse方法调用addResponseEventListener （类似监听器），

代码为

传入 funcName==getXY

意思是监听UE的getXY 方法，返回一个回调函数，返回值作为参数传入

这样就能监听到UE传来的值了

apiOnResponse('getXY', (data) => {const msg = JSON.parse(data)const tips = document.getElementsByClassName('tips')[0]if (msg.devStop) {console.log(msg)} else {const x = JSON.parse(msg.name).x / 3840 * 100const y = JSON.parse(msg.name).y / 1080 * 100/* const name = JSON.parse(msg.name).name */this.isShow = truetips.style.left = `${x}%`tips.style.top = `${y}%`}
})

/***创建一个监听后端返回数据的事件* @param {*} funName 监听函数名* @param {*} callback 后端响应后的回调函数*/
export function apiOnResponse (funName, callback) {addResponseEventListener(funName, callback)
}

值得一提的是

之前我试了好几次的js发送json到UE都不行，后面发现UE场景里面要加上玩家控制器才可以。。。正常发送数据