前端和UE5交互【互发消息】开箱即用

先来啰嗦一下实现思路，下面有完整代码，开箱即用的那种哦😊

1. 前端通过构造函数，创建UE示例并将挂载到DOM节点上，
2. 通过实例自身的方法addResponseEventListener（接收消息）emitUIInteraction（发送消息）来实现对应功能，

注意：
1、接收消息：需要给UE传一个方法，UE收到后会进行回调并传给前端对应的参数，前端拿到参数后进行JSON解析（因为是JSON字符串，需要用JSON.parse()方法转换成JSON对象），此时就可以干该干的事了
2、发送消息：传递字符串或者对象皆可

前端vue版本和UE版本

1. vue版本使用的是vue2
2. UE版本是UE5.2

使用前需要安装的依赖

npm install @epicgames-ps/lib-pixelstreamingfrontend-ue5.2

npm install @epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.2

此时安装可能需要等一会儿

接下来就是见证奇迹的时刻

直接复制粘贴，改一下UE给你的url就行了

<template>
  <div class="container">
    <div id="webrtcPage"></div>
    <button @click="handleClick"
            class="myButton">点击</button>
  </div>
</template>
	
	<script>
import { Config, PixelStreaming, ControlSchemeType } from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.2';
import { Application, PixelStreamingApplicationStyle, UIElementCreationMode } from '@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.2';
export default {
  name: 'WebrtcVideo',
  data () {
    return {
      stream: null
    }
  },
  mounted () {
    this.initPixelstreaming();
  },
  methods: {
  	//此方法构建UE实例，并把像素流加载到ID为webrtcPage的元素中
    initPixelstreaming () {
      const PixelStreamingApplicationStyles = new PixelStreamingApplicationStyle();
      PixelStreamingApplicationStyles.applyStyleSheet();
      const config = new Config({
        useUrlParams: true,
      });
      config.setTextSetting("ss", "这里写UE提供的公网链接地址");//示例：http://192.168.1.10
      config.setFlagEnabled("AutoConnect", true);
      config.setFlagEnabled("HoveringMouse", ControlSchemeType.HoveringMouse);
      this.stream = new PixelStreaming(config);
      const application = new Application({
        stream: this.stream,
        fullScreenControlsConfig: UIElementCreationMode.Disable,
        settingsPanelConfig: {
          isEnabled: false,
          visibilityButtonConfig: UIElementCreationMode.Disable
        },
        statsPanelConfig: {
          isEnabled: false,
          visibilityButtonConfig: UIElementCreationMode.Disable
        },
        onColorModeChanged: (isLightMode) => PixelStreamingApplicationStyles.setColorMode(isLightMode)
      });
      document.getElementById('webrtcPage').appendChild(application.rootElement);
      //消息接收（因为我的业务是UE场景好了以后直接可以接受消息，所以挂载到DOM节点后直接开始把方法给UE即可，如果业务中需要前端手动触发，则直接把方法移到对应的事件中即可）
      this.stream.addResponseEventListener("handle_responses", this.myHandleResponseFunction);

    },
    //接收消息的方法
    myHandleResponseFunction (response) {
    //这里传给前端的是JSON字符串，需要转换成JSON对象
      console.log('ue5消息接收', JSON.parse(response));
      let res = JSON.parse(response)
    },
    //发送消息方法
    seenInfo () {
	//    这里面其实就是需要发送的消息整理成标准的数据格式，前端和UE自行协商就可以，字符串和JSON对象皆可
      return { 'a': 'ue5前端发送消息测试' };
    },
	//    点击发送消息按钮，如果是进入页面就需要发送直接把这个方法在mounted方法里面调用即可
    handleClick () {
    	//emiUIInteraction方法是UE实例自身的方法，该方法可以发送字符串和JSON对象
      this.stream.emitUIInteraction(this.seenInfo());

    }
  },
  beforeDestroy () {
	  //注意离开页面时需要卸载UE实例
    this.stream.removeResponseEventListener("handle_responses");
  }
};
	</script>
	
	<style scoped>
.container {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.myButton {
  position: absolute;
  top: 100px;
  left: 20px;
  z-index: 99;
}

#webrtcPage {
  width: 100vw;
  height: 100vh;
  min-height: -webkit-fill-available;
  font-family: 'Montserrat';
  margin: 0;
}
</style>