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

在之前《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 wsnode 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

本文分享自微信公众号 - WebHub（myWebHub）。
如有侵权，请联系 [email protected] 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。