PixelStreaming数据通信

发布于2021-05-30 11:49 阅读(2418) 评论(0) 点赞(15) 收藏(3)

PixelStreaming数据通信

简介
H5到UE4通信
- H5发送
- UE4接收
UE4到H5通信
- UE4发送
- H5接收
案例

简介

使用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">&#9679</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

window属性：controllers

2022年最受欢迎的8大编程语言

为什么都说程序员找不到女朋友，但是身边程序猿的却没一个单身的

30岁以上你还死磕技术，别说拿高薪，可能你连饭碗都会保不住

程序员被开除，老板：“有你参与的项目全黄了！”

笑话：一个测试工程师走进一家酒吧

趣图：程序员头疼的4种原因

笑话：面试官：请拿出一段体现你水平的代码。我： sudo rm -rf /*面试官：这体现了你哪方面能力？

网友说：做开发，不被领导喜欢怎么办？

前端精选：在 WPF 中实现融合效果

所属网站分类: 技术文章 > 博客