接入萤石云的踩坑问题

在引入萤石云的时候遇到好几个问题,给大家讲讲我怎么用的大家跟着我做,根据需求自己改动,应该都不会有什么问题
环境 vue2 我做的监控模式 模式不一样萤石云api需要传入的地址格式也是不一样的

萤石云官方文档提供两种引入方式
第一种通过npm 引入 $ npm install ezuikit-js -S

第二种下载萤石云的包本地引入https://open.ys7.com/mobile/download.html (这是萤石云官网可自行下载)
在index.html文件里面引入<scriptsrc="./static/lib/ezuikit/ezuikit.js">
在这里插入图片描述这是我从萤石云下载解压的,项目除了要引入ezukit.js这个包,还要把图片里的js文件夹放在与项目中ezukit.js同级目录中。
上面就是两种萤石云的
引入方式,下面讲解实现代码
引入后在任意页面中这么写

html结构
在这里插入图片描述

数据
player: null,
token: null,

js代码
if (this.first !== false) {
this.player = new EZUIPlayer({
id: “video-container”, // 视频容器ID
accessToken: this.token,
url: this.url,
decoderPath: “…/…/…/…/…/…/…/static/lib/ezuikit”,
width: 400,
height: 250,
splitBasis: 1,
});
this.player.play();
} else {
this.player.play({url:this.url,accessToken: this.token});
}
我这里是if里面的逻辑是 是否第一次进入监控模块 是就正常new实例 不是就切换播放地址 不管第一次或不是 都要传token进去(直播模式不需要)
这里我之前是直接写if里面的代码,没有写else的代码。发现每次进入一次监控模块,监控窗口会累加,所以加了if else这么写 要切换视频得这么写
注意事项 这个摄像头是否有加密 有的话需要把解密码加在地址中才能播放 我这里是后端返回的地址中已经有解密码了,大家需要拼接的话可以查看萤石云官网
decoderPath这个参数值是ezuikit.js包所在的目录,之前百度也看有人说这是服务器地址 那我这里就是 http://8080/static/lib/ezuikit"但是我这里写本地路径也没问题,大家自行选择。
在这里插入图片描述
decoderPath这个参数应该就是我图片里面这个参数(ezuikit.js源码)
大家搜索jsPluginPath应该能找到这段代码
我上面不是说第二个引入方式有个js包和ezuikit.js同级别吗,就和源码这个我圈起来的代码是正确对应的路径

最后监控模块退出时,暂停这个监控
this.player.stop().then(() => {});

因为每人的开发环境不一样,所以我只写了我的思路和大概代码 大家复制我的代码不能直接用 (判断是否第一次进入监控模块代码没全部放到文章里) 这个大家仔细阅读后根据自己需求改一下就可以了

大家有问题也可以登录https://open.ys7.com/mobile/download.html?type=app萤石云官网 点 创建应用 里面去创建工单 询问萤石云官方人员 回复速度都还不错得

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值