CVE Player
This tool should help get you started developing with Pixel Streaming in UE5.
Player 是用于 UE5 像素流播放的插件。
Visit demo project to get more details:
点击此处查看项目示例：
Usage / 使用
Installation / 安装
- npm
npm install @cve-ts/player- yarn
yarn add @cve-ts/playerIntegrate 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
heightandwidthshould be equal toaspect-ratioif it is notauto - 设置
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 | undefinedEvents / 事件
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.
点、线、面的数据结构和构造函数。