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

介绍

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

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

准备工作

  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组件。

  2. 给它编写逻辑用于接收web端的调用通知,如下图所示,Descriptor可以获取到Web端emitUIInteraction("MyCustomCommand"); 传递的参数值"MyCustomCommand"

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

  4. 在Web端编写调用代码

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

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

Web端监听UE消息

基础操作

  1. 在BP_PixelStreamingInputActor中编写自定义事件,如下图所示,执行UECallJS时它会对Web端发送一条消息,消息内容为一个随机整数

  2. 此时我们在关卡蓝图中,通过点击键盘触发事件即可将消息派发给Web端

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

    jsx 复制代码
    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为光标碰撞的体积范围

  3. 给box添加点击事件,如下图所示Actor内部编写事件派发器

  4. 将BP_Actor拖拽到关卡场景中,为方便测试可以多放置几个

  5. 关卡蓝图中监听事件,捕获到事件后执行 UECallJS,将消息派发给web

相关链接

在UE中加载html

UE像素流送逻辑图.pptx

UE4 PixelStreaming与UE4之间的通讯笔记

UE4 像素流UE与JS互相通信

VUE与UE5 像素流送

相关推荐
GISer_Jing3 分钟前
前端面试常考题目详解
前端·javascript
Boilermaker19921 小时前
【Java EE】SpringIoC
前端·数据库·spring
中微子1 小时前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
天天向上10241 小时前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y2 小时前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁2 小时前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry2 小时前
Fetch 笔记
前端·javascript
拾光拾趣录2 小时前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟2 小时前
vue3,你看setup设计详解,也是个人才
前端
Lefan2 小时前
一文了解什么是Dart
前端·flutter·dart