Vue3中集成Unreal 5.2 像素流(Pixel Streaming插件)

这篇具有很好参考价值的文章主要介绍了Vue3中集成Unreal 5.2 像素流(Pixel Streaming插件)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1. 创建一个Unreal项目

默认大家都已经成功安装好了Unreal Engine 5.2版本。如果没有的话,可以先去官网下载一个EPIC,然后从EPIC里下载一个Unreal Engine 5.2,推荐大家安装的时候选一个空间大一些的盘,最好放在固态里,这样启动可以快很多。
首先,在EPIC里启动安装好的Unreal Engine 5.2.
Vue3中集成Unreal 5.2 像素流(Pixel Streaming插件)
点击游戏,选择空白项目,取消勾选初学者内容包,这样可以少占一些空间,选择合适的项目位置,最好不要选择C盘,因为Unreal项目所占的空间都比较大,然后单击创建。
Vue3中集成Unreal 5.2 像素流(Pixel Streaming插件)
现在就创建好了一个空白项目,如下图所示。
Vue3中集成Unreal 5.2 像素流(Pixel Streaming插件)

2. 启用Pixel Streaming插件

单击菜单栏-编辑-插件,搜索Pixel Streaming,勾选后点击立即重启。
Vue3中集成Unreal 5.2 像素流(Pixel Streaming插件)
当重启完成后,出现像素流送按钮,说明插件启用成功。
Vue3中集成Unreal 5.2 像素流(Pixel Streaming插件)

3. 下载Unreal 5.2对应的Pixel Streaming Infrastructure

推荐大家直接从github上下载PixelStreamingInfrastructure最新版的,也可以打包项目,打包完成后里也是有的。
找一个空白目录,打开cmd,输入以下命令,确保已经安装过git。

git clone https://github.com/EpicGames/PixelStreamingInfrastructure.git

clone完成后,目录是这个样子,未来也许会改变。
Vue3中集成Unreal 5.2 像素流(Pixel Streaming插件)
简单介绍一下,每个文件夹的内容。

  1. 配对器(MatchMaker):该文件夹包含配置和运行配对器所需的所有脚本。
    Vue3中集成Unreal 5.2 像素流(Pixel Streaming插件)
  2. SFU:该文件包含配置和运行选择性转发单元(SFU)所需的所有内容。
    Vue3中集成Unreal 5.2 像素流(Pixel Streaming插件)
  3. SignallingWebServer :这是必需像素流送元素的位置,例如信令服务器、Web服务器和前端。
    Vue3中集成Unreal 5.2 像素流(Pixel Streaming插件)
    Platform_scripts 目录是用于启动每个像素流送元素的所有脚本的常用位置。你可以在 cmdbash 中分别找到Windows和Linux的脚本。
4. 创建一个Vue项目

创建vue项目的方式很多,通过手脚架或者命令行都可以。
创建一个新的Vue项目,然后通过vscode或者webstorm打开,目录大致如下所示:
Vue3中集成Unreal 5.2 像素流(Pixel Streaming插件)
安装UE5.2的PixelStreaming对应的前端依赖,一个是API库依赖,一个是UI库依赖。

npm install @epicgames-ps/lib-pixelstreamingfrontend-ue5.2
npm install @epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.2

在views目录下,新建一个vue文件,命名为Player.vue
代码如下:

<template>
    <div>
      <!-- 页面内容 -->
    </div>
</template>
  
  <script>
import { Config, PixelStreaming } from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.2';
import { Application, PixelStreamingApplicationStyle } from '@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.2';

export default {
    name: 'PlayerView',
    mounted() {
      const PixelStreamingApplicationStyles = new PixelStreamingApplicationStyle();
      PixelStreamingApplicationStyles.applyStyleSheet();
  
      // Example of how to set the logger level
      // Logger.SetLoggerVerbosity(10);
  
      // Create a config object
      const config = new Config({ useUrlParams: true });
  
      // Create a Native DOM delegate instance that implements the Delegate interface class
      const stream = new PixelStreaming(config);
      const application = new Application({
        stream,
        onColorModeChanged: (isLightMode) => PixelStreamingApplicationStyles.setColorMode(isLightMode)
      });
  
      document.body.appendChild(application.rootElement);
    },
    methods: {
      // ...
    }
}
</script>
  
<style>
body {
    width: 100vw;
    height: 100vh;
    min-height: -webkit-fill-available;
    font-family: 'Montserrat';
    margin: 0;
}
</style>
  

修改router目录下的index.js:
将其引入:
Vue3中集成Unreal 5.2 像素流(Pixel Streaming插件)

import PlayerView from '@/views/Player.vue'

然后将其暴露出去:
Vue3中集成Unreal 5.2 像素流(Pixel Streaming插件)

{
    path: '/',
    name: 'player',
    component: PlayerView
  },

启动项目,在命令行中输入:

npm run serve

启动完成后,在浏览器中输入网址http://localhost:8080/

此时,可以看到默认的播放器画面。
Vue3中集成Unreal 5.2 像素流(Pixel Streaming插件)

5. 推流方式一:使用Unreal Engine 5.2

回到我们刚才的Unreal项目,点击像素推流,点击启动信令服务器,然后点击流送关卡编辑器。
Vue3中集成Unreal 5.2 像素流(Pixel Streaming插件)
现在,回到浏览器中,点击默认播放器左边的设置按钮,将Signaling url修改为ws://localhost:80;
Vue3中集成Unreal 5.2 像素流(Pixel Streaming插件)
现在就可以正常看到画面了,并且支持鼠标、键盘的基础操作,此时的画面和Unreal Engine中是同步的。
Vue3中集成Unreal 5.2 像素流(Pixel Streaming插件)

6. 推流方式二:打包项目

如果项目未来要发布的话,一定是采用这种方式的。
点击菜单栏-编辑-编辑器偏好设置
Vue3中集成Unreal 5.2 像素流(Pixel Streaming插件)
选择,关卡播放器-播放
Vue3中集成Unreal 5.2 像素流(Pixel Streaming插件)
找到额外启动参数选项,输入参数为:-AudioMixer -PixelStreamingIP=localhost -PixelStreamingPort=8888
Vue3中集成Unreal 5.2 像素流(Pixel Streaming插件)
完成这步后,打包项目:
Vue3中集成Unreal 5.2 像素流(Pixel Streaming插件)
打包完成后,找到文件夹打开,目录大致如下:
按住Alt键拖动一个快捷方式出来,然后右键-属性,添加启动参数:
-AudioMixer -PixelStreamingIP=localhost -PixelStreamingPort=8888
Vue3中集成Unreal 5.2 像素流(Pixel Streaming插件)
Vue3中集成Unreal 5.2 像素流(Pixel Streaming插件)
完成这些工作后,启动我们在第三步下载的信令服务器。
使用管理员权限打开powershell,进入目录PixelStreamingInfrastructure\SignallingWebServer\platform_scripts\cmd
启动Start_SignallingServer.ps1
启动完成后,界面如下:
Vue3中集成Unreal 5.2 像素流(Pixel Streaming插件)
现在,双击打开快捷方式,然后在浏览器中打开我们的vue项目,也可以看到界面了。

参考资源:

Unreal官方文档文章来源地址https://www.toymoban.com/news/detail-482118.html

到了这里,关于Vue3中集成Unreal 5.2 像素流(Pixel Streaming插件)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3项目中集成mars3D简单三部曲

    这里是参考网址,大佬可以点击一件跳转 1.安装依赖 2.修改 vite.config.ts 配置文件 3. 新建DIV容器 + 创建地图 新建map.ts文件,以下代码闭眼直接copy vue文件引入map.ts,以下代码闭眼直接copy 快去试试吧~

    2024年01月25日
    浏览(32)
  • Vue3 + UE4+ 像素流 + 交互 的开发构建流程

    1、将对应 UE 4.27 版本的 webRtcPlayer.js 复制到项目的 public/ue 文件夹下(作为静态资源) 2、根目录下的 index.html 中引入 ue/webRtcPlayer.js index.html 中引入 webRtcPlayer.js 3、将对应 UE 4.27 版本的 app.js 复制到项目的 main.ts 同级目录下,可以改名为 ueapp.js 4、修改 ueapp.js 中的内容,用于解

    2024年02月04日
    浏览(34)
  • Pixel-GS:用于3D高斯溅射的具有像素感知梯度的密度控制

    Zheng Zhang  Wenbo Hu†  Yixing Lao   老宜兴市郑张文博胡 † Tong He  Hengshuang Zhao† 赵同和恒双 †1122113311 Abstract 摘要          [2403.15530] Pixel-GS: Density Control with Pixel-aware Gradient for 3D Gaussian Splatting 3D Gaussian Splatting (3DGS) has demonstrated impressive novel view synthesis results while advancin

    2024年04月23日
    浏览(48)
  • FFmpeg报错:Specified pixel format yuvj420p is invalid or not supported(用ffmpeg程序查看编码器支持像素格式命令)

    这是因为我们把海康rtsp视频流packet解封装后,它frame的像素格式是 yuvj420p(AV_PIX_FMT_YUVJ420P) 的,然后我们又指定编码器上下文的像素格式 pix_fmt = AV_PIX_FMT_YUVJ420P ,指定编码器为 AV_CODEC_ID_MPEG4 ,但是 AV_CODEC_ID_MPEG4 不支持 AV_PIX_FMT_YUVJ420P 像素格式,所以报了上述错误 用 ffmpe

    2023年04月13日
    浏览(86)
  • IDEA中集成zookeeper的插件

    IDEA中集成zookeeper的插件 一、IDEA中集成插件 搜索插件并安装: 安装完成,重启IDEA 配置zk集群 连接成功

    2024年02月12日
    浏览(26)
  • vue3 拖拽插件 Vue3DraggableResizable

    Vue3DraggableResizable 拖拽插件的官方文档 一、Vue3DraggableResizable 的属性和事件 属性 类型 默认值 功能描述 示例 initW Number null 设置初始宽度(px) Vue3DraggableResizable :initW=“100” / initH Number null 设置初始高度(px) Vue3DraggableResizable :initH=“100” / w Number 0 组件的当前宽度(px),你

    2024年02月03日
    浏览(41)
  • 前端插件库之vue3使用vue-codemirror插件

    基于 CodeMirror ,适用于 Vue 的 Web 代码编辑器。 1.命令行安装 如果运行官网例子时, 报错: 可以在终端中安装对应文件, 解决问题 2.在需要的组件中配置 代码编辑区 支持代码编辑区, 满足白天/黑夜主题切换, 满足c++/python语言切换 不足, 没有满足代码提示 组件代码 vue3 新手作品

    2024年02月04日
    浏览(48)
  • vue3视频播放插件

    1、效果图(网上随便找的视频用来测试的,所以有个水印) 2、引入插件 3、项目中引入 全局引入方式:在main.js中引入以下 组件内引入方式: 4、使用及例子(因为我用的全局引入) 5、该插件支持原生video所有事件 参数 说明 类型 可选值 默认值 width 播放器宽度 string - 800px h

    2024年02月02日
    浏览(45)
  • vue3插件开发,上传npm

    2024年02月07日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包