位置: IT常识 - 正文

Vue3 + UE4+ 像素流 + 交互 的开发构建流程(ue4 像素流并发)

编辑:rootadmin
Vue3 + UE4+ 像素流 + 交互 的开发构建流程 Vue3 + UE4+ 像素流 + 交互 的开发构建流程一、像素流1、将对应 UE 4.27 版本的 webRtcPlayer.js 复制到项目的 public/ue 文件夹下(作为静态资源)

推荐整理分享Vue3 + UE4+ 像素流 + 交互 的开发构建流程(ue4 像素流并发),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:ue4uv缩放,ue4清晰度,ue4 画质,ue4清晰度,ue4 像素流并发,ue4 像素流并发,ue4 像素流并发,ue4 像素流并发,内容如对您有帮助,希望把文章链接给更多的朋友!

2、根目录下的 index.html 中引入 ue/webRtcPlayer.js

index.html 中引入 webRtcPlayer.js

3、将对应 UE 4.27 版本的 app.js 复制到项目的 main.ts 同级目录下,可以改名为 ueapp.js

4、修改 ueapp.js 中的内容,用于解决开发中的报错问题1、新增导出(webrtc 对象可以将 ueapp.js 中定义的 function 都导出,这里只初步导出了五个函数/对象)

这里目前只初步导出了 ueapp.js 中的 load、resizePlayerStyle、emitUIInteraction 等方法。有需要的话,还可以继续导出所需要的方法。

var temp = new window.webRtcPlayer({})var webrtc = { load: load, webRtcPlayer: temp, resizePlayerStyle: resizePlayerStyle, emitUIInteraction: emitUIInteraction, onConfig: onConfig}export default { webrtc }2、添加初始变量定义

ueapp.js 中,有些变量没有定义就直接在函数中使用了,这将导致在运行使用时的报错,需要增加定义:

// 新增let unquantizeAndDenormalizeUnsigned = nulllet receivedBytesMeasurement = nulllet receivedBytes = nulllet Data = nulllet gamepad = null3、修改 websocket 地址(要和启动的 打包后的 ue 的 exe 的云渲染的网络地址一致)

本地启动打包后的云渲染的 run.bat 后,在本机浏览器上输入的地址是:localhost,也就是 http://127.0.0.1

那么 需要修改 ueapp.js 中 websocket 中对应的地址:

// ws = new WebSocket( // window.location.href // .replace("http://", "ws://") // .replace("https://", "wss://") // ) ws = new WebSocket("ws://127.0.0.1")4、修复引用 play.png 问题

将 showPlayOverlay 中的 createElement(“img”) 屏蔽掉。

5、main.ts 中引入 ueapp.js

引入 ueapp.js,并使用 vue3 的语法:app.provide,注册 WebRtc 的全局属性,用于方便在 vue 文件中直接调用使用。

6、webRtcPlayer.js 中修改视频为静音,实现数据流直接播放效果

云渲染/像素流推送的本质是视频播放。

在最新版的 Chrome浏览器(以及所有以 Chromium 为内核的浏览器)中,已不再允许自动播放音频和视频。就算为 video 或audi o标签设置了 autoplay 属性也一样不能自动播放。

因此想要视频流在网页加载时自动播放,就需要设置 video 的 muted 属性为 true。即声音为静音模式。

如果本身游戏引擎是有音效的,可以在网页加载后的一定时间内,再将 video 的 muted 设置为 false,之后用户可以调整系统音量,实现音效的展示。

7、修改 ueapp.js,实现支持自动播放(不用再手动点击)

8、复制 player.html 中的 完整 div 到 vue 文件中,并修改 id=“overlay” 的 div 的 display 为 collapse

9、vue 文件中调用像素流方法

10、至此,就可以看到启动 vue 项目时,页面展示游戏引擎的界面了

注意:需要首先启动打包后的 UE 游戏引擎 exe 和 run.bat 开启像素流送。

效果如下:

GIF1

二、游戏引擎 实时交互

以上的验证过程,是基于打包后的游戏引擎的。对于正在开发中的 UE4 项目,以及实现 vue 和 游戏引擎的相互发消息的交互机制,还尚未实现。下面,就介绍如何实现与项目的实时交互。

1、游戏引擎以 Standalone Game 的方式启动

2、找到对应的 UE 4.27 的版本的 SignallingWebServer,将其复制到无特殊字符、中文名称等的路径下

以保证 SignallingWebServer 的像素流服务可以正常启动。

3、找到复制后的路径下:SignallingWebServer/platform_scripts/cmd/run_local.bat,以管理员身份运行 run_local.bat

注意:run_local.bat 默认以 80 端口,若有其他程序占用了 80 端口,则 run_local.bat 将会运行错误或失败,需要移除占用的端口的软件,再重新以管理员身份运行 run_local.bat。

运行成功,将会如下所示:

Vue3 + UE4+ 像素流 + 交互 的开发构建流程(ue4 像素流并发)

此时当 以 Standalone Game 方式运行了游戏引擎,且运行了 run_local.bat,那么将可以在网页中输入 localhost:80,在线访问游戏引擎界面:

4、运行 vue 项目

此时可以看到,运行后,vue 项目也可以正常访问到游戏引擎界面。只不过界面并不是全屏的,需要在代码中做一些样式调整,使游戏引擎界面铺满全屏。

这里 vue 项目可以访问游戏引擎界面的原因在于,我们在 ueapp.js 中修改了对应的 WebSocket 地址。

1、调整游戏引擎界面占满全屏

修改 webRtcPlayer.js 中的 video 的 style。

var video = document.createElement("video") video.id = "streamingVideo" video.playsInline = true video.disablepictureinpicture = true video.muted = true // self.startVideoMuted video.style.width = "100vw" video.style.height = "100vh" video.style.objectFit = "fill"

这样就有占满全屏的效果了。

5、游戏引擎 和 Vue 的通信机制1、消息通信的原理

Vue 和 UE 相互通信的原理是借助于 WebSocket,利用像素流启动服务(run_local.bat),Vue 和 UE 同时监听像素流服务的地址、端口,通过 WebSocket 相互发送、监听消息,再利用各自的对于消息的处理方法,进行消息的处理与响应。

而具体的方法就是 调用 emitUIInteraction 方法 和 addResponseEventListener 方法,前者用于从 JS/Vue 向 UE 发消息,后者用于接收、处理 从 UE 向 JS/Vue 发的消息。

完整蓝图事件:

至此就完成了,Vue 和 UE 相互通信以及通信消息的响应处理。 效果如下:

GIF3

三、参考资料

【UE4】一个实现Web穿透,用HTML开发UI的方式——WebUI的用法

[Vue3] TS7016: Could not find a declaration file for module ‘…/assets/js/util.js‘

jQuery报错 Uncaught (in promise) DOMException: play() failed because the user didn‘t interact

Vue框架中页面和UE4交互的方法

Vue.js集成UE4像素流自定义网页的实现方式

VUE与UE5 像素流送

vue项目与ue交互

ue4之WebUI与引擎之间的通信

UE4.27 UE5 像素流送新人向教程,手把手带你避坑

UE4与前端通信方式

【数字孪生】UE4虚幻引擎与前端Web页面的结合

ue4之mesh点击事件触发切换材质

开源篇-WebSocket搭建UE5通信桥梁

徒手搭建VUE3项目(四):开启全局websocket

UE4使用websocket建立通信,获取实时数据

UE像素流送、 交互

UE4.27 UE5 像素流送新人向教程,手把手带你避坑

UE4 PixelStreaming与UE4之间的通讯笔记

PixelStreaming数据通信

Unreal——像素流送播放器页面与 UE 通信

自定义播放器网页 5.0

在 UE4 蓝图中如何使用委托作为参数

自定义播放器网页 4.27

UE4像素流送PixelStreaming_ue4像素流到移动端可以吗_WindRushToNight的博客-CSDN博客

VUE与UE5 像素流送

UE4-PixelStreaming(虚幻引擎4-像素流)笔记

【自制】UE4蓝图中使用Json的插件

UE5的像素流程序打包

本文链接地址:https://www.jiuchutong.com/zhishi/277363.html 转载请保留说明!

上一篇:文本模式命令提示符版安装CentOS 6.5的图文方法(文本模式是什么意思?)

下一篇:Windows 11安装失败怎么办?Win11安装失败解决方法(window11安装失败)

  • 安卓手机怎么连接惠普打印机(安卓手机怎么连接电脑)

    安卓手机怎么连接惠普打印机(安卓手机怎么连接电脑)

  • 华为语音助手叫什么名字(华为语音助手叫什么你好yoyo)

    华为语音助手叫什么名字(华为语音助手叫什么你好yoyo)

  • 华为手机解锁后为啥还有个滑动解锁(华为手机解锁后时间不见了怎么办)

    华为手机解锁后为啥还有个滑动解锁(华为手机解锁后时间不见了怎么办)

  • 华为荣耀20青春版后壳是玻璃的吗(华为荣耀20青春版)

    华为荣耀20青春版后壳是玻璃的吗(华为荣耀20青春版)

  • 萤石云可以装在电视上吗(萤石云装在电视上)

    萤石云可以装在电视上吗(萤石云装在电视上)

  • 华为p40几个摄像头(华为p40四个摄像头的作用)

    华为p40几个摄像头(华为p40四个摄像头的作用)

  • ios13.4.1可以降级了吗(ios13.4.1可以降级吗?)

    ios13.4.1可以降级了吗(ios13.4.1可以降级吗?)

  • airpods pro通透模式什么意思

    airpods pro通透模式什么意思

  • ai卡了不动怎么办(ai卡了不动怎么保存)

    ai卡了不动怎么办(ai卡了不动怎么保存)

  • 移除粉丝后对方知道吗(移除粉丝后对方还能关注吗)

    移除粉丝后对方知道吗(移除粉丝后对方还能关注吗)

  • icloud是干啥的(icloud到底是什么东西有什么用)

    icloud是干啥的(icloud到底是什么东西有什么用)

  • jpg jpeg一样吗(jpeg和jpg一样)

    jpg jpeg一样吗(jpeg和jpg一样)

  • 冷光源和热光源的区别(冷光源和热光源哪个对眼睛好)

    冷光源和热光源的区别(冷光源和热光源哪个对眼睛好)

  • 手机指纹录不上是什么情况(手机指纹录不上是什么故障)

    手机指纹录不上是什么情况(手机指纹录不上是什么故障)

  • 淘宝危及交易怎么回事(淘宝危及交易怎么触发的)

    淘宝危及交易怎么回事(淘宝危及交易怎么触发的)

  • macbook电池没有在充电怎么办(macbook电池没有在充电建议维修)

    macbook电池没有在充电怎么办(macbook电池没有在充电建议维修)

  • 电脑锁屏键盘按哪个键(电脑锁屏键盘失灵怎么办)

    电脑锁屏键盘按哪个键(电脑锁屏键盘失灵怎么办)

  • ipad7如何设置自动休眠(ipad7自动旋转怎么设置)

    ipad7如何设置自动休眠(ipad7自动旋转怎么设置)

  • 嘀嗒被封号快速解封(嘀嗒封号了有人解号不)

    嘀嗒被封号快速解封(嘀嗒封号了有人解号不)

  • 手机怎样解锁屏(手机怎样解锁屏密码忘了VIVO)

    手机怎样解锁屏(手机怎样解锁屏密码忘了VIVO)

  • 怎么截屏长图苹果手机(截屏长图苹果)

    怎么截屏长图苹果手机(截屏长图苹果)

  • 苹果xsmax开机键在哪(苹果13开机键)

    苹果xsmax开机键在哪(苹果13开机键)

  • 探探屏蔽联系人啥意思(探探屏蔽联系人怎么恢复)

    探探屏蔽联系人啥意思(探探屏蔽联系人怎么恢复)

  • 飞行模式可以听歌吗(飞行模式可以听没下载的歌吗)

    飞行模式可以听歌吗(飞行模式可以听没下载的歌吗)

  • 微信取消绑定快手授权(微信取消绑定快手极速版授权)

    微信取消绑定快手授权(微信取消绑定快手极速版授权)

  • 华为手机能配苹果蓝牙耳机吗(华为手机能配苹果笔记本吗)

    华为手机能配苹果蓝牙耳机吗(华为手机能配苹果笔记本吗)

  • ios怎么买探探会员(ios怎么买探探会员账号)

    ios怎么买探探会员(ios怎么买探探会员账号)

  • 苹果手机怎么刷机详细教程(苹果手机怎么刷机)

    苹果手机怎么刷机详细教程(苹果手机怎么刷机)

  • 有限合伙需要报增值税吗
  • 个人所得税申报操作流程
  • 经营杠杆系数分类
  • 免税收入的三个条件
  • 特许权使用费个税计算公式
  • 工业企业该怎样建账?
  • 售后回租业务的会计分录
  • 土地所有权和使用权的法律规定
  • 无偿使用房屋
  • 收到捐赠的固定资产需要折旧吗
  • 货币资金怎么核对账实相符
  • 退税应纳税所得额4万交税多少
  • 汇算清缴专项附加扣除去年忘记填的能补填吗?
  • 坏账准备冲回是借方还是贷方
  • win10专业版激活密钥永久
  • 平均应收账款是什么
  • 印花税减半征收优惠政策2023
  • 固定资产的处理方法
  • 怎么找回windows图片查看器
  • surface pro记笔记
  • fpzs1是什么文件可以删除吗
  • 预计负债的所得税怎么算
  • 企业在境外发生业务国外缴税后国内怎么做
  • 配件买不到
  • 员工报销个人抬头的医疗费打款备注写什么
  • php chr函数
  • 现金流量表补充资料怎么理解
  • php 跨域
  • php构造函数重载
  • 全盘会计和总账会计一样吗
  • 使用灭火器时要对准火焰的什么部位喷射
  • MMEngine理解
  • php自加
  • 安装traceroute命令
  • 销售自己使用过的物品的税率
  • phpcms怎么用
  • 研发部门的房租物业费进什么科目
  • 本年利润的会计分录有哪些
  • 异地提供建筑服务预缴
  • 本年利润借方红字代表什么意思
  • 微众银行贷款到期晚2天还
  • 准则规定的内容是
  • 不动产的进项税额转出
  • 有收入就要结转成本吗为什么
  • 完税证明可以去税务局补打吗
  • 公立医院事业单位工作人员招聘实践考核自我评价
  • 库存商品是表达什么意思
  • 税控盘有什么作用
  • 捐赠 税收
  • 小规模减免的附加税怎么做账
  • 技术服务费计入成本会计分录
  • 收客户逾期利息会计分录
  • 外账需要计提存利息吗
  • 企业应交税金包括印花税吗
  • 附条件的行政行为有哪些
  • 固定资产清理明细账采用什么账簿
  • 印花税应税凭证是还是否
  • sqlserver批量删除数据
  • 畅游盈利
  • ubuntu火狐浏览器怎么改成中文
  • mac10.10.5无法升级
  • vnc里面的窗口显示不完全
  • windows8的ie浏览器在哪
  • openfiledialog怎么用
  • win10系统安装搜狗输入法很慢
  • linux应用程序在哪个目录
  • mfc界面布局
  • Tutorial 3: First Triangle
  • javascript的数组可以存放任何类型
  • python中字符串类型和元组类型均不可变
  • jquery-easyui
  • bootstrap教材
  • jquery页面跳转的方法
  • js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
  • jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
  • python怎么用的
  • 残疾人可以免增值税吗
  • 河南电子发票申请流程
  • 长春税务局待遇如何
  • 税务发票小助手 小程序二维码
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设