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

前端和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';exportdefault{name:'WebrtcVideo',data(){return{stream:null}},mounted(){this.initPixelstreaming();},methods:{//此方法构建UE实例，并把像素流加载到ID为webrtcPage的元素中initPixelstreaming(){const PixelStreamingApplicationStyles =newPixelStreamingApplicationStyle();
      PixelStreamingApplicationStyles.applyStyleSheet();const config =newConfig({useUrlParams:true,});
      config.setTextSetting("ss","这里写UE提供的公网链接地址");//示例：http://192.168.1.10
      config.setFlagEnabled("AutoConnect",true);
      config.setFlagEnabled("HoveringMouse", ControlSchemeType.HoveringMouse);this.stream =newPixelStreaming(config);const application =newApplication({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>