# zhyz-cloudrender
有关如何使用 zhyz-cloudrender 的信息，请参阅文档文档 (opens new window)。 有关源文件和问题，请访问存储库 repo (opens new window).
# 包括 zyz-cloudrender
以下是包含 zhyz-cloudrender 的一些最常见方法。
# Browser v4 版本
# Script tag
<script
type="text/JavaScript"
src="http://47.93.101.157:8000/public/paas-skd/cloudRender.umd.js"
></script>
#
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="player">
<video></video>
</div>
</body>
</html>
<!-- 根据路径存放地址引用 -->
<script src="http://47.93.101.157:8000/public/paas-skd/cloudRender.umd.js"></script>
<script>
window.onload = function () {
var appliId = "93sdfds211421_C1";
var myhostname = "192.168.2.160";
var paasUrl = "http://192.168.2.160:9901";
var username = "admin";
var password = "syz@8015";
var protooPort = "8888";
var isHttps = false;
var isP2p = false;
var Dandelion = new CloudRender(
paasUrl,
username,
password,
isHttps,
appliId,
isP2p
);
Dandelion.RtAPI("joinRoom", {
ele: document.querySelector("#player"),
myhostname,
appliId,
protooPort,
});
/**
* api调用示例
*/
Dandelion.RtAPI(
"getPoiList",
{
view: false, //true获取视图内，false获取视图外
},
(res) => {
// res 为接口返回数据
}
);
};
</script>
# Browser v5 版本
# Script tag
<script
type="text/JavaScript"
src="http://47.93.101.157:8000/public/paas-sdk-v5-enhance/cloudRender.umd.js"
></script>
#
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="player" class="player">
</div>
</body>
</html>
<!-- 根据路径存放地址引用 -->
<script src="http://47.93.101.157:8000/public/paas-sdk-v5-enhance/cloudRender.umd.js"></script>
<script>
window.onload = function () {
let protooPort = "xxxx"; //云渲染端口
let myhostname = "xxx.xxx.x.xxx"; //媒体服务器ip
let appliId = "xxx"; //流id
let paasUrl = "http://xxx.xxx.x.xxx:9901"; //ip
let username = "xxxx"; //账号
let password = "xxxx"; //密码
let remoteIp = "xxx.xxx.x.xxx"; //鼠标键盘服务的ip
let wsPort = "xxxx"; // 鼠标键盘服务port
let isClient = false; //是否客户端渲染
let renderWidth = 1920; //渲染分辨率宽度
let renderHeight = 1040; //渲染分辨率高度
// 初始化云渲染实例
let Dandelion = new cloud(paasUrl, username, password, appliId, renderWidth, renderHeight);
Dandelion.RtAPI("joinRoom", {
element: document.getElementById('player'),// video 标签
myhostname,
protooPort,
remoteIp,
wsPort,
isClient
});
/**
* api调用示例
*/
Dandelion.RtAPI(
"getDataPanel",
{
view: false, //true获取视图内，false获取视图外
},
(res) => {
// res 为接口返回数据
console.log('幕布列表', res)
}
);
};
</script>
<style>
.player{
width: 100vw;
height: 100vh;
}
</style>
# Webpack / Browserify / Babel V4 版本
Webpack (opens new window)有多种使用方式, Browserify (opens new window) or Babel (opens new window)。有关使用这些工具的更多信息，请参阅相应项目的文档。在脚本中，包含 zhyz-cloudrender-v4 通常如下所示：
在Node (opens new window)中包含 zhyz-cloudrender-v4 （打开新窗口），首先用 npm 安装。
npm install zhyz-cloudrender-v4
#
<template>
<div id="player"></div>
</template>
<script>
<template>
<div id="player">
</div>
</template>
<script>
import cloud from "zhyz-cloudrender-v4/cloudRender.umd";
import { onMounted, onBeforeUnmount } from "vue";
export default {
setup() {
let appliId = "xxxx"; // 云渲染节点中的某个容器的ID
let myhostname = "xxx.xxx.x.xx"; // 云渲染节点的流媒体地址
let paasUrl = "http://xxxx:xxx"; // paas服务对应地址
let protooPort = "xxxx"; // 云渲染节点的流媒体端口
let username = "zhangsan";
let password = "zhangsan_password";
let isHttps = false;
let isP2p = false;
// 初始化云渲染实例
let Dandelion = new cloud(paasUrl, username, password, isHttps, appliId, isP2p);
onMounted(() => {
// 在页面上显示场景
Dandelion.RtAPI("joinRoom", {
ele: document.querySelector("#player"), //指定的挂载三维场景的页面元素
myhostname,
appliId,
protooPort,
});
onBeforeUnmount(() => {
Dandelion.RtAPI("destroyedP2p");
});
/**
* api调用示例
*/
Dandelion.RtAPI(
"getPoiList",
{
view: false, //true获取视图内，false获取视图外
},
(res) => {
// res 为接口返回数据
}
);
return {};
});
},
};
</script>
# Webpack / Browserify / Babel V5 版本
Webpack (opens new window)有多种使用方式, Browserify (opens new window) or Babel (opens new window)。有关使用这些工具的更多信息，请参阅相应项目的文档。在脚本中，包含 zhyz-cloudrender-v5 通常如下所示：
在Node (opens new window)中包含 zhyz-cloudrender-v5 （打开新窗口），首先用 npm 安装。
npm install zhyz-cloudrender-v5
#
<template>
<div id="player">
</div>
</template>
<script>
import cloud from "zhyz-cloudrender-v5/cloudRender.umd";
import { onMounted, onBeforeUnmount } from "vue";
export default {
setup() {
let appliId = "xxxx"; // 云渲染节点中的某个容器的ID
let myhostname = "xxx.xxx.x.xx"; // 云渲染节点的流媒体地址
let paasUrl = "http://xxxx:xxx"; // paas服务对应地址
let protooPort = "xxxx"; // 云渲染节点的流媒体端口
let username = "zhangsan";
let password = "zhangsan_password";
let isReturnNativeResponse = true; //是否返回原生响应头
let isP2p = false;
// 初始化云渲染实例
let Dandelion = new cloud(paasUrl, username, password, appliId, isP2p, isReturnNativeResponse);
onMounted(() => {
// 在页面上显示场景
Dandelion.RtAPI("joinRoom", {
ele: document.querySelector("#player"), //指定的挂载三维场景的页面元素
myhostname,
appliId,
protooPort,
});
onBeforeUnmount(() => {
Dandelion.RtAPI("destroyedP2p");
});
/**
* api调用示例
*/
Dandelion.RtAPI(
"getPoiList",
{
view: false, //true获取视图内，false获取视图外
},
(res) => {
// res 为接口返回数据
}
);
return {};
});
},
};
</script>
# Webpack / Browserify / Babel V5 增强版本
Webpack (opens new window)有多种使用方式, Browserify (opens new window) or Babel (opens new window)。有关使用这些工具的更多信息，请参阅相应项目的文档。在脚本中，包含 zhyz-cloudrender-v5-enhance 通常如下所示：
在Node (opens new window)中包含 zhyz-cloudrender-v5-enhance （打开新窗口），首先用 npm 安装。
npm install zhyz-cloudrender-v5-enhance
#
<template>
<div id="player" class="player"></div>
</template>
<script>
import cloud from "zhyz-cloudrender-v5-enhance/cloudRender.umd";
import { onMounted } from "vue";
export default {
name: "SmartYunZhouRTC",
setup() {
let protooPort = "xxxx"; //云渲染端口
let myhostname = "xxx.xxx.x.xx"; //媒体服务器ip
let appliId = "xx"; //流id
let paasUrl = "http://xxx.xxx.x.xx:xxxx"; //ip
let username = "xxx"; //账号
let password = "xxxx"; //密码
let remoteIp = "xxx.xxx.x.xx"; //鼠标键盘服务的ip
let wsPort = "xxxxx"; // 鼠标键盘服务port
let isClient = false;
let renderWidth = 1920;
let renderHeight = 1040;
// 初始化云渲染实例
let Dandelion = new cloud(
paasUrl,
username,
password,
appliId,
renderWidth,
renderHeight
);
onMounted(() => {
Dandelion.RtAPI(
"joinRoom",
{
element: document.getElementById('player'),// video 标签
myhostname,
protooPort,
remoteIp,
wsPort,
isClient
}
);
/**
* api调用示例
*/
Dandelion.RtAPI(
"getPoiList",
{
view: false, //true获取视图内，false获取视图外
},
(res) => {
// res 为接口返回数据
}
);
});
return {};
},
};
</script>
<style>
.player {
width: 100vw;
height: 100vh;
}
</style>