CVE Player

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

Player 是用于 UE5 像素流播放的插件。

Change log

Visit demo project to get more details:

点击此处查看项目示例：

@cve-ts/demo (github)

Usage / 使用

Installation / 安装

• npm

npm install @cve-ts/player

• yarn

yarn add @cve-ts/player

Integrate into web page / 集成到 Web 页面

Must import player before using it in HTML.

在 HTML 模板内使用之前，必须先引入！

<!-- HTML Template -->
<cve-player
  application-name="HdecUnrealHaining"
  url="http://localhost:1234"
>
</cve-player>

<script type="module">
import { player } from '@cve-ts/player'

player?.addEventListener('start', (evt) => {
  console.warn('start ===> ', evt.detail)
})
player?.addEventListener('error', (evt) => {
  console.error('error ===> ', evt.message)
})
</script>

When event handlers are not necessary：

不设置事件回调函数时可以简化为:

import '@cve-ts/player'

Attributes / 属性

<cve-player
  application-name="HdecUnrealPinglu"
  aspect-ratio="auto"
  height="1080"
  level-name="Madao"
  scene-name="Base"
  url="http://39.170.3.124:80/"
  volume="0.3"
  width="1920"
>
</cve-player>

application-name

• Required
• UE application name
• UE 应用名称
• No default value

aspect-ratio

• Optional
• Aspect ratio for resize
• 云渲染视口纵横比例
• The ratio of height and width should be equal to aspect-ratio if it is not auto
• 设置 aspect-ratio 非 auto 时，height 和 width 比例应一致或不设置
• Examples: 'auto', '16 / 9', '4 / 3'
• Default value: 'auto'

height

• Optional
• Height of UE render resolution
• UE 渲染分辨率高度
• No default value

level-name

• Optional
• UE Level Name
• UE 关卡名称
• No default value

scene-name

• Optional
• UE Scene Name
• UE 场景名称
• No default value

url

• Optional
• Pixel Streaming Service Origin, Protocol + Host + Port + Path
• 云渲染源地址，协议://主机:端口/路径
• Default value: 'http://localhost:80/'

volume

• Optional
• Volume of player
• UE 音量
• Default value: 0.3

width

• Optional
• Width of UE render resolution
• UE 渲染分辨率宽度
• No default value

Web Component

CvePlayer extends HTMLELment, and has more event handlers.

CvePlayer 扩展了 HTMLELment，有更多的事件回调。

There is one player element globally, and it's exported.

全局环境下，有且仅有一个 player 元素，且被导出了，请导入后使用。

export class CvePlayer extends HTMLELment {
  onchange?: (evt: CustomEvent<unknown>) => void
  ondebug?: (evt: CustomEvent<unknown>) => void
  onerror?: (evt: ErrorEvent) => void
  onmeasure?: (evt: CustomEvent<unknown>) => void
  onmessage?: (evt: CustomEvent<unknown>) => void
  onpick?: (evt: CustomEvent<unknown>) => void
  onstart?: (evt: CustomEvent<number>) => void
  onstop?: (evt: CustomEvent<string>) => void
}
export let player: CvePlayer | undefined

Events / 事件

start

import { player } from '@cve-ts/player'

// Cloud Render Start
// 云渲染开始
player?.onstart = (evt) => {
  const timestamp: number = evt.detail
  console.info('start ===> ', timestamp)
}

stop

import { player } from '@cve-ts/player'

// Cloud Render Stop
// 云渲染结束
player?.onstop = (evt) => {
  const error: unknown = evt.detail
  console.info('stop ===> ', error)
}

change

import { player } from '@cve-ts/player'

// UE Level & Scene Got Opened
// 打开 UE 关卡和场景
player?.onchange = (evt) => {
  const sceneName: string = evt.detail
  console.info('change ===> ', sceneName)
}

measure

import { player } from '@cve-ts/player'

// UE Measure Finished Action
// UE 测量结束
player?.onmeasure = (evt) => {
  const data: unknown = evt.detail
  console.info('measure ===> ', data)
}

pick

import { player } from '@cve-ts/player'

// UE Feature Selected Action
// UE 地理要素被选中，包括点、线、面
player?.onpick = (evt) => {
  const data: unknown = evt.detail
  console.info('pick ===> ', data)
}

error

import { player } from '@cve-ts/player'

// Request Pixel Streaming Failed
// 请求像素流失败
player?.onerror = (evt) => {
  const reason: string = evt.detail
  console.error('error ===> ', evt.message)
}

message

import { player } from '@cve-ts/player'

// UE Cloud Render Action Message
// UE 云渲染消息
player?.onmessage = (evt) => {
  const jsonData: unknown = evt.detail
  console.info('message ===> ', jsonData)
}

Play Controls / 播放控制

change

import { change } from '@cve-ts/player'
// Switch to custom scene with SceneName
// 输入场景名称，切换到自定义场景
change('Base')
// Switch to custom scene with `scene-name` attribute
// 无输入，切换到当前绑定的场景
change()

display

import { display } from '@cve-ts/player'
// Set video display resolution
// 设置云渲染分辨率
display(1920, 1080)

open

import { open } from '@cve-ts/player'
// Open level with LevelName and SceneName
// 输入关卡名称和场景名称，切换到关卡和场景
open('Madao', 'Base')
// Open level with `level-name` and `scene-name` attributes
// 无输入，切换到当前绑定的关卡和场景
open()

reset

import { reset } from '@cve-ts/player'
// Resize video display resolution as viewport size
// 重置像素流渲染分辨率为 Player 视口尺寸
reset()

resize

import { resize } from '@cve-ts/player'
// Resize window with `aspect-ratio` attribute
// 重新计算 Player 纵横比
resize()

run

import { run } from '@cve-ts/player'
// Run player with `application-name ` and `url` attributes
// 运行云渲染程序，使用绑定的源地址和应用名称
run()

start

import { start } from '@cve-ts/player'
// Start render with url
// 输入像素流实例地址，重新渲染
start('http://localhost:8081')

stop

import { stop } from '@cve-ts/player'
// Stop render
// 停止渲染
stop()

CVE Plugins / CVE 套件其他内容

Controls / 控制器

Here some controls we could use.

天气、时间、场景、相机、点、线、面等控制器类。

@cve-ts/controls - npm (npmjs.com)

Geometry Features / 地理要素

Here some geometry features we could use.

点、线、面的数据结构和构造函数。

@cve-ts/features - npm (npmjs.com)