<!-- vue-js引入 -->

<template>
<!-- <a href="javascript:void(0)" @click="handleClick()">发送消息1</a>&nbsp;
<a href="javascript:void(0)" @click="handleClickAsync()">发送消息2</a> -->
</template>
<script setup>
import { onMounted, ref } from "vue";

import CloudStream from "iver-pix";
const cloudStream = ref(null);

onMounted(() => {
//创建渲染-执行该方法，就能将ue引入到网页-其他方法按需求调用
cloudStream.value = CloudStream.Create({
  wsPath: "127.0.0.1:88", //通信和信令服务器通信的sokect地址 -不填默认为127.0.0.1:88
});

// //监听虚幻引擎发送给web的消息-为固定格式{ cloud: "cloudName", data: string|object|arrary, ... };
// cloudStream.value.listener((res) => {
//   //通过虚幻引擎给定的cloud值判断- 【依照具体需求】
//   switch (res.cloud) {
//     case "cloudName1":
//       console.log(res);
//       break;
//     case "cloudName2":
//       console.log(res);
//       break;
//     default:
//       console.log(res);
//   }
// });

// //监听渲染是否完成
// cloudStream.value.beginPlay(() => {
//   console.log("开始渲染");
// });
});

// function handleClick() {
//   //web向虚幻引擎发送消息为固定格式：{ action: "actionName", data:string|object|arrary}，要实现具体功能，send方法需要传递的参数参照调用文档

//   //向虚幻引擎发送消息，不需要接收虚幻引擎返回消息-按需求使用
//   cloudStream.value.send({
//     action: "actionName1",
//     data: { id: 1 },
//   });

//   // //向虚幻引擎发送消息，需要异步接收虚幻引擎返回消息-按需求使用
//   // cloudStream.value.send({
//   //   action: "actionName2",
//   //   data: { id: 2 },
//   //   callback(result) {
//   //     console.log(result);
//   //   },
//   // });
// }

// async function handleClickAsync() {
//   //sendAsync同send功能一样，将send封装成了Promise
//   const result = await cloudStream.value.sendAsync({
//     action: "actionName3",
//     data: { id: 3 },
//   });
//   console.log(result);
// }
</script>
<style></style>

class CloudStream {
  // 类的静态属性
  public static instance: CloudStream | null;
  // 公共静态方法，用于获取类的单一实例
  public static Create(options?: { ... }): CloudStream { ... }
  // 监听特定ue消息的方法
  listener(callback: (res: { cloud: string; data: any }) => void, sendName: string = "cloud") { ... }
  // 开始播放
  beginPlay(callback: () => void) { ... }
  // 发送send请求的方法
  send({ action, data, callback }: { ... }) { ... }
  // 发送send请求并返回Promise的方法
  sendAsync({ action, data }: { ... }): Promise<any> { ... }
  // 释放资源-即销毁
  dispose() { ... }
}

Create(options?: {
    wsPath?: string; //与服务器的sokect通信地址
    //显示样式 因为像素推流默认会推送16：9，当然这个因需求而定，所以适配需求和各类设备设置了三种样式。
    //fit：将16：9【或其他比例】的流送按照浏览器的宽和高拉伸显示，
    //cutFit：在浏览器视口保持16：9【或其他比例】最大范围的保证流送完整显示。流送为主。
    //maxFit：保持浏览器视口宽高显示流送。浏览器为主。
    viewType?: "fit" | "cutFit" | "maxFit";
    isBorder?: boolean; //显示border,调试时可开启
    zIndex?: number;
    rateWidth?: number;
    rateHeight?: number;
  })
  default option {
    wsPath = "127.0.0.1:88",
    viewType = "cutFit",
    isBorder = false,
    zIndex = -1,
    rateWidth = 16,
    rateHeight = 9,
  }