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()
  },