强者来袭:UE5像素流peer-stream Stars数量突破三位数

Part1前言

peer-stream是inveta团队开源的UE5像素流组件,与EpicGame为像素流设计的SDK相比,peer-stream.js是一个轻量级的WebRTC库,具有0依赖性,包含前端组件(使用WebComponents API)和信令服务器(使用NodeJS)。
peer-stream.js:用于播放器的浏览器SDK。
signal.js:node.js信令服务器。
.signal.js:带有env变量的signal.js。
test.html:浏览器网页。
开源地址 https://github.com/inveta/peer-stream

Part2stars

在大家的支持下,peer-stream的github的stars数量成功突破三位数。

强者来袭:UE5像素流peer-stream Stars数量突破三位数_第1张图片

和官方臃肿不堪的像素流SDK相比,我们开发出了轻量、零依赖、开箱即用的软件套装,前端的peer-stream.js基于WebComponentsAPI,后端signal.js基于NodeJS和npm/ws。

使用方法

# 安装 WebSocket
npm install [email protected]

# 启动信令服务器
PORT=88 node signal.js

# 启动 UE5
start path/to/UE5.exe -PixelStreamingURL="ws://localhost:88"

# 打开测试网页
start http://localhost:88/test.html

signal.js在官方库的基础上做了大量优化

1、文件只有5KB,压缩后只有3KB。
2、提供http文件服务,和WebSocket共享端口号。
3、面向前端和面向UE5的端口号绑定,通过WebSocket子协议区分。
4、通过环境变量统一传参。
5、提供密码认证服务。
6、可以限制最大连接数。
7、支持多个UE5连接。
8、控制台实时打印UE5和前端的多对多映射关系。
9、对WebSocket连接做节流过滤,提高稳定性。
10、支持UE5和前端一一映射。
11、前端连入时,可以自动启动UE5进程。
12、多个UE5连入时,负载均衡。
13、支持stun公网穿透,在公网间互连。
14、控制台可输入调试代码,并打印计算结果。
15、定时发送心跳连接保活。
16、前端的端口号与ID绑定。

signal.js 既支持多个前端连接,也支持多个UE5连接,此时前端和UE5的多对多映射关系是均衡负载的:前端会被引向最空闲的UE5进程。若想要限制一一映射关系,开启one2one 环境变量。最好提供 UE5_* 自启动命令行,更多实例参考 .signal.js。流程图如下:

强者来袭:UE5像素流peer-stream Stars数量突破三位数_第2张图片

peer-stream.js 前端开发包

1、文件18KB,压缩后12KB。
2、基于 Web Components API 组件化video标签。
3、断线自动重连。
4、DOM生命周期绑定:挂载自动连接,卸载自动断开。
5、支持stun公网穿透。
6、全局挂载一份引用方便调试:window.ps。
7、支持5种键盘/鼠标/触屏输入模式。
8、支持3333端口重定向。
9、支持视频自动播放。
10、video标签的id即信令服务器地址,默认指向网页的域名。

Part3给epic提交建议被采纳

最近团队给UE5提交了一个关于像素流的建议,目前已经被官方采纳。

强者来袭:UE5像素流peer-stream Stars数量突破三位数_第3张图片

Part4总结

本文主要对inveta团队开源的UE5像素流组件进行了简单介绍。

Part5Inveta团队

Inveta团队由研发、美术设计、建模等组成。团队介绍:
https://www.inveta.cn/about.html
团队开源项目:
https://github.com/inveta

你可能感兴趣的:(ue5,前端,javascript,websocket,开发语言)