位置: 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安装失败)

  • 微信绑定银行卡里的钱怎么转到微信里(微信绑定银行卡安全吗?会被盗取吗?)

    微信绑定银行卡里的钱怎么转到微信里(微信绑定银行卡安全吗?会被盗取吗?)

  • iphone热点怎么修改名字(iphone热点怎么改密码)

    iphone热点怎么修改名字(iphone热点怎么改密码)

  • 淘宝扭蛋机入口在哪里(淘宝扭蛋机入口怎么设置在首页)

    淘宝扭蛋机入口在哪里(淘宝扭蛋机入口怎么设置在首页)

  • qq黄钻和svip的区别是什么(svip和黄钻哪个有用)

    qq黄钻和svip的区别是什么(svip和黄钻哪个有用)

  • 小米mix3小窗口模式在哪设置(小米mix3小窗口一直固定在屏幕)

    小米mix3小窗口模式在哪设置(小米mix3小窗口一直固定在屏幕)

  • 爱奇艺两人怎么一起同步看(爱奇艺两人怎么共享)

    爱奇艺两人怎么一起同步看(爱奇艺两人怎么共享)

  • 阜阳微信扫码乘车怎么使用(阜阳坐公交车可以微信支付吗)

    阜阳微信扫码乘车怎么使用(阜阳坐公交车可以微信支付吗)

  • Mate30普通版有慢动作吗(mate30速度慢)

    Mate30普通版有慢动作吗(mate30速度慢)

  • 微机处理器简称为(计算机处理器)

    微机处理器简称为(计算机处理器)

  • 打印机连手机可以打印吗(打印机连手机可以远程打印吗)

    打印机连手机可以打印吗(打印机连手机可以远程打印吗)

  • 微博的草稿箱在哪(微博的草稿箱在哪里看)

    微博的草稿箱在哪(微博的草稿箱在哪里看)

  • iphone11pro屏幕发黄(iphone11pro发热屏幕变暗)

    iphone11pro屏幕发黄(iphone11pro发热屏幕变暗)

  • 手机驱动是什么(手机驱动的作用是什么)

    手机驱动是什么(手机驱动的作用是什么)

  • 怎么传输数据到新的手机上(怎么传输数据到已经激活的苹果手机)

    怎么传输数据到新的手机上(怎么传输数据到已经激活的苹果手机)

  • 上传附件是什么意思(什么叫上传附件)

    上传附件是什么意思(什么叫上传附件)

  • 电脑显示屏亮黄灯是怎么回事(电脑显示屏亮黄灯但是主机已开机)

    电脑显示屏亮黄灯是怎么回事(电脑显示屏亮黄灯但是主机已开机)

  • 广域网的核心设备是(广域网的核心设置是什么)

    广域网的核心设备是(广域网的核心设置是什么)

  • 携程机票怎么返现(携程机票怎么返程)

    携程机票怎么返现(携程机票怎么返程)

  • 微信操作频繁多久恢复(微信操作频繁多久可以恢复加好友)

    微信操作频繁多久恢复(微信操作频繁多久可以恢复加好友)

  • 宽带调制器在哪里重置(宽带调制调节器在哪)

    宽带调制器在哪里重置(宽带调制调节器在哪)

  • 苹果无线充电多少w(苹果无线充电多久能充满苹果11)

    苹果无线充电多少w(苹果无线充电多久能充满苹果11)

  • 苹果手机图标怎么随意排列(苹果手机图标怎么换)

    苹果手机图标怎么随意排列(苹果手机图标怎么换)

  • wps清除格式在哪(wps的清除格式在哪里)

    wps清除格式在哪(wps的清除格式在哪里)

  • 微信如何撤销举报(微信怎样撤销举报好友)

    微信如何撤销举报(微信怎样撤销举报好友)

  • dreamweaver.exe是什么文件的程序 dreamweaver进程是什么(dreamweaver 是什么)

    dreamweaver.exe是什么文件的程序 dreamweaver进程是什么(dreamweaver 是什么)

  • 绿萝怎么养(图文)(绿萝怎么样养)

    绿萝怎么养(图文)(绿萝怎么样养)

  • 出口退税无纸化备案
  • 企业的罚款支出包括违约金吗
  • 领用工程物资的账务处理
  • 等线支付给劳务派遣单位的工资怎么做账
  • 一般户用途可以是往来款吗
  • 个税app抵扣多少钱怎么查询
  • 一般纳税人快递费税率
  • 出纳单据交接表怎么填写
  • 个体工商户税收怎么算
  • 企业捐赠不动产 会计分录
  • 结转预交增值税会计处理
  • 外国专家工资个税
  • 转出未交增值税怎么算
  • 支付销售产品的保险费计入什么科目
  • 税务专用发票
  • 税盘服务费抵税分录
  • 文件改后缀什么意思
  • 公司开业厂商的宣传文案
  • 电力安装工程辅料有哪些
  • 员工奖励股权
  • 工程结算转收入
  • 对公账户转私人账户有限额吗
  • vue 页面生成pdf
  • 怎么确定
  • 哪些收入不纳税
  • yolov5讲解
  • phpinfo页面
  • 劳务派遣应纳税额如何计算
  • 资产减值准则所规范的资产
  • 股权激励费用摊销计算
  • 蓝色向日葵
  • 小规模纳税人增值税免税政策
  • pytorch csdn
  • print函数php
  • 会员信息查询系统
  • 发票货物或应税劳务名称怎么填写
  • 其他应付款包括的内容
  • 公司给买员工保险
  • sqlserver调用存储过程写法
  • 企业代收水电费算不算收入
  • 实行核定征收印花税
  • 公户网银丢了
  • 建设工程的材料质量检测由谁负责
  • 厂房改造费用算固定资产吗
  • 综合评价怎么改
  • Windows2003 SQL2005添加系统用户修改系统登录密码
  • 企业缴纳个人所得税客户端
  • 什么是存货周转期间
  • 公司涉及研发房怎么办
  • 卖固定资产如何做账
  • 主营业务成本如何设置明细
  • 为什么要进行结账和对账
  • 开票后收不回来款怎么办
  • 年末坏账准备计提余额减少说明什么
  • sql高级语句实例
  • solaris开放指定端口
  • win8开机错误
  • ubuntu安装mkl
  • win8提升模式
  • WIN7系统怎么安装 注音输入法
  • win10系统下如何安装谷歌浏览器插件?win10系统下谷歌浏览器插件的安装方法图文教程
  • win1021年更新
  • window10 系统安装
  • win7系统如何
  • 怎么用代码设置选项
  • windows8.1如何安装
  • win10预览版绿屏重启解决
  • 批处理系统的应用场景
  • cocos 2d x
  • shell脚本简单例子
  • Ubuntu修改用户名
  • python django 项目框架图
  • 微软python视频教程
  • 南京退林还耕
  • 党建联建是什么部门负责
  • 上海房屋出租交税
  • 地税是地方税吗
  • 古代税收和现代税收
  • 广西城建投资集团官网
  • 黄山市国家税务局倪国初
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设