本站消息

站长简介/公众号


站长简介:高级软件工程师,曾在阿里云,每日优鲜从事全栈开发工作,利用周末时间开发出本站,欢迎关注我的微信公众号:程序员总部,程序员的家,探索程序员的人生之路!分享IT最新技术,关注行业最新动向,让你永不落伍。了解同行们的工资,生活工作中的酸甜苦辣,谋求程序员的最终出路!

 价值13000svip视频教程,前端大神匠心打造,零基础前端开发工程师视频教程全套,基础+进阶+项目实战,包含课件和源码

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2021-05(13)

2021-06(81)

2021-07(13)

2021-08(62)

2021-09(66)

PixelStreaming数据通信

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


简介

  1. 使用UE4.26像素流送方案,启动像素流送插件
    在这里插入图片描述
  2. 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发送

  1. emitCommand 可向游戏发送命令的预设列表、更改分辨率、执行控制台命令,或是降低编码器的码率。
    //显示fps
    let descriptor = {ConsoleCommand: 'stat fps'}
    
    //重置虚幻引擎程序的渲染分辨率
    let descriptor = {
    Resolution: {
    	Width: 1024,
    	Height: 768
    }}
    
    //控制媒体流的质量,此值默认为50%.如部署中出现延迟和视频瑕疵,可进一步降低该值
    let descriptor = {
    Encoder: {
    	BitrateReduction: 20
    }}
    
  2. 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接收

  1. JavaScript中编写自定义事件处理器函数,每当页面从虚幻引擎程序接收到响应事件时将调用该函数。
    //显示fps
    function myHandleResponseFunction(data) {
    console.warn("Response received!");switch (data) {
          case "MyCustomEvent":
            ... // handle one type of event
          case "AnotherEvent":
            ... // handle another event}
    }
    
  2. 调用 app.js 提供的 addResponseEventListener 函数来注册监听器函数。为事件监听器和函数向此函数传递一个独特命名。
    	addResponseEventListener("handle_responses", myHandleResponseFunction);
    
  3. 如需移除事件监听器,可调用 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




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

作者:西小口到了吗

链接:http://www.qianduanheidong.com/blog/article/116068/439747975af3241b12bd/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

15 0
收藏该文
已收藏

评论内容:(最多支持255个字符)