Ue5+Vue3像素流，保姆级教程

一、vue项目搭建

使用vite创建（就不展开了）

二、Ue5.1 像素流-自定义网页

前置条件安装nodejs

可以参考如下

windows下node环境安装

官网教程

https://docs.unrealengine.com/5.1/zh-CN/getting-started-with-pixel-streaming-in-unreal-engine/

1、安装像素流插件

2、打包-文件资源

像素流相关文件夹在引擎资源目录

Engine/Source/Programs/PixelStreaming/WebServers/SignallingWebServer/

3、配置实例与信令服务器

启动实例：
@echo off
start Windows/ue5stream.exe -ResX=1920 -ResY=1080 -log -PiexlStreamingIP=localhost -PiexlStreamingPort=8888 -log -RenderOffScreen
可以使用绝对路径

启动信令服务器：
@echo off
call "SignallingWebServer/run.bat"

4、核心文件

解释说明

• webRtcPlayer 是对应原始文件Script/webRtcPlayer.js文件

该文件处理浏览器与虚幻引擎应用间的通信，接受并显示来自服务器的媒体流。

• webrtcVideo 是对应Script/app.js文件

此文件包括对键盘、鼠标和触摸事件的事件监听器，还包括数个可在播放器页面使用的函数和钩子。

uevideo.vue集成

<template>
  <div>
    <div ref="video" id="player"></div>
    <!-- <button @click="toUE">向UE发信息</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, // 鼠标：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、全屏显示-像素流默认不是全屏，需要修改对应比例参数
id=“streamingVideo” playsinline=“” style=“width: 100%;height: 100%;object-fit: fill;overflow: hidden;”>

6、成果（全屏展示）