f0dffa0027a75aad14762d778b853448.png


本文档的主要目的是为了读者能够快捷地了解本软件从虚幻引擎到前端渲染的基本架构。我们的数字大桥利用Autodesk系列软件进行三维建模,再通过虚幻引擎(UE)渲染,最后将视频流通过WebRTC技术实时传输到浏览器前端展示。在UE4中使用PixelStream功能将渲染画面发送至前端页面。

f9b74fd5e93d3f267608c6a1e0f06d83.png

像素流与WebRTC

像素流是虚幻引擎利用WebRTC技术将视频流实时传输到浏览器的流程,像素流由3个部分组成:

  • 发送方:虚幻引擎后端的像素流官方插件,用于发送实时视频流

  • 中间方:用NodeJS启动的信令服务器,用于在发送方和接收方之间转发信令,协助建立P2P

  • 接收方:浏览器前端用JavaScript调用WebRTC的功能,接受视频流

像素流是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>

Logo

永洪科技,致力于打造全球领先的数据技术厂商,具备从数据应用方案咨询、BI、AIGC智能分析、数字孪生、数据资产、数据治理、数据实施的端到端大数据价值服务能力。

更多推荐