VUE与UE5 像素流送

1：首先安装Pixel Streaming插件

启动后需重启

2：偏好设置

额外启动参数：

-AudioMixer -PixelStreamingIP=localhost -PixelStreamingPort=8888

3：打包window
4：打包结束后，将UE的运行包新建一个快捷方式（按住ATL直接拖动）

5：给快捷方式添加相关运行参数：

-AudioMixer -PixelStreamingIP=localhost -PixelStreamingPort=8888

6：新建VUE工程

7：将UE5打包好的js文件拷贝到VUE里‘app.js’与‘webRtcPlayer.js’

8：将app.js更改为webrtc.js（可有可无）

9：vue项目index.html将webRtcPlayer导入

10：修改webrtc

修改websocket的链接地址（本人是写死的）

添加导出块

末文添加：

var temp = new window.webRtcPlayer({});
var webrtc = {load: load,webRtcPlayer: temp,resizePlayer: resizePlayerStyle,emitUIInter: emitUIInteraction
}export default {webrtc
}

11：新增vue代码块

<template><div><div ref="video" id="player"></div></div>
</template><script>
import { onMounted, ref } from "vue";
import webrtc from "../webrtc.js";export default {setup(props, context) {let video = ref(null);let videoInstance = ref(null);onMounted(() => {var htmlPlayer = document.getElementById("player");htmlPlayer.appendChild(webrtc.webrtc.webRtcPlayer.video);webrtc.webrtc.load();});return {video,};},
};
</script>

12：启动

在UE5打包好的Windows\Samples\PixelStreaming\WebServers\SignallingWebServer\platform_scripts\cmd路径下有个run_local.bat，首先将其启动起来

接着启动Windows里我们创建的快捷方式启动

这时，之前启动的会出现一句话，即成功

最后启动VUE点击'click to start'.

完结，撒花

2022年7月28日新增：

VUE 与 UE5交互

1：首先蓝图里添加组件为关卡中的Actor添加一个：PixelStreamingInput

蓝图如下：

2：

vue代码const onClickGift = (id) => {if (isLoad.value) {console.log("onClickGift:::", id);let data = {id,};api_send("onUEGiftCall", data, (info) => {console.log("api_register========", info);});}
};app.js/webrtc.js代码let bLog = true;// 前端发消息给后端，并监听返回
export function api_send(proto, data, callback) {let jsonData = { command: 'event', func_name: proto, args: data };if (bLog) {console.log('send:', jsonData);}//responseEventListeners.set(proto, callback);//emitUIInteraction(jsonData);
}

PS:

1： webrtc里面有很多找不到的id,这个哪里报错删哪里，先跑起来再说后面的

2：之前出过Player101错误：解决方法

在UE5打包好的Windows\Engine\Source\Programs\PixelStreaming\WebServers\SignallingWebServer路径下有个cirrus.js，

在第376行后加入如下代码：

_RemoveExtmapAllowMixed(msg);// 替换sdp协议内新内容

此块代码如下：


playerServer.on('connection', function (ws, req) {// Reject connection if streamer is not connectedif (!streamer || streamer.readyState != 1 /* OPEN */) {ws.close(1013 /* Try again later */, 'Streamer is not connected');return;}let playerId = ++nextPlayerId;console.log(`player ${playerId} (${req.connection.remoteAddress}) connected`);players.set(playerId, { ws: ws, id: playerId });function sendPlayersCount() {let playerCountMsg = JSON.stringify({ type: 'playerCount', count: players.size });for (let p of players.values()) {p.ws.send(playerCountMsg);}}ws.on('message', function (msg) {console.logColor(logging.Blue, `<- player ${playerId}: ${msg}`);try {msg = JSON.parse(msg);} catch (err) {console.error(`Cannot parse player ${playerId} message: ${err}`);ws.close(1008, 'Cannot parse');return;}if (msg.type == 'offer') {console.log(`<- player ${playerId}: offer`);_RemoveExtmapAllowMixed(msg);// 替换sdp协议内新内容msg.playerId = playerId;streamer.send(JSON.stringify(msg));} else if (msg.type == 'iceCandidate') {console.log(`<- player ${playerId}: iceCandidate`);msg.playerId = playerId;streamer.send(JSON.stringify(msg));} else if (msg.type == 'stats') {console.log(`<- player ${playerId}: stats\n${msg.data}`);} else if (msg.type == 'kick') {let playersCopy = new Map(players);for (let p of playersCopy.values()) {if (p.id != playerId) {console.log(`kicking player ${p.id}`)p.ws.close(4000, 'kicked');}}} else {console.error(`<- player ${playerId}: unsupported message type: ${msg.type}`);ws.close(1008, 'Unsupported message type');return;}});function onPlayerDisconnected() {players.delete(playerId);streamer.send(JSON.stringify({type: 'playerDisconnected', playerId: playerId}));sendPlayerDisconnectedToFrontend();sendPlayerDisconnectedToMatchmaker();sendPlayersCount();}ws.on('close', function(code, reason) {console.logColor(logging.Yellow, `player ${playerId} connection closed: ${code} - ${reason}`);onPlayerDisconnected();});ws.on('error', function(error) {console.error(`player ${playerId} connection error: ${error}`);ws.close(1006 /* abnormal closure */, error);onPlayerDisconnected();});sendPlayerConnectedToFrontend();sendPlayerConnectedToMatchmaker();ws.send(JSON.stringify(clientConfig));sendPlayersCount();
});

在文件末尾追加如下代码

/*** sdp协议更新的方法* @param desc offer内容* @returns {string}*/
function _RemoveExtmapAllowMixed(desc) {if (desc.sdp.indexOf('\na=extmap-allow-mixed') !== -1) {const sdp = desc.sdp.split('\n').filter((line) => {return line.trim() !== 'a=extmap-allow-mixed';}).join('\n');desc.sdp = sdp;return sdp;}
}

参考文献

vue3集成ue5像素流自定义网页

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

像素流送

Player 101找不到问题的解决方法

VUE与UE5 像素流送相关推荐

[虚幻引擎][UE][UE5]像素流送(Pixel Streaming)，像素流去掉黑边和按钮[UE5.1.0]，鼠标控制
[虚幻引擎][UE][UE5]像素流送Pixel Streaming,像素流去掉黑边和按钮[UE5.1.0] 1.写在前面 01.作者碎碎念 02.结果演示截图视频教程 2.需要准备的软件 3.U ...
【瑞模网】与UE5 像素流送
1:首先安装Pixel Streaming插件启动后需重启 2: 偏好设置额外启动参数: -AudioMixer -PixelStreamingIP=localhost -PixelStreami ...
UE5.1 像素流送公网部署无需GPU服务器
因为工作需要最近在做虚幻引擎5.1这方面的部署,简单记录一下最近学习的一点知识. 本文参考:虚幻引擎官网文档 UE5像素流送原理及多用户公网部署小白教程202211022220 一.像素流送介绍像素 ...
ue4云渲染——像素流送实践
一.安装 Epic Games Launcher 官方中文文档 https://docs.unrealengine.com/4.27/zh-CN/,点击下载如需要登录账号,使用注册一个账号后再登录就 ...
UE像素流送、交互
官网地址 =====> https://docs.unrealengine.com/4.26/zh-CN/ 第一步先决条件检查操作系统和硬件- 像素流送插件只能在运行Windows和Linu ...
UE4 4.24像素流送学习整理
UE4 4.24像素流送使用整理像素流送技术使用的前置UE4部分的程序内容,参考官方文档的操作,设置打包出程序即可. https://docs.unrealengine.com/zh-CN/Plat ...
UE4像素流送教程【Pixel Streaming】
虚幻引擎像素流送(Pixel Streaming)允许你从任何有屏幕的联网设备(例如计算机,手机,平板电脑等)播放虚幻项目.在这个教程里,我们将学习如何激活虚幻引擎的像素流送并从任何Web浏览器控制P ...
有关像素流送手机浏览器触屏bug的总结
Bug描述: 使用手机浏览器操作UE4像素流送程序时,程序只能正常处理一个按键. 当有两个或两个以上按键同时按下时,有一定几率导致程序始终有一个按键没有释放,致使程序再也无法处理用户的正常输入(多指触 ...
UE4 4.24像素流送实践 pixel streaming
UE4 4.24像素流送实践 pixel streaming 4.24电脑运行成功了在实践像素流送的过程中,我参考了 ①官方视频https://www.bilibili.com/video/BV1U ...

VUE与UE5 像素流送

VUE 与 UE5交互

VUE与UE5 像素流送相关推荐

最新文章

热门文章