总览
利用像素流送可以在用户不可见的电脑上远程运行虚幻引擎应用程序。举例而言,这台电脑可以是机构中的一台实体电脑,也可以是云端服务提供的虚拟机。虚幻引擎将使用该电脑可用的资源(CPU、GPU、内存等)来运行游戏逻辑并渲染每一帧,并不断将此渲染输出编码到一个媒体流送中,再通过一个轻量级的网页服务堆栈进行传递,用户即可在其他电脑和移动设备上运行的标准网页浏览器中查看直播流送。
对于用户而言,这种体验就像是在YouTube或Netflix上观看视频流送,但有2点例外:
-
流送并非播放预先录制的视频片段,而是播放虚幻引擎实时生成的渲染帧和音频。
-
用户可通过自己的浏览器对体验进行控制,将键盘、鼠标、触摸事件和播放器网页发出的自定义事件发送回虚幻引擎。
组件
-
像素流送插件 - 此插件在虚幻引擎中运行。其使用H.264视频压缩对每个渲染帧的最终结果进行编码,将这些视频帧随游戏音频一同打包到媒体流送中,并通过直接点对点连接将该流送发送到一个或多个连线的浏览器上。
-
信令和Web服务器- 信令和Web服务器负责交涉浏览器和像素流送插件之间的连接,将播放媒体流送的HTML和JavaScript环境提供给浏览器。
连接进程
-
启动所有像素流送组件时,在虚幻引擎中运行的像素流送插件首先将建立到信令和Web服务器的链接。
-
客户端会连接到信令服务器,服务器将对客户端提供一个HTML页面,其中包含播放器控件和以JavaScript编写的控制代码。
-
用户开始流送时,信令服务器将进行交涉,在客户端浏览器和虚幻引擎之间建立直接连接。
-
客户端和虚幻引擎之间的连接建立后,像素流送插件便会直接开始将媒体流送到浏览器。来自客户端的输入由播放器页面的JavaScript环境直接发送回虚幻引擎中。
-
即使媒体流送已经开始播放,信令和Web服务器仍会维持其与浏览器和虚幻引擎的连接,以便在必要时将用户从流送中移除,并处理浏览器造成的连接断开。
模式
(1)单实例 - 配对时的单个完整堆栈
(2)多实例 - 配对时的多个完整堆栈
有时需要所有用户能拥有各自的交互体验,而非将每个用户都连接到同一流送中。要进行此操作,可为每个用户单独运行他们的像素流送组件的堆栈,并为每个用户单独指定信令和Web服务器,以便开始连接。
可在不同主机上设置像素流送组件的每个堆栈,或在相同主机上放置多个堆栈(前提是在每个堆栈中配置组件的端口设置,以便其可通过不同端口进行通信)。
如希望在同一电脑上使用像素流送来运行多个虚幻引擎实例,须注意NVIDIA GeForce系列等诸多应用级显卡一次最多只能运行2个编码器。Quadro和Tesla等专业级显卡则无此类限制。
要进行此类配置的设置,像素流送系统可使用配对服务器(Matchmaker)来追踪可用的信令和Web服务器(SignallingWebServer),以及它们是否被客户端连接所使用。
各个客户端首先与配对服务器连接,而非需要与自身信令和Web服务器URL连接。配对服务器负责将所有请求程序重新指定到各自信令和Web服务器,以便在客户端与其自身UE4应用间构建对等网络连接。一旦激活连接,配对服务器不再会将任何新的浏览器连接重新定向至相同信令和Web服务器。 默认情况下,服务器会在端口 90 上聆听来自客户端的HTTP连接,而在端口 9999 上聆听来自信令和Web服务器的连接。
自定义前端播放页面
(1)自定义HTML播放器页面必须满足以下部分最低要求:
-
必须包括
/scripts/webRtcPlayer.js
文件。该文件处理浏览器和虚幻引擎应用间的通信,接受并显示来自服务器的媒体流。在非必要的情况下,请勿修改此JavaScript文件。<script type="text/javascript" src="scripts/webRtcPlayer.js"></script>
-
强烈推荐将 /scripts/app.js 文件也包含在内。此文件将设置处理键盘、鼠标和触摸事件的事件监听器。如了解部分JavaScript知识,敬请研究此文件的代码,修改其默认行为以满足需要。举例而言,如要禁用键盘输入但保持鼠标和触摸事件的正常运行,需寻找处理键盘事件的代码并对其进行注解,以自定义该文件。
<script type="text/javascript" src="scripts/app.js"></script>
-
页面必须含有一个ID为
player
的div
元素。该元素可被流送自UE4应用的视频帧所替换。<div id="player"></div>
-
页面加载时必须调用
app.js
文件提供的load
函数。举例而言,通过向<body>
标签添加一项onload
处理器,即可进行此操作:<body onload="load()">
(2)播放器文件位置和URL
-
可在信号和网络服务器的根目录中创建一个命名为
custom_html
的文件夹,然后将自定义HTML播放器页面放入该文件夹。将其文件名附加至运行信号和网络服务器的电脑IP地址或主机名,便可对其进行访问。
举例而言,命名为custom_html/myplayerpage.html
的文件在http://127.0.0.1/myplayerpage.html
处可进行访问。 -
可自定义信号和网络服务器的
HomepageFile
参数,并将路径设置为与信号和网络服务器根目录相关的自定义HTML播放器的文件名。访问运行信号和网络服务器的电脑IP地址或主机名时,便可对其进行访问。
举例而言,如将文件保存至Engine/Source/Programs/PixelStreaming/WebServers/SignallingWebServer/myfolder/myplayerpage.html
,并将HomepageFile
参数设置为myfolder/myplayerpage.html
,无需在URL:http://127.0.0.1/
中提供文件名便可访问页面。 -
同时可使用信号和网络服务器的 AdditionalRoutes 参数来自定义URL路径和电脑本地文件夹间的映射。
禁用用户输入
可以针对不同用户自定义是否采用禁用,以达到操作权限控制的效果。
在JavaScript环境中使用空白实现覆盖播放器页面的以下函数:
-
registerHoveringMouseEvents - 把inputOptions.controlScheme设为ControlSchemeType.HoveringMouse时,将禁用所有输入鼠标事件。
-
registerLockedMouseEvents - 把inputOptions.controlScheme设为ControlSchemeType.LockedMouse时,将禁用所有输入鼠标事件。
-
registerTouchEvents - 禁用移动设备和平板电脑上的触摸事件。
-
registerKeyboardEvents - 禁用所有键盘事件。
举例而言,可在播放器HTML页面中包含此JavaScript组以禁用所有输入。如上所述,加载 app.js
文件后,需要运行此代码,但应在调用其 load
函数前进行此操作。
<script>
registerHoveringMouseEvents = function() {}
registerLockedMouseEvents = function() {}
registerTouchEvents = function() {}
registerKeyboardEvents = function() {}
</script>
要将一个或多个输入类型保持为启用,则将要保持的输入类型所对应的行进行注解,或将该行删除。
参考
https://docs.unrealengine.com/4.26/zh-CN/SharingAndReleasing/PixelStreaming