在瀏覽器上播放虛幻引擎：像素流前端教程

在之前《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源創計劃”，歡迎正在閱讀的你也加入，一起分享。