https://xosg.github.io/PixelStreamer/ PixelStreamer官方中文README.md
和 EpicGames 官方的像素流 SDK 相比,我们开发出了更轻量的像素流 SDK,包含 2 个文件:前端组件(WebComponents API)外加信令服务器(NodeJS)。
首先从 npm 安装 WebSocket 依赖,然后启动 signal.js。
npm install ws@8.2.3
node signal.js {key}={value}
启动选项:
选项 | 默认值 | 作用 |
---|---|---|
player | 88 | 浏览器(玩家)端口 |
unreal | 8888 | UE4 端口 |
token | insigma | 信令密码 |
limit | 4 | 玩家数量上限 |
首先开启像素流插件,然后在独立启动模式的设置中,或者打包后的文件中输入启动选项。
Plugins > Built-In > Graphics > Pixel Streaming > Enabled
Editor Preferences > Level Editor > Play > Additional Launch Parameters
start packaged.exe -{key}={value}
常用的启动选项:
-ForceRes
-ResX=1920
-ResY=1080
-AudioMixer
-RenderOffScreen
-graphicsadapter=0
-AllowPixelStreamingCommands
-PixelStreamingEncoderRateControl=VBR
-PixelStreamingURL="ws://localhost:8888"
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);
or HTML:
<script src="PixelStream.js"></script>
<video is="pixel-stream" signal="ws://127.0.0.1:88/insigma"></video>
信令服务器可以通过 eval 函数解释执行任意的 NodeJS 代码,使用时需要注意安全。
ps.debug('PLAYER.clients.size') // 显示玩家数量
ps.debug('PLAYER.clients.forEach(p=>p.playerId!==playerId&&p.close(1011,"Infinity"));limit=1;') // 移除其他玩家
ps.debug('[...PLAYER.clients].map(x=>x.req.socket.remoteAddress)') // 每个玩家的IP地址
ps.debug('playerId') // 我的ID
ps.addEventListener('mouseenter',_=>{ps.focus();ps.requestPointerLock()}) // 鼠标锁
ps.style.pointerEvents='none' // 只读的<video>
为了屏蔽我们的开发环境,需要对 JS 文件进行丑化,删除关键字,替换变量名。
npm install uglify-js -g
uglifyjs PixelStream.js > ps.min.js
uglifyjs signal.js > signal.min.js