本站消息
PixelStreaming数据通信
发布于2021-05-30 11:49 阅读(2586) 评论(0) 点赞(15) 收藏(3)
简介
- 使用UE4.26像素流送方案，启动像素流送插件
- UE4编辑器设置中添加运行参数（-AudioMixer -PixelStreamingIP=localhost -PixelStreamingPort=8888）
- 打包后exe快捷方式添加命令行参数（-AudioMixer -RenderOffScreen -PixelStreamingIP=localhost -PixelStreamingPort=8888）
让像素流送系统开始运行后，可能还需要添加 -RenderOffScreen 命令行参数。如果虚幻引擎应用程序窗口意外被最小化，像素流送视频和输入流送将停止工作。-RenderOffScreen 能以headless模式运行应用程序，不带可见窗口，避免意外发生。
3. 复制出引擎目录下的WebServers文件夹
E:\Program Files\Epic Games\UE_4.26\Engine\Source\Programs\PixelStreaming\WebServers
4. 修改WebServers\player.htm内容
5. 运行WebServers\SignallingWebServer\run.bat
6. UE4编辑器独立运行游戏
7. 测试像素流送
H5到UE4通信
H5发送
- emitCommand 可向游戏发送命令的预设列表、更改分辨率、执行控制台命令，或是降低编码器的码率。
//显示fps let descriptor = {ConsoleCommand: 'stat fps'} //重置虚幻引擎程序的渲染分辨率 let descriptor = { Resolution: { Width: 1024, Height: 768 }} //控制媒体流的质量,此值默认为50%.如部署中出现延迟和视频瑕疵，可进一步降低该值 let descriptor = { Encoder: { BitrateReduction: 20 }} - emitUIInteraction 可向游戏发送任意字符串或JavaScript对象。使用此功能将自定义命令从播放器UI处发射，用户可在gameplay逻辑中响应此类命令以在程序中产生所需效果。
//传递单个字符串 emitUIInteraction("MyCustomCommand"); //传递JavaScript对象，emitUIInteraction 函数会在内部将其转换为JSON字符串 let descriptor = { LoadLevel: "/Game/Maps/Level_2" PlayerCharacter: { Name: "Shinbi" Skin: "Dynasty" }} emitUIInteraction(descriptor);
UE4接收
在程序的gameplay逻辑中，使用 Bind Event to OnPixelStreamingInputEvent 节点绑定自定义事件来处理此类输入。
UE4到H5通信
UE4发送
要将事件发射到播放器页面时可使用 Pixel Streaming > Send Pixel Streaming Response 节点。将自定义字符串参数指定到节点，向播放器页面说明发生的事件内容。
H5接收
- JavaScript中编写自定义事件处理器函数，每当页面从虚幻引擎程序接收到响应事件时将调用该函数。
//显示fps function myHandleResponseFunction(data) { console.warn("Response received!");switch (data) { case "MyCustomEvent": ... // handle one type of event case "AnotherEvent": ... // handle another event} } - 调用 app.js 提供的 addResponseEventListener 函数来注册监听器函数。为事件监听器和函数向此函数传递一个独特命名。
addResponseEventListener("handle_responses", myHandleResponseFunction); - 如需移除事件监听器，可调用 removeResponseEventListener 并传递相同命名。
removeResponseEventListener("handle_responses");
案例
<!-- Copyright Epic Games, Inc. All Rights Reserved. -->
<!DOCTYPE HTML>
<html>
<head>
<link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon">
<link rel="icon" type="image/png" sizes="96x96" href="/images/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
<link type="text/css" rel="stylesheet" href="player.css">
<script type="text/javascript" src="scripts/adapter-latest.js"></script>
<script type="text/javascript" src="scripts/webRtcPlayer.js"></script>
<script type="text/javascript" src="scripts/app.js"></script>
<script src="scripts/jquery-1.12.4.min.js"></script>
<style type="text/css">
#overlay_custom{
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px; /* future proofing */
border-bottom-left-radius: 5px; /* future proofing */
-khtml-border-bottom-right-radius: 5px; /* for old Konqueror browsers */
-khtml-border-bottom-left-radius: 5px; /* for old Konqueror browsers */
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
position: absolute;
padding: 4px;
top: 0;
left: 2%;
z-index: 110;
border: 2px solid var(--colour4);
border-top-width: 0px;
}
.overlay_custom {
background-color: var(--colour2);
font-family: var(--buttonFont);
font-weight: lighter;
color: var(--colour4);
}
</style>
</head>
<body onload="load()">
<div id="playerUI">
<div id="player"></div>
<div id="overlay" class="overlay">
<div>
<div id="qualityStatus" class="greyStatus">●</div>
<div id="overlayButton">+</div>
</div>
<div id="overlaySettings">
<div id="KickOthers">
<div class="settings-text">Kick all other players</div>
<label class="btn-overlay">
<input type="button" id="kick-other-players-button" class="overlay-button btn-flat" value="Kick">
</label>
</div>
<div id="FillWindow">
<div class="settings-text">Enlarge Display to Fill Window</div>
<label class="tgl-switch">
<input type="checkbox" id="enlarge-display-to-fill-window-tgl" class="tgl tgl-flat" checked>
<div class="tgl-slider"></div>
</label>
</div>
<div id="QualityControlOwnership">
<div class="settings-text">Quality control ownership</div>
<label class="tgl-switch">
<input type="checkbox" id="quality-control-ownership-tgl" class="tgl tgl-flat">
<div class="tgl-slider"></div>
</label>
</div>
<div id="statsSetting">
<div class="settings-text">Show Stats</div>
<label class="tgl-switch">
<input type="checkbox" id="show-stats-tgl" class="tgl tgl-flat" checked>
<div class="tgl-slider"></div>
</label>
<div id="statsContainer">
<div id="stats"></div>
</div>
</div>
</div>
</div>
<div id="overlay_custom" class="overlay_custom">
<input id="content" type="text" />
<button type="button" onclick="send()">Send to UE4!</button>
</div>
</div>
<script>
inputOptions.controlScheme = ControlSchemeType.HoveringMouse;
<!-- inputOptions.fakeMouseWithTouches = true; -->
function HandleResponse(data) {
let JsonData = JSON.parse(data);
console.log(data);
};
addResponseEventListener("handle_responses", HandleResponse);
function send()
{
let content=document.getElementById("content");
let JsonData = JSON.parse(content.value);
console.log(JsonData);
emitUIInteraction(JsonData);
}
</script>
</body>
</html>
原文链接:https://blog.csdn.net/jxyb2012/article/details/117258823
所属网站分类: 技术文章 > 博客
作者：西小口到了吗
链接：http://www.qianduanheidong.com/blog/article/116068/439747975af3241b12bd/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
15
0
收藏该文
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力
程序员的那些事(new)
电子书(new)
博客(new)
视频教程(new)
问答(new)
游戏(new)