在浏览器上播放虚幻引擎：像素流前端教程

在之前《UE像素流技术：边缘计算与RTC架构》一文中论证了WebRTC的基本原理，以及WebRTC与虚幻引擎结合使用的可行性。之后在《像素流协议》一文中介绍了虚幻引擎基于WebRTC定义的一套像素流协议，这套协议本身又分成2部分：

• 基于DataChannel的二进制格式：用于UE4与前端通讯
• 基于WebSocket的JSON格式：用于UE4与信令服务器通讯

至于前端与信令服务器之间的通讯格式则可以自定义，PixelStreamer包含了2个js文件，分别是前端SDK和信令服务器，分别运行在浏览器和nodejs上，下面看一下它的README.md。

Pixel Streamer

Lightweight PixelStreaming frontend SDK (with signalling channel) for UnrealEngine's PixelStreaming plugin. Culling all dependencies and useless codes from original version.

PixelStreamer是一个轻量级的前端像素流SDK（另赠送信令服务），对接的是虚幻的像素流插件。本项改编自虚幻的原版本，但删除了所有但依赖库和垃圾代码，同时合并成一个JS模块，开箱即用。

Original Version:（原版本有一大堆文件）

https://github.com/EpicGames/UnrealEngine/tree/release/Engine/Source/Programs/PixelStreaming/WebServers/SignallingWebServer

Adapter for IOS:（一些IOS端的设备可能需要向下兼容WebRTC）

https://webrtc.github.io/adapter/adapter-latest.js

demo：

Signalling Server 开启信令服务

npm install ws
node signalling.js playerPort=80 UE4port=8888

UE4 启动插件

// Editor Preferences > Level Editor > Play > Additional Launch Parameters


-RenderOffScreen
-AllowPixelStreamingCommands
-AudioMixer
-PixelStreamingIP=localhost
-PixelStreamingPort=8888

Frontend 前端引入库

import 'PixelStream.js';



const ps = new PixelStream('ws://localhost');


ps.registerMouseHoverEvents();
ps.registerKeyboardEvents();
ps.registerTouchEvents();


ps.addEventListener('connected', e => {
document.body.appendChild(ps.video);
});
ps.addEventListener('message', ({detail}) => {
ps.emitDescriptor('received');
});

Requirement 版本要求

• Chrome
• NodeJS 10+
• Unreal Engine 4+

License：Apache-2.0