iver-pix

像素流模块

安装

npm install --save iver-pix

介绍

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, jsondata, callback }: { ... }) { ... }
  // 发送send请求并返回Promise的方法
  sendAsync({ action, jsondata }: { ... }): 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,
  }

使用示例

npm create vue@latest   //创建一个vue脚手架【默认安装即可】
npm i   //安装依赖
npm install --save iver-pix   //安装像素流模块

//------------------------vue-js引入------------------------
//删除 /src/App.vue默认代码
//复制如下代码↓↓↓
<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", jsondata:string|object|arrary}，要实现具体功能，send方法需要传递的参数参照调用文档

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

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

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

<style></style>

//在vue-project目录下执行
npm run dev

启动成功后运行
http://localhost:5173/

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

import CloudStream from "iver-pix";
const cloudStream = ref<CloudStream | null>(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", jsondata:string|object|arrary}，要实现具体功能，send方法需要传递的参数参照调用文档

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

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

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

//------------------------html原生引入------------------------
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 检查引用路径 -->
    <script src="./cloudstream.js"></script>
    <script>
      window.onload = function () {
        const cloudStream = CloudStream.Create({
          wsPath: "127.0.0.1:88",
        });
        cloudStream.beginPlay(() => {
          console.log("开始渲染");
        });
      };
    </script>
  </head>
  <body></body>
</html>

更多

....