Connector 是用于 UE5 像素流播放的插件，包含 <cve-player> 组件，12 个 Controller ，点/线/面/体 4 种 Features ，及若干云渲染相关方法。
- npm
npm install cve-connector@latest- yarn
yarn add cve-connector@latest- 在 HTML 模板内使用之前，必须先引入！
<cve-player>的高度不能为 0！- 基于模板渲染设置事件回调函数时(以 Vue2 为例):
<cve-player
application-name="HdecUnrealHaining"
match-maker-url="http://localhost:1234"
@error="onError"
@start="onStart"
>
</cve-player>
<script type="module">
import { defineContainer } from 'cve-connector'
defineContainer()
export default {
methods: {
onStart(evt) {
console.warn('start ===> ', evt.detail)
},
onError(evt) {
console.error('error ===> ', evt.message)
},
}
}
</script>- 不基于前端框架的集成示例
<!-- HTML Template -->
<cve-player
application-name="HdecUnrealHaining"
match-maker-url="http://localhost:1234"
>
</cve-player>
<script type="module">
import { defineContainer } from 'cve-connector'
defineContainer((player) => {
player.addEventListener('start', (evt) => {
console.warn('start ===> ', evt.detail)
})
player.addEventListener('error', (evt) => {
console.error('error ===> ', evt.message)
})
})
</script><cve-player
application-name="HdecUnrealPinglu"
aspect-ratio="auto"
match-maker-url="http://39.170.3.124:80/"
volume="0.3"
>
</cve-player>- 必要属性
- UE 应用名称，联系 UE 研发人员确认
- 无默认值
- 可选属性
- 云渲染视口纵横比例
- 设置
aspect-ratio非auto时，height和width比例应一致或不设置 - 示例: 'auto', '16 / 9', '4 / 3'
- 默认值: 'auto'
- 补充三种使用情况说明
- 1、不设置height、width、
aspect-ratio - 2、设置height、width，但不设置
aspect-ratio - 3、不设置height、width，设置
aspect-ratio
- 可选属性
- 云渲染源地址，协议://主机:端口/路径
- 无默认值
- 可选属性
- 信令服务地址，协议://主机:端口/路径
- 无默认值
- 可选属性
- UE 音量
- 默认值: 0.3
CvePlayer 扩展了 HTMLELment，有更多的事件回调。
| Event | Description |
|---|---|
| command | Web 发送指令到 UE |
| error | 云渲染异常 |
| message | UE 传递消息到 Web |
| start | 云渲染开始 |
| stop | 云渲染结束 |
- 全局环境下，有且仅有一个 player 元素，请导入后使用；
- player 可能为空(尚未初始化)，请注意校验；
export class CvePlayer extends HTMLELment {
oncommand?: (evt: CustomEvent<UIDescriptor>) => void
onerror?: (evt: ErrorEvent) => void
onmessage?: (evt: CustomEvent<UIDescriptor>) => void
onstart?: (evt: CustomEvent<number>) => void
onstop?: (evt: CustomEvent<string>) => void
}
export let player: CvePlayer | undefinedimport { connect2MatchMaker } from 'cve-connector'
// 运行云渲染程序，使用绑定的源地址和应用名称
connect2MatchMaker()import { connect2Signaling } from 'cve-connector'
// 输入像素流实例地址，重新渲染
connect2Signaling('http://localhost:8081')import { defineContainer } from 'cve-connector'
// 云渲染插件初始化后，立即执行回调函数
defineContainer(async () => {
if (!player) {
return
}
player.onstart = () => {
const reference: CVE.GeoReference = {
IsOriginLocationInProjectedCRS: true,
OriginCenter: [116, 39, 100],
}
GisController.config(reference)
}
})import { disconnect } from 'cve-connector'
// 停止渲染
disconnect()import { getPixelStreamingInstance } from 'cve-connector'
// 获取云渲染实例
getPixelStreamingInstance(url)
.then((signalingURL) => {
player?.setAttribute('signaling-url', signalingURL)
})
.catch((message) => {
emitErrorEvent(message)
})关于 Controller 和 Feature 的内容，请查看 cve-connector 插件 /docs 目录下相关文档。