vue3引入ue像素流

1.前言

做了很多展示ue像素流的项目，今天盘点下前端具体是怎么引入插件并把对应的像素流在浏览器上展示出来

2. Vue3中集成Unreal 5.2 像素流

安装UE5.3像素流的前端插件

npm i @epicgames-ps/lib-pixelstreamingfrontend-ue5.3

安装完依赖以后该怎么使用呢，在网上找到的都是使用 @epicgames-ps/lib-pixelstreamingfrontend-ue5.3和@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.3搭配起来使用的，可是我想把像素流挂载到我自己定义的dom节点上，而且不需要使用ue原生自带的ui控制，没找到对应的api的文档，于是就去github上找到了这个插件对应的代码仓库 github.com/EpicGames/P… ，此文主要记录前端如何引入插件，所以仓库中关于信令服务器等不展开。在此文件夹下找到了implementations（实现），发现了新大陆，里面有一个react和angular实现的demo，

打开react文件夹，找到App.tsx入口文件，代码如下

这里主要是进行了一些初始化参数设置，例如例如是否自动播放，是否静音播放等等，那如何挂载到自定义的节点上呢，我们来看下PixelStreamingWrapper的实现

我们发现了两行最重要的代码，new PixelStreaming会传入两个变量，第一个就是我刚刚的配置，第二个就是我们要挂载的dom，找到了突破口，接下来就把代码稍微改一下，这个ss的值就是服务端发布的像素流websocket地址就完成了

<template>
  <div>
    <!-- UE场景 -->
    <div id="webrtcPage" ref="videoContainerEl"></div>
    <router-view ></router-view>
  </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import {
  Config,
  PixelStreaming,
} from "@epicgames-ps/lib-pixelstreamingfrontend-ue5.3";

const videoContainerEl = ref();

onMounted(() => {
  initPixelstreaming();
});

const initPixelstreaming = () => {
  const config = new Config({
    initialSettings: {
      AutoPlayVideo: true,
      AutoConnect: true,
      ss: "wss://test.com:6003/SWSIndex-1/",
      StartVideoMuted: true,
      HoveringMouse: true,
      WaitForStreamer: true
    }
  });
  new PixelStreaming(config, {
    videoElementParent: videoContainerEl.value
  });
};

番外：

使用vue create命令创建一个简单的vue工程，修改app.vue文件，文件内容如下

<template>
  <div ref="videoContainerEl" id="player" class="video-container"></div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import {
    Config,
    PixelStreaming
} from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.3';

const videoContainerEl = ref();
const streaming = ref();

onMounted(() => {
  init(videoContainerEl.value);
});

/**
 * 初始化
 * @param el video 父元素
 */
const init = (el) => {
    const config = new Config({
        initialSettings: {
            AutoPlayVideo: true,
            AutoConnect: true,
            ss: 'https://twins.shecltd.com:1003/SWSIndex-0/',   // 像素流服务地址
            StartVideoMuted: true,
            HoveringMouse: true,
            MatchViewportRes: true,
        },
    });
    streaming.value = new PixelStreaming(config, {
        videoElementParent: el,
    });
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.video-container {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 0;
}
</style>

运行项目后截图如下：