对UE4 Pixel Streaming功能的一点研究

最近，UE4发布了4.22版本，没过多久，又发布了一个Pixel Streaming Demo，我在好奇之下看了一下项目的介绍，顿时觉得这项目太牛了，于是研究了一番，这篇文章算是对近段时间研究的一个总结。

Pixel Streaming（暂译像素流）功能可以让用户通过网页访问其他主机上正在运行着的UE4项目，没错，就是其他主机上的UE4项目。最关键的是，你可以像平常一样控制应用，很有云游戏的样子！也许在不久的将来，你不需要花那么多钱去买个煤气灶，只要选择一个高质量的画面就可以了。

原理

下图说明了像素流项目的简要原理：

先在远程PC上渲染好图形，将这些数据连同音频一起发送到客户端浏览器上，在浏览器上进行的操作也会被封装然后发送给远程PC端，远程PC会响应这些操作。

那么具体是怎么实现这些功能的？
1、首先，UE4需要4.22的版本，这个版本中集成了Pixel Streaming插件，启用这个插件，会将每一帧的结果用H.264视频格式编码，与音频一同打包进媒体流，并且发送给WebRTC代理服务器。
2、WebRTC代理服务器负责将像素流插件生成的媒体流转发给观看者，通过直接的点对点连接进行传输。但它不是最先监听客户端连接的，它需要信号网络服务器（Signaling and Web Server）。
3、信号网络服务器（Signaling and Web Server）负责监听客户端（通常指网页）的连接，然后建立客户端和WebRTC代理服务器之间的连接，完成后，客户端就可以看到项目了。

运行效果

实践

注意：此项目只对4.22的版本有效！

1、获取项目

打开Epic Games Launcher，切换到Unreal Engine -> Learn标签页，下拉找到Pixel Streaming Demo，下载并且创建项目（项目很大，10+G，空间基本都被模型占用了）。

2、发布项目

作为Demo，项目已经开启了Pixel Streaming插件，点击Edit菜单->Plugin，搜索Pixel Streaming，你应该看到这个插件已经勾选上了。

由于是尝鲜性功能，Pixel Streaming无法在编辑器模式或者模拟模式下生效，只能发布或者用Standalone Game模式运行。我选择跟着官方指南走，发布！

3、网页配置

发布后，定位到"发布目录\Engine\Source\Programs\PixelStreaming\WebServers\SignallingWebServer"，新建一个文件夹，起名custom_html。然后将项目目录->WebInterface文件夹内的所有内容复制到custom_html文件夹中，注意不能把WebInterface目录复制进去，只要里面的内容。

从nodejs官网下载nodejs并安装，我们的信号网络服务器是用nodejs实现的。

4、启动

定位到发布目录，启动exe

定位到“发布目录\Engine\Source\Programs\PixelStreaming\WebRTCProxy\bin”，运行Start_WebRTCProxy.bat文件。

定位到“发布目录\Engine\Source\Programs\PixelStreaming\WebServers\SignallingWebServer”，运行run.bat文件。

5、连接

打开浏览器，http://<项目运行的ip地址>/PixelDemo.htm，就可以看到运行效果了。多点几下左边的按钮，看看效果。

如果不是本机访问，那么一定要将本机的防火墙关掉，不然其他机子是无法访问的！这坑了我2天的时间，找了各种原因才发现原来是防火墙的问题。

为什么这么好的项目现在才出现？

应该说是现在的技术已经成熟，才催生出这种项目。

这种需求很早就有了，因为项目的优势非常明显：
1、强大的GPU赋予了强大的图形能力
2、无需下载或者安装什么东西
3、开发成本低，不需要考虑移植的问题
但是，阻止项目的还是技术不成熟，主要是网速。

来做一个简单的计算。一个1920x1080分辨率的游戏，每个像素用4字节的空间来保存数据，那么一帧的数据量将达到7.91M。游戏要求每秒至少30帧，标配是60帧，那么在标配的要求下，每秒的数据量将达到474.6M。这是多么恐怖的数据量！5G标准的速度是10Gbps也就是1.25GB每秒，这是理论的极限速度，现实中每秒能有个125M就已经非常好了，但这，还不能满足标配需求。

所以我们要压缩。Pixel Streaming插件使用了H.264视频压缩技术，根据资料显示，H.264的压缩比率达到了惊人的102:1，474.6M的内容瞬间变成了4.65M，这才让项目有实现的可能性！

除此之外，还有一个重要的因素是，由于网络速度的增加，延时变得越来越小了，这对体验来说是一个巨大的提升。如果你在网页上操作一下，服务器需要3秒钟才给你回应，大概率上，你是无法忍受这种体验的，即便这个网页做的非常精美。

参考资料

Pixel Streaming Overview
Getting Started with Pixel Streaming
Pixel Streaming Reference
Pixel Streaming Demo