# Webpack / Browserify / Babel V5 版本 (paas 5.2.4之前版本)
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 增强版本 (paas 5.2.4之后版本，包含5.2.4)
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>
# 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>