虚幻引擎集成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博客

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/128937.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

WebSocket原理简介

慢聊Go之GoLang中使用Gorilla Websocket|Go主题月 - 掘金 (juejin.cn) 【Go项目】24. WebSocket 基本原理_哔哩哔哩_bilibili 1.http和socket的区别 1) http要先给服务器发请求,然后才会得到响应,基本是一问一答式。 而socke…

DataX实现Mysql数据同步到ElasticSearch(ES)

Linux环境要求 jdk1.8及以上 python2 准备工作 Linux安装jdk yum install -y java-1.8.0-openjdk.x86_64查看是否安装成功 java -versionlinux安装python yum install -y python查看python版本号,判断是否安装成功 python --version下载DataX: Dat…

部署elasticsearch集群

创建es集群 编写一个docker-compose.yaml文件,内容如下 version: 2.2 services:es01:image: elasticsearch:7.12.1container_name: es01environment:- node.namees01- cluster.namees-docker-cluster- discovery.seed_hostses02,es03- cluster.initial_master_nod…

线性代数(六) 线性变换

前言 《线性空间》定义了空间,这章节来研究空间与空间的关联性 函数 函数是一个规则或映射,将一个集合中的每个元素(称为自变量)映射到另一个集合中的唯一元素(称为因变量)。 一般函数从 “A” 的每个元…

3招“挽回”:微信怎么恢复聊天记录

由于工作需要,经常使用微信与客户对接。害怕内存不足,所以我每个月都会清理一些不需要的文件,结果却不小心误删了与客户的聊天记录,有什么方法能够恢复回来吗? 聊天记录是微信的一个重要组成部分,里面保存着…

智慧公厕是对智慧城市“神经末梢”的有效激活,公共厕所实现可感知、可视化、可管理、可控制

在当今科技迅速发展的时代,智慧城市已经成为人们关注的热点话题。作为城市基础设施的重要组成部分,公共厕所也逐渐融入到智慧城市的建设中,成为城市管理的焦点之一。智慧公厕作为智慧城市的“神经末梢”,通过可感知、可视化、可管…

JP《乡村振兴振兴战略下传统村落文化旅游设计》许少辉书香续,山水长

JP《乡村振兴振兴战略下传统村落文化旅游设计》许少辉书香续,山水长

浅析目标检测入门算法:YOLOv1,SSD,YOLOv2,YOLOv3,CenterNet,EfficientDet,YOLOv4

本文致力于让读者对以下这些模型的创新点和设计思想有一个大体的认识,从而知晓YOLOv1到YOLOv4的发展源流和历史演进,进而对目标检测技术有更为宏观和深入的认知。本文讲解的模型包括:YOLOv1,SSD,YOLOv2,YOLOv3,CenterNet,EfficientDet,YOLOv4…

TypeScript:赋予JavaScript数据类型新的力量,提升编程效率!

🎬 岸边的风:个人主页 🔥 个人专栏 :《 VUE 》 《 javaScript 》 ⛺️ 生活的理想,就是为了理想的生活 ! ​ 📚 前言 TypeScript:扩展JavaScript数据类型,赋予编程更强大的表达能力&#xff01…

React三属性之:props

作用 将父组件的参数传递给子组件 父组件 import ./App.css; import React from react; import PropsTest from ./pages/propsTest class App extends React.Component{render(){return(<div><h2>App组件</h2><PropsTest obj{{name:王惊涛,age:27}}>…

构建企业分支网络

构建企业分支网络 目录 1.1 项目背景 1.2 项目拓扑 1.3 项目需求 1.4 设备选型 1.5 技术选型 1.6 地址规划 1.6.1 交换设备地址规划表 1.6.2 路由设备地址规划表 1.6.3 ISP设备地址规划表 1.6.4 终端地址规划表 1.6.4.1 VLAN 规划 1.7 VLAN 规划 1.8 项目实施 1.…

无法将类型为“Newtonsoft.Json.Linq.JObject”的对象转换为类型“Newtonsoft.Json.Linq.JArray”解决方法

对于“Newtonsoft.Json.Linq.JObject”的对象强制类型转换为类型“Newtonsoft.Json.Linq.JArray”报错 第一的图为对象{“*************”:“********”} 第二个图片为数组[{“…”:“…”}] 在我这里进行强制转换对象转换为类型“Newtonsoft.Json.Linq.JArray”报错. 那我们…

Maven中导入jQuery,前端页面中引用jQuery

第一步pom文件中&#xff0c;配置maven坐标。 第二步&#xff0c;在前端页面中引用jQuery 注&#xff1a;该前端页面需要在web根目录即webapp目录下。可认为在maven中导入jQuery后&#xff0c;jquery.min.js文件放在目录webapp/webjars/jquery/3.3.1下。

新手小白制作产品册的攻略合集

在如今竞争激烈的市场中&#xff0c;一个精美而专业的产品册可以帮助你吸引更多的客户和提升品牌形象。然而&#xff0c;对于新手小白来说&#xff0c;制作产品册可能会显得有些困难。不用担心&#xff01;小编将告诉大家一些制作产品册的攻略&#xff0c;帮助你轻松入门 首先我…

MySQL触发器使用指南大全

一、介绍 触发器是与表有关的数据库对象&#xff0c;指在insert/update/delete之前或之后&#xff0c;触发并执行触发器中定义的SQL语句集合。触发器的这种特性可以协助应用在数据库端确保数据的完整性&#xff0c;日志记录&#xff0c;数据校验等操作。 使用别名OLD和NEW来引…

yolov7添加pconv模块

连接pconv 1、复制到models-common.py文件最后 2、添加模块到yolo.py 3、修改网络&#xff0c;建议替换3x3的卷积&#xff0c;后面的参数不要了 4、不能替换步长为2的卷积

机器学习入门教学——交叉验证

1、简介 交叉验证是在机器学习建立模型和验证模型参数时常用的办法&#xff0c;一般被用于评估一个机器学习模型的表现。更多的情况下&#xff0c;我们也用交叉验证来进行模型选择。【注】在训练模型时&#xff0c;为了提高模型的质量&#xff0c;我们会将数据集划分为训练集、…

VTK实现裁剪删除模型功能

VTK高级裁剪删除模型功能 功能演示 删除框选面片 保护框选面片 功能介绍 纯VTK实现的高级裁剪删除功能&#xff0c;支持任意框选内容&#xff0c;支持以下功能&#xff1a; 鼠标任意框选面片范围&#xff0c;支持删除框内面片&#xff0c;或选择仅保留框内面片框选后可以…

K8S1.23.6版本详细安装教程以及错误解决方案(包括前置环境,使用部署工具kubeadm来引导集群)

准备工作&#xff08;来自官方文档&#xff09; 一台兼容的 Linux 主机。Kubernetes 项目为基于 Debian 和 Red Hat 的 Linux 发行版以及一些不提供包管理器的发行版提供通用的指令。每台机器 2 GB 或更多的 RAM&#xff08;如果少于这个数字将会影响你应用的运行内存&#xf…

Git 提交时忽略某些文件

Git 提交时忽略某些文件 ①打开项目目录&#xff0c;找到.gitignore文件 ②编辑.gitignore文件&#xff0c;加上要忽略的文件后缀 以上是针对还没有提交过的文件进行过滤 如果已经这些后缀的文件已经提交过&#xff0c;则需要删除远程的该后缀文件 git rm --cached示例&…