# zhyz-cloudrender-v4

有关如何使用 zhyz-cloudrender-v4 的信息，请参阅文档文档 (opens new window)。有关源文件和问题，请访问存储库 repo (opens new window).

# 包括 zyz-cloudrender

以下是包含 zhyz-cloudrender-v4 的一些最常见方法。

# Browser

# 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>

# Webpack / Browserify / Babel V4版本

Webpack (opens new window)有多种使用方式, Browserify (opens new window) or Babel (opens new window)。

在Node (opens new window)中包含 zhyz-cloudrender-v4 （打开新窗口），首先用 npm 安装。

cnpm 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)。

在Node (opens new window)中包含 zhyz-cloudrender-v5 （打开新窗口），首先用 npm 安装。

cnpm 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>