【技术】UE4 Pixel Streaming 详细解读（实践篇）

maltadirk · 发表于 2021-11-23 12:21

后续文章更新移步→微信公众号“虚幻社区”（mantra-xhsq），您的支持是我创作的动力。
本文讲解如何一步一步在UE4中实现Pixel Streaming。关于什么是Pixel Streaming，有什么用，底层原理是什么，请跳转UE4 Pixel Streaming详细解读（原理篇）。
本文参考链接官方文档。
在这篇文章中我们使用的是第三人称模板工程，您可以使用任何UE4工程，当然也包括上一篇文章中官方案例《Pixel Streaming Demo》。
一、开始前的设置

1）硬件设置：目前Pixel Streaming只支持Windows（已经在Win8和Win10上测试过），并且对GPU有硬性要求：必须是支持Hardware-Accelerated Video Encoding(NVENC)硬件加速视频编码，官方支持显卡列表。如果您在后续的运行中看到“Failed to load NvEncode dll”错误，说明您的显卡不支持NVENC。
2）安装node.js，如果您没有安装可以按照提示进行下载和安装。
3）网络端口设置：确保本地网络端口80，8124，8888没有被占用，这是Pixel Streaming默认使用的端口。如果想更改，可以参考链接。
4）停止网络服务器：如果您电脑中已经运行了任何网络服务器，需要先停掉。
5）IP地址：您需要知道计算机的IP地址。在LAN或VPN中开始使用Pixel Streaming是个好主意，这意味着您需要计算机的内部IP地址。您可以通过从命令提示符或控制台窗口运行ipconfig命令并查找以IPv4地址开头的行来获取此信息。
如果您尝试从其他网络上的计算机或移动设备进行连接，则需要使用外部IP地址。要找到这个，您可以尝试访问外部IP。
二、UE4工程设置

Pixel Streaming 仅仅在您将工程打包运行，或者使用独立游戏选项从虚幻编辑器启动时才有效。为了让Pixel Streaming 插件从您的应用程序中提取和流式传输音频，您需要使用特殊的命令行标志启动虚幻引擎：-AudioMixer。以下过程显示了如何为两种方案设置该选项。
1、打开UE4工程，打开主菜单Edit>Plugins，之后再Graphics分类中找到Pixel Streaming插件，勾选Enable选项。

2、弹出提示“Pixel Streaming目前为测试版，可能会由于不稳定引起崩溃，也可能再不通知您的情况下移除，请谨慎使用，是否激活此插件”，此处我们点击Yes。

3、激活插件后我们需要按照提示重新启动。

4、回到虚幻编辑器，打开Edit>ProjectSettings。如果您的工程中有需要移动的玩家，那么当您在手机或者平板上运行时就需要使用触摸，那么您需要在屏幕上显示虚拟摇杆。在Engine>Input Category中找到“Always Show Touch Interface”选项并勾选。

该选项并不是必须设置，您可以根据需要设置。此处我们使用的是第三人称模板，如果在手机或者平板上运行就需要用到触摸操作，所以需要显示虚拟摇杆。
5、打开Edit>Editor Preferences，在Level Editor>Play分类下找到Additional Launch Parameters选项，设置他的值为 -AudioMixer。

6、之后打包工程：File>Package Project>Windows>Windows(64 bit)，选择打包文件夹，之后开始打包。

打包完成之后跳转到刚刚设置的目录，找到WindowsNoEditor，可以看到我们打包完成的应用。

7、每次运行打包的应用程序，我们都需要传递-AudioMixer命令行参数，比较麻烦，所以我们讲解一种一劳永逸的方式。
按住Alt键拖动exe到桌面上（或其他任何目录）创建快捷方式。之后右击选择属性，在Target后面添加 -AudioMixer参数。

一旦启动并运行Pixel Streaming系统，您可能还需要添加-RenderOffScreen命令行参数。如果您的虚幻引擎应用程序窗口被意外地最小化，Pixel Streaming视频和输入流将停止工作。 -RenderOffScreen通过在没有任何可见窗口的模式下运行应用程序来避免这种可能性。
三、开启服务器

接下来我们将启动服务器，等待客户端连接，这样才能将渲染的帧和声音传送给客户端。
1、在UE4的安装目录下找到Engine\Source\Programs\PixelStreaming\WebServers\SignallingWebServer\run.bat并双击运行。

首次运行之后，会显示如下信息

2、接下来我们将启动WebRTC Proxy，在引擎安装目录下找到Engine\Source\Programs\PixelStreaming\WebRTCProxy\bin\Start_WebRTCProxy.bat并启动。

启动之后显示以下信息。

3、接下来启动我们上一步中创建的快捷方式。当WebRTC代理服务器检测到虚幻应用程序运行时，它会连接到Signalling服务器，告诉它已准备好从应用程序流式传输内容。您应该在WebRTC代理服务器的控制台窗口中看到以下输出行：

在Sinalling服务器输出端口会显示以下输出行：

至此，我们已经在本地PC（远程PC或者云端服务器也是类似的设置），接下来就是客户端连接了。
为方便起见，当您打包虚幻引擎应用程序时，也可以将这些服务器复制到包含打包的可执行文件的文件夹中。您可以在Engine子文件夹下找到它们，与上面提到的路径相同。您可以从那里启动服务器，而不是从虚幻引擎安装文件夹中启动它们。但是，请记住，如果您需要修改这些文件夹中的任何文件，特别是Signalling和Web服务器的播放器页面或配置文件，则应在原始位置修改它们。如果您在打包文件夹中修改它们，则下次打包应用程序时可能会覆盖您的更改。
四、连接

接下来，我们可以在多台设备上利用浏览器连接到服务器接受Pixel Streaming。
1、在运行虚幻引擎应用程序的同一台计算机上，Alt-Tab将焦点从虚幻引擎应用程序切换出来，并启动支持的Web浏览器（谷歌浏览器和Mozilla Firefox是理想的选择）。
2、在地址栏中，导航到http://127.0.0.1。此本地计算机的IP地址，因此请求应由Signalling服务器提供：

3、单击要连接的页面，然后再次单击“播放”按钮以启动流传送。
4、现在将连接到您的应用程序，您应该看到渲染的输出流进入播放器网页的中间：

默认播放器页面已经设置将键盘，鼠标和触摸屏输入转发到虚幻引擎，因此您可以控制应用程序并完全按照您直接控制应用程序的方式进行导航。
5、单击窗口右侧的+按钮可以展开一些用于控制流的内置选项。
6、现在，找到网络中的其他计算机和/或移动设备。重复相同的步骤，但不是使用127.0.0.1，而是将浏览器指向运行虚幻引擎应用程序和Signalling服务器的计算机的IP地址。
7、最后您将得到下图所示的结果。

五、存在的问题

目前Pixel Streaming仍然为测试版，所以不太稳定。在笔者测试的过程中遇到这样一些问题：
1）设备闲置一段时间之后会出现花屏，刷新网页即可解决。
2）重新打包工程后直接运行，发现连接成功之后还是运行原来的工程，需要重启服务器才能解决。
六、Next Step

目前所有连接的设备看到的都是统一的画面和操作，如果您想让每个设备单独连接，可以参考Hosting And Networking。
关于如何自定义网页内容，可以参考Customizing Player Web Page。
Pixel Streaming选项及命令，可以参考Pixel Streaming Reference。

后续文章更新移步→微信公众号“虚幻社区”（mantra-xhsq），您的支持是我创作的动力。
欢迎大家加群讨论：源尚草学院虚幻社区 524418526（一群已满）790066685（请加二群）。

c0d3n4m · 发表于 2021-11-23 12:22

很棒的实践说明，刘明了

JamesB · 发表于 2021-11-23 12:25

这是内网访问，外网访问的有研究吗？

zifa2003293 · 发表于 2021-11-23 12:32

我的笔记本可以访问，手机不能用啊。。。只有苹果手机可以？

TheLudGamer · 发表于 2021-11-23 12:33

我试了ipad，没试安卓

johnsoncodehk · 发表于 2021-11-23 12:38

外网的话很少能通吧

ChuanXin · 发表于 2021-11-23 12:39

-AudioMixer 只能采集应用的音频，假设通过程序播放某路径下mp3等格式的音乐，像素流送也采集不到，不知道知乎上有没有大佬指条明路

JoshWindsor · 发表于 2021-11-23 12:49

ipad的地址是怎么查看？

Mecanim · 发表于 2021-11-23 12:49

你好，移动端的ip怎么获取到，我pc打开网页能查到

HuldaGnodim · 发表于 2021-11-23 12:49

在ipad的wifi设置里可以看到ip address

		自动登录	找回密码
密码			立即注册

【技术】UE4 Pixel Streaming 详细解读（实践篇）

本帖子中包含更多资源