发布于 2022-10-27 11:50:57

✍️ UE5.03_PixelStreaming插件应用

✍️ UE5.03_PixelStreaming插件应用
一、背景

背景：像素流送基础的部署流程可以参照官网文档,链接: https://docs.unrealengine.com/5.0/en-US/overview-of-pixel-streaming-in-unreal-engine/
z
二、操作步骤

使用UE像素流送插件实现“本地局域网流送”
一、环境搭建
1.下载node.js
下载链接:https://nodejs.org/en/

双击运行安装程序,一直点击Next即可,记得勾选下图

自动安装所需的工具
2.关闭防火墙和开启网络端口
运行像素流送的电脑要关闭防火墙,否则可能会导致其他机器无法访问

8888端口:UE4项目通过该端口将画面数据传送给信令服务器 (UE4<------->信令服务器)
80端口:浏览器通过该端口访问像素流送画面(浏览器<------->信令服务器)
当然以上端口是可以自行更改的，只需同时更新防火墙开放端口配置
打开网络端口方法:https://zhidao.baidu.com/question/239110082.html
3.获取本机IP地址
快捷键Win+R呼出此窗口

cmd输入ipconfig查询本机ip,找到IPv4地址,如本机ip为192.168.xx.xx

二、打包项目
1.开启像素流插件并重启

2.项目设置
在项目设置>输入中修改以下属性

固定显示触控界面：勾选上，在流送时就可以显示出UE自带的触控摇杆
加入映射按键：使你在访问像素流送页面的可以正常操作摇杆
3.打包windows
注意,测试像素流送时,不要把项目名与PixelStreaming同名,否则会打包失败

三、运行像素流送
1.为UE4启动程序创建快捷方式
快捷方式右键->属性,在目标添加以下启动参数:
-AudioMixer -PixelStreamingIP=localhost -PixelStreamingPort=8888
注意:启动参数之间以空格隔开(.exe与-AudioMixer之间也有空格!)

启动参数分析:
-AudioMixer:从UE4程序采集音频并流送到浏览器
-PixelStreamingIP:像素流送IP地址,localhost也可以写成127.0.0.1(本机IP),也可以写上面通过ipconfig查询到的ip地址(192.168.xx.xx)
-PixelStreamingPort:信令服务器监听UE4程序的端口,用于将UE4程序的画面传输到信令服务器,默认8888
大体流程如下:
2.启动信令服务器
打开下图中的路径

双击setup.bat首次启动会下载运行所需要的依赖项，安装完之后会出现两个文件夹turn和coturn如下图所示

点击run_local.bat开启信令服务器，当信令服务器成功开启后,会如下图所示

我们只关心最下面的条绿色log,解析:
(1)WebSocket listening to streamer connectio on:8888 表示信令服务器中的streamer服务器(用于从ue程序获取画面)监听8888端口,当ue4程序以-PixelStreamingPort=8888参数启动时,会自动连接到streamer服务器.
测试:我们启动ue4程序实例,查看信令服务器变化
当ue启动后,streamer connected: ::1表示ue已经连接到信令服务器,画面传输已经就绪

(2)Http listening on *: 80 表示信令服务器的Http服务器监听80端口.用户从浏览器输入地址(PixelStreamingIp:httpPort,如127.0.0.1:80)时,访问的就是这个http服务器
(3)WebSocket listening to players connectio on:80 表示信令服务器中的players服务器(负责管理连入的用户,比如踢人之类的操作),该服务器是基于上面的http实现的,所以当用户访问上面的http服务器是,也同时会连入players服务器
3.网页端输入"127.0.0.1"
也可以直接写127.0.0.1:80，80为默认端口
网页会跳转到下面的界面,点击Click to start即可获取像素流送画面

测试:可以看到用户通过浏览器连入了players服务器,画面流送成功

使用Matchmaker工具实现“本地局域网多人多实例流送”
一、开启Matchmaker
使用开启了Pixel Streaming插件的项目中，打包之后会在打包出来的文件夹下图路径下找到这个工具

首次启动需要setup一下，之后再去运行run.bat

1.配置Matchmaker端口并启动
本次演示使用的是Matchmaker的默认配置
HttpPort: 80,MatchmakerPort: 9999,两个端口，自己制作时可以自行修改
开启后是这一样的，不要关闭这个窗口，下一步去配置我们的信令服务器

二、配置信令服务器
因为是多实例局域网流送，所以首先我们要复制出一份打包好的项目如下“Windows - 6666”

1.分别配置两个项目信令服务器
在以下路径中分别配置两个项目信令服务器的“cirrus.js”“config.json”文件

cirrus.js中
UseMatchmaker改为True；
MatchmakerPort要与上一部分中MatchmakerPort保持一致，上一部分我们使用的是默认的9999端口；
HttpPort:50; StreamerPort:5555;

const defaultConfig = {
UseFrontend: false,
UseMatchmaker: true,
UseHTTPS: false,
UseAuthentication: false,
LogToFile: true,
LogVerbose: true,
HomepageFile: 'player.html',
AdditionalRoutes: new Map(),
EnableWebserver: true,
MatchmakerAddress: "",
MatchmakerPort: "9999",
PublicIp: "localhost",
HttpPort: 50,
HttpsPort: 443,
StreamerPort: 5555,
SFUPort: 8889
};

config.json 中一样的配置
{
"UseFrontend": false,
"UseMatchmaker": true,
"UseHTTPS": false,
"UseAuthentication": false,
"LogToFile": true,
"LogVerbose": true,
"HomepageFile": "/Public/player.html",
"AdditionalRoutes": {},
"EnableWebserver": true,
"MatchmakerAddress": "",
"MatchmakerPort": "9999",
"PublicIp": "localhost",
"HttpPort": 50,
"HttpsPort": 443,
"StreamerPort": 5555,
"SFUPort": 8889
}
另一个项目也去修改同样的文件
cirrus.js config.json 两个文件中除了红框中的两个属性其他同上一样,除此之外SFUPort：8886也需要改一下，如果不改端口会冲突

2.两个程序分别创建相应的快捷方式
-AudioMixer -PixelStreamingIP=localhost -PixelStreamingPort=5555
-AudioMixer -PixelStreamingIP=localhost -PixelStreamingPort=6666
3.分别启动信令服务器
看上一部分“启动信令服务器”
如下已经配置好信令服务器和Matchmaker链接

启动两个UE实例程序

现在两个端口50，60就可以开始访问了，网页输入IP“127.0.0.1:50” “127.0.0.1:60”
3. 公网像素流送
像素流送公网部署相较于局域网的区别就在于可以被外网访问到,购买云服务器是一种方案,这种其实是把像素流送项目放到了一台已经映射好公网ip的远程电脑上,自己其实也可以用过一些外网映射软件来把自己的电脑做成一台像素流送公网服务器.
本例采用购买云服务器的方式进行部署,本篇以腾讯云为例
UE5相比于之前的版本，操作便捷了不少

UE5中将TURN/STUN server(内网穿透) 废弃了,官方给出如下解释
为方便使用，Samples/platform_scripts/ 目录包含可在Windows和Linux上运行 CoTURN 的脚本。CoTURN 是一款免费开源的 STUN/TURN 服务器（可投入生产）。我们移除了之前发布的 STUN 和 TURN 参考服务器，因为两者还无法达到可实际应用级别。
一、配置你的腾讯云GPU服务器
1.安全组端口配置
选择开放的端口,本例中开放以下端口():
TCP:50,60,70,5555,6666,7777,19302,19303
UDP:50,60,70,5555,6666,7777,19302,19303
2.开启远程连接到云服务器
Win+R 输入 mstsc

首先在云服务器上配置环境下载nodejs，跟本地电脑一样的版本配置
二、本地配置信令服务器
这里配置信令服务器可以按照上面的操作流程，就不再多说了
除此之外需要修改的如下
在信令服务器的 cirrus.js 和 config.json的两个文件中Public IP需要改为你的公网IP

现在信令服务器就配置好了
三、在云服务器运行
把你配置好的打包项目上传到云服务器中
首先下载依赖项setup.bat

之后去开启 Start_WithTURN_SignallingServer.ps1 右键使用PowerShell运行

运行后出现两个窗口这样就成功过了，再去通过网页访问公网的IP地址123.456.78.89:60 就可以访问到服务器上流送的页面了