CVE Demo

This demo should help get you started developing with Pixel Streaming in UE5.

Installation

Install Dependencies

• @cve-ts/controls
• @cve-ts/player

npm install @cve-ts/controls @cve-ts/player 

Prepare for Custom Elements

Develop in Vue3

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // 将所有以 cve- 开头的标签名都视为自定义元素
          isCustomElement: (tag) => /^cve-/.test(tag),
        }
      }
    }),
  ],
})

Define Custom Elements

// main.ts
import { definePlayer } from '@cve-ts/player'

definePlayer()

Usage

<!-- html/template -->
<cve-player
  application-name="HdecUnrealPinglu"
  level-name="Madao"
  scene-name="Base"
  :use-mic="false"
  :volume="0.3"
  @connect="render"
>
</cve-player>

// script
import { CameraControl, type CameraData } from '@cve-ts/controls'

const camera = new CameraControl()

const render = async (evt: CustomEvent<number>) => {
  console.log('connect ===> ', evt.detail)

  setTimeout(() => {
    const data: CameraData = {
      Location: [-150933.81522, -23069.396282, 25299.628117],
      Rotation: [0, -25.206932, -68.69767],
      ArmLength: 182103.671875,
    }
    camera.flyTo(data, 3)
  }, 1000 * 3)
}

/* style */
cve-player {
  height: 100vh;
  width: 100vw;
}

Player

Player is web component (custom element) we could use.

@cve-ts/player - npm

Controls

Here some controls we could use.

@cve-ts/controls - npm

Features

Here some features we could use.

@cve-ts/features - npm