Appearance
该接入文档提供了完整的示例代码和详细说明，帮助开发者快速集成云渲染功能到现有项目中。请根据实际需求进行修改和扩展。
使用 HTML 方式引入
1. 引入 SDK 文件
html
<script type="text/javascript" src="js/cloudRender.umd.js"></script>1
2. 准备渲染容器
html
<div id="cloudRenderingContainer"></div>1
3. 初始化配置
设置必要的连接参数和认证信息。
| 参数名 | 类型 | 描述 |
|---|---|---|
| appliId | String | 云渲染节点容器 ID |
| myhostname | String | 云渲染节点流媒体地址 |
| paasUrl | String | PaaS 服务地址 |
| username | String | 用户名 |
| password | String | 密码 |
| protooPort | String | 流媒体端口 |
4. 创建实例并连接
调用 API 创建云渲染实例对象。
js
let cloudObj = new CloudRender(paasUrl, username, password, appliId);
cloudObj.RtAPI("joinRoom", {
ele: document.querySelector("#cloudRenderingContainer"),
myhostname,
appliId,
protooPort,
});1
2
3
4
5
6
7
2
3
4
5
6
7
5. 完整代码
HTML
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>初始化云渲染实例</title>
<script type="text/javascript" src="http://47.93.101.157:8000/public/paas-sdk-v5/cloudRender.umd.js"></script>
</head>
<body>
<div id="cloudRenderingContainer"></div>
</body>
</html>1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
JS
<script type="text/javascript">
window.onload = function () {
var appliId = "93sdfds2_C1"; // 云渲染节点中的某个容器的ID
var myhostname = "192.168.2.168"; // 云渲染节点的流媒体地址
var paasUrl = "http://192.168.2.168:9901"; // paas服务对应地址
var username = "admin"; // 云渲染节点的用户名
var password = "xxxx"; // 云渲染节点的密码
var protooPort = "8888"; // 云渲染节点的流媒体端口
// 初始化云渲染实例
let cloudObj = new CloudRender(
paasUrl,
username,
password,
appliId
);
cloudObj.RtAPI("joinRoom", {
ele: document.querySelector("#cloudRenderingContainer"),
myhostname,
appliId,
protooPort,
});
}
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
CSS
<style>
* {
margin: 0;
padding: 0;
}
#cloudRenderingContainer {
width: 100%;
height: 100vh;
overflow: hidden;
}
</style>1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
注意事项
text
准备云渲染节点和PaaS服务
配置云渲染节点和PaaS服务的连接参数
创建云渲染实例并连接
确保云渲染SDK文件（cloudRender.js）正确引入
根据实际环境修改配置参数
云渲染内容将显示在指定容器区域1
2
3
4
5
6
2
3
4
5
6