1.1.1 • Published 1 month ago

@fqbbmnnnnnn/hdy_pixelstream v1.1.1

Weekly downloads
-
License
ISC
Repository
-
Last release
1 month ago

npm 包名为:@fqbbmnnnnnn/hdy_pixelstream

修改方式:修改 package.json 文件中的 name 字段,再登录 npm 账号重新发布即可。

下载方式

npm install @fqbbmnnnnnn/hdy_pixelstream
//或
yarn add @fqbbmnnnnnn/hdy_pixelstream

使用方式

<!-- 前端像素流初始化参考 -->

<!-- 连接像素流 -->
import Pixelstream from "@fqbbmnnnnnn/hdy_pixelstream";

//在页面dom加载完成之后进行初始化
//自行决定是否需要将实例化对象存放在window上,还是其他位置方便全局使用即可。
window.Ps = new Pixelstream("61.241.66.125:33042", false, false, (data)=>{
      console.log("connectUE", data);
    });
//初始化完成后,调用connect方法即可,连接视频流
Ps.connect();

<!-- 关闭像素流 -->
Ps.disconnect()

注意:

  1. Pixelstream 类的传参依照原有前海 cim 项目中 loadUe 的传参,分别为 addr,isDirect,useHttps,> callback
  2. 若不考虑 ue 套前端的连接方式可去掉 isDirect 参数
  3. addr 参数参考前海 cim 的获取 addr 方式,前端自行通过后台接口获取 ue 像素流地址,这里跟 sdk 解耦合,作为前端内容考虑。
  4. 若不需要使用回调函数,可将回调函数参数置为 null 即可。
<!-- 子类使用参考 -->

<!-- Camera子类的使用方式 -->
Ps.Camera.PlayRoaming({data,callback})

<!-- 示例参考 -->
Ps.Camera.PlayRoaming({
        RoamingPath:[
        {
                Location : {X:0.0,Y:0.0,Z:1000.0},
                Rotation : {Pitch:0.0,Yaw:0.0,Roll:0.0},
                Time     : 5.0
        },
        {
                Location : {X:1000.0,Y:1000,Z:1000.0},
                Rotation : {Pitch:0.0,Yaw:20,Roll:0.0},
                Time         : 5.0
        },
        {
                Location : {X:0.0,Y:0.0,Z:2000.0},
                Rotation : {Pitch:0.0,Yaw:0.0,Roll:0.0},
                Time         : 5.0
        },
        ]
},(res)=>{
  console.log('PlayRoamingcb',res)
})

<!-- 源码地址 -->
uesdk\modules\Camera\index.js

sdk扩展开发

  1. 参考Camera子类,在modules下添加新的子类文件夹以及index.js文件,子类的方法根据需求填写在index.js文件中或新增额外js文件引入到index.js中。
<!-- Camera子类文件 -->
export default class {
  constructor(send2Ue, listen2Ue) {
    this.send2Ue = send2Ue;
    this.listen2Ue = listen2Ue;
    <!-- 配置子类的cmd根路径 -->
    this.baseCmd = "/CameraManager";
  }
  /**
   * @description: 播放漫游数据
   * @param {*} data
   * @param {*} cb
   * @return {*}
   */  
  PlayRoaming(data, cb) {
    // 监听结束漫游回调,作为播放漫游的回调
    this.listen2Ue(`${this.baseCmd}/EndRoaming`, cb);
    // 发送播放漫游指令
    this.send2Ue(`${this.baseCmd}/PlayRoaming`, data);
  }
  <!-- PlayRoaming方法需要特别注意 -->
  // 当存在PlayRoaming和EndRoaming分别作为cmd子路径,一个为发送指令另一个为监听指令,这里可以按照示例合并为一个整体的方法,传入的data和callback分别对应去注册send2Ue和listen2Ue。对外只暴露PlayRoaming方法。
}
  1. 子类编写完成后,在项目根目录的index.js文件中引入子类,并在connect方法中注册子类,确保send2Ue和listen2Ue方法已经生效并传入子类的实例化对象即可。
<!-- 主文件index.js -->

    ///其他代码
  connect() {
    loadUE(this.url, this.isDirect, this.usehttps, this.callback);
    const { send2Ue, listen2Ue, clearMsgCb } = useUemsg(
      emitUIInteraction,
      addResponseEventListener
    );
    this.clearMsgCb = clearMsgCb;
    this.send2Ue = send2Ue;
    this.listen2Ue = listen2Ue;

    //子类注册
    // // 在连接成功后,注册子类,传入send2Ue和listen2Ue方法作为消息接发的入口。
    this.Gls = new Gls(send2Ue, listen2Ue);
    this.Camera = new Camera(send2Ue, listen2Ue);
  }

    ///其他代码

其他

  1. 本项目由rollup打包,生成的压缩文件地址为:uesdk\dist\Pixelstream.js
  2. 在.npmignore文件中可以设置不需要发布到npm的文件,例如moduls、ue、utils、index.js等,保护代码安全。发布时只需要dist文件夹以及pacakge.json、readme.md即可。
  3. 如果前端使用方式为script标签引用dist文件夹下的压缩文件。对外暴露的类名可以在rollup.config.js中修改,例如:
    export default {
    \\\ 其他代码
    output: {
      file: "dist/Pixelstream.js", // 输出文件路径和名字
      format: "umd", // 通用模块定义,适用于客户端和服务器
      name: "Pixelstream", // 包的全局变量名,若在浏览器中使用
    },
    \\\ 其他代码
    };
 4. 本项目对于ue的依赖文件做了修改 ,可能跟原始的app.js和webRtcPlayer.js文件有差异。
 5. 暂时为解决画面 黑边问题。
1.1.1

1 month ago

1.1.0

2 months ago

1.0.3

2 months ago

1.0.2

2 months ago

1.0.1

2 months ago

1.0.0

2 months ago