在引入萤石云的时候遇到好几个问题,给大家讲讲我怎么用的大家跟着我做,根据需求自己改动,应该都不会有什么问题
环境 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萤石云官网 点 创建应用 里面去创建工单 询问萤石云官方人员 回复速度都还不错得