介绍
Unreal Engine实现像素流送和Web端通讯的方法,使用了WebRTC技术 (Web Real-Time Communication) 。WebRTC是一种实时通信技术,它允许网络应用或站点,在不需要中间人的情况下,建立浏览器间点对点(Peer-to-Peer)的连接,进行视频和音频或者其他种类的数据传输。
本文主要介绍了从Web端调用UE4,到UE4派发消息给Web端的操作过程,实现了在UE和Web端输出log的简单示例,最终效果如下图。在后文你可以学到说明如何在UE4内容浏览器中创建蓝图类,以及如何在Web端编写调用代码,也探讨了如何在UE4中创建自定义事件,派发消息给Web端。
准备工作
-
首先需要把UE工程打包成像素流送服务包,具体步骤先前已经介绍过了,可以回顾这里
-
打包成功,生成WindowsNoEditor后我们可以在以下目录找到web端相关的文件。修改config.js钟的”HomepageFile”可以修改入口页面,我们可以在这个页面的基础上增加一个两端通讯的逻辑代码
WindowsNoEditor\Engine\Source\Programs\PixelStreaming\WebServers\SignallingWebServer
-
建议把HomepageFile的默认值”player.htm”改为其他页面,页面依赖的./scriptsapp.js路径也一同修改,避免每次打包后这两个文件会被覆盖
Web端中调用UE
-
在UE内容浏览器中,创建继承自Actor的蓝图类BP_PixelStreamingInputActor,编辑时给它添加一个PixelStreamerInput组件。
-
给它编写逻辑用于接收web端的调用通知,如下图所示,Descriptor可以获取到Web端emitUIInteraction(“MyCustomCommand”); 传递的参数值“MyCustomCommand”
-
将BP_PixelStreamingInputActor拖拽到关卡场景中
-
在Web端编写调用代码
const btn1 = document.getElementById('callUE1') btn1.onclick = function(){ emitUIInteraction("MyCustomCommand"); }
-
此时UE蓝图会收到消息,消息内容可以在Descriptor获取,场景内会打印字符串 “收到JS调用通知”
-
emitUIInteraction 方法的参数是字符串,如果需要传递更多参数,则可以通过将JSON对象字符串化的方法传递,在UE蓝图中再使用GetJsonStringValue解析数据
Web端监听UE消息
基础操作
-
在BP_PixelStreamingInputActor中编写自定义事件,如下图所示,执行UECallJS时它会对Web端发送一条消息,消息内容为一个随机整数
-
此时我们在关卡蓝图中,通过点击键盘触发事件即可将消息派发给Web端
-
Web端编写以下代码,即可收到UE派发的消息
function initListener(){ addResponseEventListener("UECallJS", myHandleResponseFunction); } function myHandleResponseFunction(data){ // debugger console.warn("Response received!"); console.warn(`UE中点击了物体, 产生随机数${data}`) }
进阶操作
如果希望通过UE场景的物体交互触发派送,比如鼠标点击某个对象则web端可以收到消息,则需要在对象中先将事件派发出去,并在关卡蓝图捕获事件。
-
保留基础操作中web端的所有代码
-
创建蓝图类BP_Actor,基本构成如下,mesh和mesh-outline为主体和描边,Box为光标碰撞的体积范围
-
给box添加点击事件,如下图所示Actor内部编写事件派发器
-
将BP_Actor拖拽到关卡场景中,为方便测试可以多放置几个
-
关卡蓝图中监听事件,捕获到事件后执行 UECallJS,将消息派发给web
相关链接
原文链接:https://juejin.cn/post/7337854138514735130 作者:gyratesky