解剖像素流5.0.4源码

Part1前言

和官方臃肿不堪的像素流SDK相比，我们在官方的基础上做了大量的优化和精简，开发出了轻量、零依赖、开箱即用的软件套装，项目持续开发了2年，经受住了大量的压力测试，收获了许多社区文档和用户反馈，完全开源免费。https://github.com/inveta/peer-stream

Part2底层架构：WebRTC

欲将后端 UE5 的画面同步到前端页面上，需要在即时音视频通讯领域寻找相关技术，WebRTC 便是其中实用性最高的一项。WebRTC 解决了浏览器的P2P通讯技术，解决了超清视频压缩的问题，极大地赋能了音视频会议、远程桌面连接、云端三维游戏等诸多领域。基于WebRTC 的像素流技术主要由 3 个网络节点组成，各司其职：

基于像素流的三维可视化技术以图中的 UE5、信令、前端这 3 个节点为主，再辅以 Web、代理、Stun 等可选节点，组成了整个云渲染的底层架构，各节点之间相互配合、监控、认证，为像素流的稳定性提供了全面的保护，各节点的分工如下：

Part3示例：完整的像素流工程

# 安装 WebSocket
npm install ws@8.5.0

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

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

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

Part4signal.js 信令服务器

特性 ●文件只有5KB，gzip压缩后只有3KB。 ●提供http文件服务，和WebSocket共享端口号。 ●面向前端和面向UE5的端口号绑定，通过WebSocket子协议区分。 ●通过环境变量统一传参，支持命令行或配置文件。 ●提供密码认证服务。 ●可以限制最大连接数。 ●支持多个UE5连接。 ●控制台实时打印UE5和前端的多对多映射关系。 ●对WebSocket连接做节流过滤，提高稳定性。 ●支持UE5和前端一一映射。 ●前端连入时，可以自动启动UE5进程。 ●多个UE5连入时，负载均衡。 ●支持stun公网穿透，在公网间互连。 ●控制台可输入调试代码，并打印计算结果。 ●定时发送心跳连接保活。 ●前端的端口号与ID绑定。 ●npm/ws库并入源代码。

Part5.signal.js 环境变量

Part6负载均衡与UE5自启动

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

Part7虚幻引擎

启动插件，并在编辑器中测试:

Plugins > Built-In > Graphics > Pixel Streaming > Enabled
Editor Preferences > Level Editor > Play > Additional Launch Parameters
start path/to/UE5.exe -{key}={value}

常用的启动选项:

 -PixelStreamingURL="ws://localhost:88"
 -RenderOffScreen
 -Unattended
 -GraphicsAdapter=0
 -ForceRes
 -Windowed
 -ResX=1280
 -ResY=720
 -AudioMixer
 -AllowPixelStreamingCommands
 -PixelStreamingEncoderRateControl=VBR

Part8peer-stream.js 前端开发包

原创特性 ●文件18KB，压缩后12KB。 ●基于 Web Components API 组件化video标签。 ●断线自动重连。 ●DOM生命周期绑定：挂载自动连接，卸载自动断开。 ●支持stun公网穿透。 ●全局挂载一份引用方便调试：window.ps。 ●支持5种键盘/鼠标/触屏输入模式。 ●支持3333端口重定向。 ●支持视频自动播放。 ●video标签的id即信令服务器地址，默认指向网页的域名。 ●支持异步请求。（不稳定） ●文件第一行注明版本号。（5.0.4）

Part9引入

纯HTML写法:

<script src="peer-stream.js"></script>
<video is="peer-stream" id="ws://127.0.0.1:88/"></video>

或者使用JavaScript:

<script type="module">
import "peer-stream.js";
ps = document.createElement("video", { is: "peer-stream" });
ps.id = "ws://127.0.0.1:88/";
document.body.append(ps);
</script>

Part10字符串消息收发

发送消息:

// 若传入对象，会被JSON化
ps.emitMessage(msg: string | object);

接收消息:

ps.addEventListener("message", e => {
    // JSON.parse(e.detail)
});

异步请求：

response = await ps.emitMessage(request);
// 返回不稳定

Part11展望

接下来，我们准备兼容苹果IOS端，升级至UE5.1，希望大家帮忙提提PR、问题反馈，一起把像素流SDK维护好。

Part12Inveta团队

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