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

前端和UE5交互【互发消息】

先来啰嗦一下实现思路，下面有完整代码，开箱即用的那种哦?前端vue版本和UE版本使用前需要安装的依赖接下来就是见证奇迹的时刻

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

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

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

前端vue版本和UE版本

vue版本使用的是vue2UE版本是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>