使用像素流送技术实现3D场景像素流送简单来说就是云端运行应用，终端发送操作指令，运行结果以视频流的形式由“云端”传送到“

1 介绍

像素流送简单来说，就是云端运行应用，终端发送操作指令，运行结果以视频流的形式由“云端”传送到“终端”。

目前国内像素流送的应用普遍在这些领域：数字孪生区域模型展示，提供更加细腻的效果；国内云游戏平台，低配设备，无需安装即可在线玩高成本高体量高质量的3A大作；房地产行业。

1.1 优势

1.摆脱对终端的性能依赖，仅需要一台支持html5浏览器的设备即可接入，降低用户到参与成本

2.跨平台、跨终端，用户可以在不同的终端体验到高配置要求的多媒体内容

3.内容更新迭代无需终端操作，内容同步便捷

4.一套代码，适用多个终端，降低开发成本

5.终端仅做呈现和交互行为采集，内容的安全问题得到保障

1.2 劣势

1.交互行为可能会因网络或服务器的配置有所延迟，正常情况下延迟会在120-180ms

2.服务端需要处理大量请求，对服务端性能有较大的依赖

3.最终呈现在客户端的画质，与分辨率、码率、帧率息息相关，还是对服务端和网络的挑战

2 单实例局域网像素流送

如上图所示，我们可以看到原理图很简单，部署好信令和web服务器，再启动游戏实例，实例会将画面通过websocket不断推送到服务器中，使用PC端或移动端浏览器访问服务端地址即可查看到游戏画面，手动发出操作指令。

2.1 软件版本

版本4.26

Chrome 90+

node 14+

2.2 打包游戏

1.安装UE4.26版本

2.启用引擎Pixel Streaming插件，并重启

Untitled 1.png

3.在项目设置”输入“中勾选固定显示触控界面（这不是必须的）

Untitled 2.png

4.在项目偏好设置中找到”播放-在独立进程游戏中运行-额外启动参数“，

将其值设置为 -AudioMixer -PixelStreamingIP=localhost -PixelStreamingPort=8888。

Untitled 3.png

5.打包

Untitled 4.png

2.3 部署环境

\WindowsNoEditor\Engine\Source\Programs\PixelStreaming\WebServers\SignallingWebServer

由于信令服务是node实现，第一次启动run.bat 安装依赖包，会自动生成config.json 关掉run.bat, 开始修改 config.json

{
	"UseFrontend": false,
	"UseMatchmaker": false,
	"UseHTTPS": false,
	"UseAuthentication": false,
	"LogToFile": true,
	"HomepageFile": "player.htm",
	"AdditionalRoutes": {},
	"EnableWebserver": true, //是否启动服务
	"peerConnectionOptions": "{\\"offerExtmapAllowMixed\\": false}",
	"streamerPort": 8888,
	"httpPort": 80,
	"publicIp": "localhost"
}

2.启动信令服务器运行 run.bat

3.启动游戏实例，为方便操作，编写了一个批处理文件 instance.bat，如下所示增加了后缀命令，意思是指定了推流地址和端口，后台运行，且打印运行日志

@echo off
start runner.exe -PixelStreamingIP=localhost -PixelStreamingPort=8888  -log -RenderOffScreen

4.在终端浏览，目前部署的是单实例的服务，PC端和移动端具有相同的操作和查看权限。

3 多实例局域网像素流送

Untitled 5.png

多实例就是实现每个用户对游戏的单独操作控制。每个用户拥有1个独立的程序，需要多开UE4程序和信令服务，所有用户访问同一个地址，由matchmaker服务器依次分配没有被占用的UE程序。

部署环境

这里以2个实例为例，一个实例对应1个UE进程+1个信令服务器；那么2个实例需要开启2个UE进程+2个信令服务器，1个matchmaker服务器作分发。

直接拷贝打包游戏生成的目录 WindowsNoEditor，命名为WindowsNoEditor2
配置每个实例的启动命令

@echo off
start runner.exe -PixelStreamingIP=localhost -PixelStreamingPort=7001  -log -RenderOffScreen

配置每个实例对应的信令服务，方式与单实例局域网像素流送类似，修改config.js。注意每行增加了注释的指令

	"UseFrontend": false,
	"UseMatchmaker": true, // 使用matchmaker作为分发器
	"UseHTTPS": false,
	"UseAuthentication": false,
	"LogToFile": true,
	"HomepageFile": "player.htm",
	"AdditionalRoutes": {},
	"EnableWebserver": true, 
	"streamerPort": 7001, //信令服务端口
	"httpPort": 71, //页面访问端口
	"publicIp": "127.0.0.1",
	"MatchmakerAddress": "192.168.0.70", // matchmaker服务地址
  "MatchmakerPort:" "7000",  // matchmaker服务端口

配置matchmaker服务，打开目录WindowsNoEditor\Engine\Source\Programs\PixelStreaming\WebServers\Matchmaker

安装依赖后会生成config.js，调整配置

"HttpPort": 70, // 终端访问端口
"MatchmakerPort":  7000, //推流端口
"UserHTTPS": false,
"LogToFile": true

启动matchmarker，信令服务和实例，大概就可以了。广域网的像素流送和其他更详细的步骤看一看下面这个教程

zhuanlan.zhihu.com/p/76406905

常见异常排查

1.Rtc播放器报错

如果在chrome浏览器出现以下错误则需要调整文件WebServers\SignallingWebServer\scripts\webRtcPlayer.js

 offer.sdp = offer.sdp.replace(/(a=fmtp:\d+ .*level-asymmetry-allowed=.*)\r\n/gm, "$1;x-google-start-bitrate=10000;x-google-max-bitrate=20000\\r\\n");
offer.sdp = offer.sdp.replace(/(a=extmap-allow-mixed)\r\n/gm, ""); // 增加这一行
self.onWebRtcOffer(offer);

2.websocket连结失败

启动游戏实例时如果出现类似以下的错误，则需要检查端口是否被正在运行着的VPN劫持，将无关的VPN关闭 Untitled 6.png

LogPixelStreamingSS: Connecting to SS ws://localhost:8888

后缀命令说明

-AudioMixed

将声音加入像素流送中

-AllowPixelStreamingCommands

允许用emitcommand发送 UE4控制台命令

-PixelStreamingIP=localhost

像素流送IP地址

-PixelStreamingPort=8888

像素流送端口

-RenderOffScreen

在后台运行游戏程序实例

-log

运行游戏程序实例过程中打印log

-NvEncH264ConfigLevel=NV_ENC_LEVEL_H264_52

高分辨率必须添加本参数，否则会报nv错误

-ResX=1920 -ResY=1080

设定分辨率

使用像素流送技术实现3D场景