Ue5+Vue3像素流，保姆級(jí)教程
使用vite創(chuàng)建（就不展開了）
二、Ue5.1 像素流-自定義網(wǎng)頁
前置條件安裝nodejs
可以參考如下
windows下node環(huán)境安裝
官網(wǎng)教程
https://docs.unrealengine.com/5.1/zh-CN/getting-started-with-pixel-streaming-in-unreal-engine/
1、安裝像素流插件
2、打包-文件資源
像素流相關(guān)文件夾在引擎資源目錄
Engine/Source/Programs/PixelStreaming/WebServers/SignallingWebServer/
3、配置實(shí)例與信令服務(wù)器
啟動(dòng)實(shí)例：
@echo off
start Windows/ue5stream.exe -ResX=1920 -ResY=1080 -log -PiexlStreamingIP=localhost -PiexlStreamingPort=8888 -log -RenderOffScreen
可以使用絕對(duì)路徑啟動(dòng)信令服務(wù)器：
@echo off
call "SignallingWebServer/run.bat"
4、核心文件
解釋說明
webRtcPlayer 是對(duì)應(yīng)原始文件Script/webRtcPlayer.js文件
該文件處理瀏覽器與虛幻引擎應(yīng)用間的通信，接受并顯示來自服務(wù)器的媒體流。
webrtcVideo 是對(duì)應(yīng)Script/app.js文件
此文件包括對(duì)鍵盤、鼠標(biāo)和觸摸事件的事件監(jiān)聽器，還包括數(shù)個(gè)可在播放器頁面使用的函數(shù)和鉤子。
uevideo.vue集成
<template>
?<div>
? ?<div ref="video" id="player"></div>
? ?<!-- <button @click="toUE">向UE發(fā)信息</button> -->
?</div>
</template>
<script>
import { onMounted, ref } from "vue";
import {
?initLoad,
?callUIInteraction,
?addResponseEventListener,
} from "../webrtcVideo.js";
export default {
?setup(props, context) {
? ?let video = ref(null);
? ?let videoInstance = ref(null);
? ?onMounted(() => {
? ? ?console.log("video.value", video.value);
? ? ?videoInstance = initLoad({
? ? ? ?context,
? ? ? ?serverUrl: "http://127.0.0.1:80",
? ? ? ?autoConnection: false,
? ? ? ?showPlayOverlay: true,
? ? ? ?qualityControl: true,
? ? ? ?inputOptions: {
? ? ? ? ?controlScheme: 1, // 鼠標(biāo)：0是鎖定，1是滑過
? ? ? ? ?suppressBrowserKeys: false,
? ? ? ?},
? ? ?});
? ? ?addResponseEventListener("play-video", async (data) => {
? ? ? ?alert(data);
? ? ?});
? ?});
? ?return {
? ? ?video,
? ? ?toUE() {
? ? ? ?callUIInteraction("this is the first program !!!");
? ? ?},
? ?};
?},
};
</script>
<style scoped>
?#player {
? ?width: 100%;
? ?height: 100%;
? ?padding: 0;
? ?margin: 0;
? ?position: absolute;
?}
</style>
5、全屏顯示-像素流默認(rèn)不是全屏，需要修改對(duì)應(yīng)比例參數(shù) id="streamingVideo" playsinline="" style="width: 100%;height: 100%;object-fit: fill;overflow: hidden;">
6、成果（全屏展示）
