UE像素流送和网页通讯实现指南

介绍

UE像素流送和网页通讯实现指南

Unreal Engine实现像素流送和Web端通讯的方法,使用了WebRTC技术 (Web Real-Time Communication) 。WebRTC是一种实时通信技术,它允许网络应用或站点,在不需要中间人的情况下,建立浏览器间点对点(Peer-to-Peer)的连接,进行视频和音频或者其他种类的数据传输。

UE像素流送和网页通讯实现指南

本文主要介绍了从Web端调用UE4,到UE4派发消息给Web端的操作过程,实现了在UE和Web端输出log的简单示例,最终效果如下图。在后文你可以学到说明如何在UE4内容浏览器中创建蓝图类,以及如何在Web端编写调用代码,也探讨了如何在UE4中创建自定义事件,派发消息给Web端。

UE像素流送和网页通讯实现指南

准备工作

  1. 首先需要把UE工程打包成像素流送服务包,具体步骤先前已经介绍过了,可以回顾这里

  2. 打包成功,生成WindowsNoEditor后我们可以在以下目录找到web端相关的文件。修改config.js钟的”HomepageFile”可以修改入口页面,我们可以在这个页面的基础上增加一个两端通讯的逻辑代码

    WindowsNoEditor\Engine\Source\Programs\PixelStreaming\WebServers\SignallingWebServer

  3. 建议把HomepageFile的默认值”player.htm”改为其他页面,页面依赖的./scriptsapp.js路径也一同修改,避免每次打包后这两个文件会被覆盖

Web端中调用UE

  1. 在UE内容浏览器中,创建继承自Actor的蓝图类BP_PixelStreamingInputActor,编辑时给它添加一个PixelStreamerInput组件。
    UE像素流送和网页通讯实现指南

  2. 给它编写逻辑用于接收web端的调用通知,如下图所示,Descriptor可以获取到Web端emitUIInteraction(“MyCustomCommand”); 传递的参数值“MyCustomCommand”
    UE像素流送和网页通讯实现指南

  3. 将BP_PixelStreamingInputActor拖拽到关卡场景中

  4. 在Web端编写调用代码

    const btn1 = document.getElementById('callUE1')
    btn1.onclick = function(){
    		emitUIInteraction("MyCustomCommand");		
    }
    
  5. 此时UE蓝图会收到消息,消息内容可以在Descriptor获取,场景内会打印字符串 “收到JS调用通知”

  6. emitUIInteraction 方法的参数是字符串,如果需要传递更多参数,则可以通过将JSON对象字符串化的方法传递,在UE蓝图中再使用GetJsonStringValue解析数据

    UE像素流送和网页通讯实现指南

    UE像素流送和网页通讯实现指南

Web端监听UE消息

基础操作

  1. 在BP_PixelStreamingInputActor中编写自定义事件,如下图所示,执行UECallJS时它会对Web端发送一条消息,消息内容为一个随机整数
    UE像素流送和网页通讯实现指南

  2. 此时我们在关卡蓝图中,通过点击键盘触发事件即可将消息派发给Web端
    UE像素流送和网页通讯实现指南

  3. Web端编写以下代码,即可收到UE派发的消息

    function initListener(){
    	addResponseEventListener("UECallJS", myHandleResponseFunction);
    }
    function myHandleResponseFunction(data){
    	// debugger
    	console.warn("Response received!");
    	console.warn(`UE中点击了物体, 产生随机数${data}`)
        
    }
    

进阶操作

如果希望通过UE场景的物体交互触发派送,比如鼠标点击某个对象则web端可以收到消息,则需要在对象中先将事件派发出去,并在关卡蓝图捕获事件。

  1. 保留基础操作中web端的所有代码

  2. 创建蓝图类BP_Actor,基本构成如下,mesh和mesh-outline为主体和描边,Box为光标碰撞的体积范围
    UE像素流送和网页通讯实现指南

  3. 给box添加点击事件,如下图所示Actor内部编写事件派发器
    UE像素流送和网页通讯实现指南

  4. 将BP_Actor拖拽到关卡场景中,为方便测试可以多放置几个
    UE像素流送和网页通讯实现指南

  5. 关卡蓝图中监听事件,捕获到事件后执行 UECallJS,将消息派发给web
    UE像素流送和网页通讯实现指南

相关链接

在UE中加载html

UE像素流送逻辑图.pptx

UE4 PixelStreaming与UE4之间的通讯笔记

UE4 像素流UE与JS互相通信

VUE与UE5 像素流送

原文链接:https://juejin.cn/post/7337854138514735130 作者:gyratesky

(0)
上一篇 2024年2月21日 下午4:26
下一篇 2024年2月21日 下午4:36

相关推荐

发表回复

登录后才能评论