注：以下文档以 Vue 为例，其他框架请参考对应的文档。

使用 ES 方式引入

1. 安装依赖

npm install zhyz-cloudrender-v5

2. 引入 zhyz-cloudrender-v5

import CloudRender from "zhyz-cloudrender-v5/cloudRender.umd";

3. 准备渲染容器

<div id="cloudRenderingContainer"></div>

4. 初始化配置

设置必要的连接参数和认证信息。

参数名	类型	描述
appliId	String	云渲染节点容器 ID
myhostname	String	云渲染节点流媒体地址
paasUrl	String	PaaS 服务地址
username	String	用户名
password	String	密码
protooPort	Number	流媒体端口

5. 创建实例并连接

调用 API 创建云渲染实例对象。

import CloudRender from "zhyz-cloudrender-v5/cloudRender.umd";
let cloudObj = new CloudRender(paasUrl, username, password, appliId);
cloudObj.RtAPI("joinRoom", {
  ele: document.querySelector("#cloudRenderingContainer"),
  myhostname,
  appliId,
  protooPort,
});

6. 完整代码

vue

<template>
  <div id="cloudRenderingContainer"></div>
</template>

JS

<script setup>
import cloud from "zhyz-cloudrender-v5/cloudRender.umd";
import { onMounted, reactive } from "vue";
const config = reactive({
  passUrl: "http://192.168.2.168:9901",
  username: "admin",
  password: "xxxx",
  appliId: "93sdfds2_C1",
  myhostname: "192.168.2.168",
  protooPort: 8888,
});
const eleId = "cloudRenderingContainer";
const cloudObj = new cloud(
  config.passUrl,
  config.username,
  config.password,
  config.appliId,
  config.isP2p
);
onMounted(() => {
  cloudObj.joinRoom(
    {
      ele: document.querySelector(`#${eleId}`),
      myhostname: config.myhostname,
      appliId: config.appliId,
      protooPort: config.protooPort,
    },
    () => { }
  );
});
</script>

css

<style scoped>
  * {
  margin: 0;
  padding: 0;
}
#cloudRenderingContainer {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
</style>