虚幻引擎集成web前端<一>:win环境UE4.27导出像素流并集成到vue2环境(附案例)

本案例附件:https://download.csdn.net/download/rexfow/88303544

第一部分:虚幻引擎导出像素流windows包

第1步:软件设置

-AudioMixer -PixelStreamingIP=localhost -PixelStreamingPort=8888

第2步:信令服务器设置

1、执行run_local.bat:

\Samples\PixelStreaming\WebServers\SignallingWebServer\platform_scripts\cmd\

F:\UE\package\UE4271\WindowsNoEditor\Samples\PixelStreaming\WebServers\SignallingWebServer\platform_scripts\cmd

运行后

2、新建bat启动实例

@echo off

start WindowsNoEditor/UE4271.exe -ResX=1920 -ResY=1080 -PixelStreamingIP=localhost -PixelStreamingPort=8888 -log -RenderOffScreen

运行后

3、访问页面:

http://127.0.0.1/

扩展阅读:UE4 4.27像素流公网布置教程_ue4像素流发布_老夫写代码就是一把梭的博客-CSDN博客

第二部分:将像素流集成到vue项目中

第1步:安装vue-cli 脚手架构建工具(必须在全局中进行安装)

在命令行中运行命令 npm install -g vue-cli ,然后等待安装完成。

是否安装成功:vue -V

webpack的版本查询:webpack -v

第2步:生成vue项目

vue init webpack

vue init webpack pixelvue

第3步:启动vue项目

cd pixelvue

npm run dev

扩展阅读:vue.js 三种方式安装 ( vue-cli ) 、安装详解、创建项目_vue 安装_微风--轻许--的博客-CSDN博客

第三部分:将像素流集成到vue项目

第1步:集成js到vue目录下

第2步:引入app.js(app改成webrtc),webRtcPlayer.js

重写webrtc.js中的ws

第3步:将player.html中的指定html标签及其内内容粘贴到HelloWorld.vue中

在HelloWorld.vue调用load()方法

扩展阅读:vue+typescript与UE4像素流通信笔记-CSDN博客

相关推荐
 M͏⁠͏r.D2 天前
UE4 材质学习笔记01(什么是着色器/PBR基础)
ue4·材质
cainiao0806053 天前
UE4/UE5开发资源
ue5·ue4
AllBlue5 天前
ue4多个面重叠闪烁
ue4
小江村儿的文杰5 天前
UE4中 -skipbuild -nocompile 有什么区别
ue4
Growthofnotes5 天前
UE4_Niagara基础实例—7、如何让粒子照亮周边环境
ue4
Growthofnotes6 天前
UE4_Niagara基础实例—5、骨架网格体表面生成粒子及过滤骨骼位置生成粒子
ue4
Growthofnotes6 天前
UE4_Niagara基础实例—6、蓝图与粒子系统的通信
ue4
@Unity打怪升级7 天前
Unity 与虚幻引擎对比:两大游戏开发引擎的优劣分析
游戏·unity·ue5·游戏引擎·ue4·游戏程序·虚幻
UTwelve11 天前
【UE5】将2D切片图渲染为体积纹理,最终实现使用RT实时绘制体积纹理【第三篇-着色器光照】
ue5·ue4·虚幻·着色器
UTwelve16 天前
【UE5】将2D切片图渲染为体积纹理,最终实现使用RT实时绘制体积纹理【第一篇-原理】
ue5·ue4·虚幻·虚幻引擎·着色器