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

使用 ES 方式引入

1. 安装依赖

npm zhyz-cloudrender-v5-enhance

2. 引入 zhyz-cloudrender-v5-enhance

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

3. 准备渲染容器

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

4. 初始化配置

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

参数名	类型	描述
paasUrl	String	PaaS 服务地址，例：http://192.168.xx.xx:9901
username	String	用户名,例：admin
password	String	密码
appliId	String	云渲染节点容器 ID
myhostname	String	云渲染节点流媒体地址，例：：192.168.xx.xx
protooPort	Number	流媒体端口，默认：5001
renderWidth	Number	渲染分辨率宽度
renderHeight	Number	渲染分辨率高度
remoteIp	String	云渲染节点 IP
wsPort	Number	事件通信端口，默认：9902
isClient	Boolean	是否客户端渲染，false

5. 创建实例并连接

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

// 引入 SDK
import cloud from "zhyz-cloudrender-v5-enhance/cloudRender.umd";
// 创建云渲染实例对象
let cloudObj = new cloud(
  paasUrl,
  username,
  password,
  appliId,
  renderWidth,
  renderHeight,
);
// 连接云渲染节点
cloudObj.RtAPI("joinRoom", {
  ele: document.querySelector("#cloudRenderingContainer"),
  myhostname,
  protooPort,
  remoteIp,
  wsPort,
  isClient,
});

6. 完整代码

vue

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

JS

<script setup>
import cloud from "zhyz-cloudrender-v5-enhance/cloudRender.umd";
import { onMounted, reactive } from "vue";
const config = reactive({
  paasUrl: "http://192.168.xx.xx:9901",//paas地址
  protooPort: 5001,//protoo端口
  username: "admin",//登录用户名
  password: "xxxx",//登录密码
  appliId: "93sdfds2_C1",//云渲染节点容器 ID，PMS 获取
  renderWidth: 1920||window.innerWidth,
  renderHeight: 1040||window.innerHeight,
});
const eleId = "cloudRenderingContainer";
const cloudObj = new cloud(
  config.paasUrl,
  config.username,
  config.password,
  config.appliId,
  config.renderWidth,
  config.renderHeight,
);
onMounted(() => {
  cloudObj.joinRoom(
    {
      ele: document.querySelector(`#${eleId}`),
      myhostname: config.myhostname,
      protooPort: config.protooPort,
      remoteIp: config.remoteIp,
      wsPort: config.wsPort,
      isClient: config.isClient,
    },
    () => {}
  );

  /**
 *   api调用示例
 */
cloudObj.RtAPI(
  "getPoiList",
  {
    view: false, //true获取视图内，false获取视图外
  },
  (res) => {
    // res 为接口返回数据
  },
);

});
</script>

css

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