@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()
注意:
- Pixelstream 类的传参依照原有前海 cim 项目中 loadUe 的传参,分别为 addr,isDirect,useHttps,> callback
- 若不考虑 ue 套前端的连接方式可去掉 isDirect 参数
- addr 参数参考前海 cim 的获取 addr 方式,前端自行通过后台接口获取 ue 像素流地址,这里跟 sdk 解耦合,作为前端内容考虑。
- 若不需要使用回调函数,可将回调函数参数置为 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扩展开发
- 参考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方法。
}
- 子类编写完成后,在项目根目录的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);
}
///其他代码
其他
- 本项目由rollup打包,生成的压缩文件地址为:uesdk\dist\Pixelstream.js
- 在.npmignore文件中可以设置不需要发布到npm的文件,例如moduls、ue、utils、index.js等,保护代码安全。发布时只需要dist文件夹以及pacakge.json、readme.md即可。
- 如果前端使用方式为script标签引用dist文件夹下的压缩文件。对外暴露的类名可以在rollup.config.js中修改,例如:
export default {
\\\ 其他代码
output: {
file: "dist/Pixelstream.js", // 输出文件路径和名字
format: "umd", // 通用模块定义,适用于客户端和服务器
name: "Pixelstream", // 包的全局变量名,若在浏览器中使用
},
\\\ 其他代码
};
- 本项目对于ue的依赖文件做了修改 ,可能跟原始的app.js和webRtcPlayer.js文件有差异。
- 暂时为解决画面 黑边问题。