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端编写调用代码

   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派发的消息

   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 像素流送