npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@fqbbmnnnnnn/hdy_pixelstream

v1.1.3

Published

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

Downloads

2

Readme

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", // 包的全局变量名,若在浏览器中使用
},
\\\ 其他代码
};
  1. 本项目对于ue的依赖文件做了修改 ,可能跟原始的app.js和webRtcPlayer.js文件有差异。
  2. 暂时为解决画面 黑边问题。