萤石云轻应用在vue2项目中的应用
安装萤石云
npm install ezuikit-js@7.7.7
这里安装的是指定版本的,试过按照官方文档提供的直接install,安装之后项目引入就报错,所以改了版本重新请安装
创建axios请求,请求萤石云接口
在utils文件夹下新建jkRequest.js文件,文件中写入
// http.js
import axios from 'axios';
const jkUrl = 'https://open.ys7.com/api/lapp/'
// 创建axios实例
const service = axios.create({
baseURL: jkUrl, // api的base_url
timeout: 5000 // 请求超时时间
});
// 请求拦截器
service.interceptors.request.use(
config => {
// 可以在这里添加请求头等信息
return config;
},
error => {
// 请求错误处理
console.log(error); // for debug
Promise.reject(error);
}
);
// 响应拦截器
service.interceptors.response.use(
response => {
// 对响应数据做处理,例如只返回data部分
const res = response.data;
return res;
},
error => {
console.log('err' + error); // for debug
return Promise.reject(error);
}
);
export default service;
utils文件夹下新建http.js文件,文件写入
/**** http.js ****/
// 导入封装好的axios实例
import request from './jkRequest'
const http ={
/**
* methods: 请求
* @param url 请求地址
* @param params 请求参数
*/
get(url,params){
const config = {
method: 'get',
url:url
}
if(params) config.params = params
return request(config)
},
post(url,params){
const config = {
method: 'post',
url:url
}
if(params) config.data = params
return request(config)
},
put(url,params){
const config = {
method: 'put',
url:url
}
if(params) config.params = params
return request(config)
},
delete(url,params){
const config = {
method: 'delete',
url:url
}
if(params) config.params = params
return request(config)
}
}
//导出
export default http
在src文件夹中创建api文件夹,api文件夹下创建jkApi.js文件,写入
import http from '../utils/http'
// get请求
export default{
getJkToken(params){
return http.post(`token/get?appKey=${params.appKey}&appSecret=${params.appSecret}`)
},
getJkUrl(params){
return http.post(`v2/live/address/get?accessToken=${params.accessToken}&deviceSerial=${params.deviceSerial}&channelNo=${params.channelNo}`)
},
stopJkPlay(params){
return http.post(`device/ptz/stop?accessToken=${params.accessToken}&deviceSerial=${params.deviceSerial}&channelNo=${params.channelNo}`)
}
}
项目中引入
//template中写入
<div id="ezuikit-player"></div>
//script中写入
import EZUIKit from "ezuikit-js";//引入萤石云轻应用平台
import jkApi from '@/api/jkApi' //引入监控接口api
export default{
data(){
return {
accessToken:'',
cqjkUrl:'',
player:null,
}
},
mounted() {
this.initPlayer()
},
methods:{
//调用轻应用平台停止播放
stopTurn(){
this.player.stop()
},
//初始化萤石云摄像头
initPlayer(){
//请求接口获取token
jkApi.getJkToken({appKey: 'c2ee97d13ed6410a9464dbced81428f5',appSecret:'452483553e9a124f6b29712fe8b18739'}).then((res)=>{
if(res.code == 200){
this.accessToken = res.data.accessToken
// 获取视频Url接口,传入token、序列号、通道号
jkApi.getJkUrl({accessToken:this.accessToken,deviceSerial:'L04067599',channelNo:'6'}).then(res => {
if(res.code == 200){
this.cqjkUrl = res.data.url
// 初始化设备
this.player = new EZUIKit.EZUIKitPlayer({
id: `ezuikit-player`,
url: this.cqjkUrl,
accessToken: this.accessToken,
height:'300',
})
}
})
}else{
console.log('sbzz',132);
}
})
},
},
beforeRouteLeave(to, from, next){
// 导航离开当前路由的时候被调用,在此处调用停止监控的方法
//调用停止监控的方法是因为免费版最高并发路数是3,如果不停止监控来回跳转就会达到并发路数的上限,花钱可能就没有这个烦恼,哈哈哈
this.stopTurn()
next()
},