前端和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.2npm 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>