本文档的主要目的是为了读者能够快捷地了解本软件从虚幻引擎到前端渲染的基本架构。我们的数字大桥利用Autodesk系列软件进行三维建模,再通过虚幻引擎(UE)渲染,最后将视频流通过WebRTC技术实时传输到浏览器前端展示。在UE4中使用PixelStream功能将渲染画面发送至前端页面。
像素流是虚幻引擎利用WebRTC技术将视频流实时传输到浏览器的流程,像素流由3个部分组成:
像素流是WebRTC的一个子集,因为WebRTC包含mesh、sfu、mcu等多种复杂架构,但数字大桥使用的像素流只用到了最简单的p2p架构,即一个虚幻引擎后端向多个浏览器前端传输像素流。3个端的启动方式如下:
信令服务器启动参数 | ||
选项 | 默认值 | 作用 |
player | 88 | 浏览器用户端口 |
unreal | 8888 | 虚幻引擎端口 |
token | insigma | WebSocket认证凭证 |
limit | 4 | 最大用户数量 |
虚幻引擎启动参数 | ||
选项 | 类型 | 作用 |
ForceRes | void | 强制分辨率,结合ResX和ResY使用 |
AudioMixer | void | 允许传输音频 |
RenderOffScreen | void | 后台运行 |
graphicsadapter | 自然数 | 选择GPU |
AllowPixelStreamingCommands | void | 允许调试像素流 |
PixelStreamingEncoderRateControl | 枚举{CBR, VBR} | 常码率或可变码率 |
PixelStreamingURL | 字符串 | 信令服务器URL |
前端启动的2种方式 | |
JavaScript | import "PixelStream.js";const ps = document.createElement("video", { is: "pixel-stream" });ps.setAttribute("signal", "ws://127.0.0.1:88/insigma");document.body.appendChild(ps); |
HTML | <script src="PixelStream.js"></script><video is="pixel-stream" signal="ws://127.0.0.1:88/insigma"></video> |
免责声明:本文系网络转载或改编,未找到原创作者,版权归原作者所有。如涉及版权,请联系删