在vue项目中实现海康威视IOT云眸平台（实时和回放）

上次我们已经提到海康ISC平台的应用，详见在vue项目中实现海康威视ISC平台（实时和回放） 这次记录下海康云眸平台的应用，风格与上一篇文章保持一致，方便食用。

环境

先下载安装海康插件HikOpenServicePlugin.exe

代码分享

index.html

<!-- 海康威视iot插件 --> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js"></script> <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

视频组件

也是将IOT的视频模块单独做成一个组件，以后可以按需加入不同项目。（以实时为例，回放同理）

<template> <div> <div id="playWnd" style="width: 700px;height:500px;"></div> </div> </template> <script> export default { data() { return { oWebControl: null, myAxios: axios.create({ timeout: 20000, withCredentials: true, transformRequest: [ function(data) { let ret = ""; for (let i in data) { ret += encodeURIComponent(i) + "=" + encodeURIComponent(data[i]) + "&"; } return ret; } ] }), client_id: "XXXXXXXXX", client_secret: "XXXXXXXXX", accessToken: "", switchVideo: 0, // 0实时预览 1录像回放 appKey: "", token: "", callbackMessage: "", //显示回调信息 tips: "调用成功", successTip: false, tipsShow: false, IOTPlayData: "" }; }, props: ["IOTdata"], created() {}, mounted() { this.oWebControl = this.WebControlInit( "playWnd", this.cbConnectSuccess, this.cbConnectError, this.cbConnectClose ); }, beforeDestroy() { try { this.oWebControl.JS_HideWnd(); this.WebControlDistory(); } catch (error) { console.error(error); } }, watch: { IOTdata: function(newVal, oldVal) { this.IOTPlayData = newVal; this.playVideo(); } }, methods: { /** * 获取accessToken */ getAccessToken() { this.myAxios .post("/test/api/oauth/token", { client_secret: this.client_secret, client_id: this.client_id, grant_type: "client_credentials", scope: "" }) .then(response => { this.accessToken = response.data.access_token; this.getVideoToken(); }) .catch(function(error) { console.log(error); }); }, /** * 获取萤石token */ getVideoToken() { this.myAxios({ url: "/test/api/v1/ezviz/account/info", method: "get", headers: { Authorization: "Bearer " + this.accessToken } }) .then(response => { let data = response.data.data; this.textarea = "appKey: " + data.appKey + ",\n" + "token: " + data.token; this.appKey = data.appKey; this.token = data.token; this.showTips(true, response.data.message); this.initVideo(); }) .catch(error => { console.log(error); this.showTips(false, response.data.message); }); }, WebControlInit(id, cbConnectSuccess, cbConnectError, cbConnectClose) { return new WebControl({ szPluginContainer: id, iServicePortStart: 14550, // 对应 LocalServiceConfig.xml 中的ServicePortStart值 iServicePortEnd: 14559, // 对应 LocalServiceConfig.xml 中的ServicePortEnd值 cbConnectSuccess, cbConnectError, cbConnectClose }); }, // 监听视频控件的事件 cbIntegrationCallBack(oData) { console.log(oData.responseMsg); if (oData.responseMsg.eventName === "FireInitResult") { // 初始化事件 } else if (oData.responseMsg.eventName === "FireTransFunction") { let requestObj = oData.responseMsg.arguments.request; console.log(requestObj, "requestObj"); let { url, method, body } = requestObj; let params = {}; let data = {}; method.toLowerCase() === "get" ? (params = body) : (data = body); this.myAxios({ url: "/test/api/v1" + url, method: method.toLowerCase(), headers: { Authorization: "Bearer " + this.accessToken }, params, data }).then(res => { let argumentsD = { request: requestObj, response: res }; oWebControl .JS_RequestInterface({ funcName: "TransFunctionResult", argumentsD }) .then(oData => { console.log(oData); }); }); } }, cbConnectSuccess() { // 设置窗口控制回调 this.oWebControl.JS_SetWindowControlCallback({ cbIntegrationCallBack: this.cbIntegrationCallBack }); //创建视频窗口 this.oWebControl .JS_StartService("window", { dllPath: "./chain/cloudTransform.dll" }) .then(() => { this.oWebControl .JS_CreateWnd("playWnd", 700, 500) .then(() => { console.log("JS_CreateWnd success"); this.getAccessToken(); }) .catch(err => { console.log(err); }); }); }, cbConnectError() { console.log("cbConnectError"); this.oWebControl = null; console.error("确认本地进程是否已安装并开启成功！"); }, cbConnectClose(bNormalClose) { // 连接异常断开：bNormalClose = false // JS_Disconnect正常断开：bNormalClose = true console.log("cbConnectClose"); this.oWebControl = null; }, //销毁视频控件 WebControlDistory() { // var bIE = !!window.ActiveXObject || 'ActiveXObject' in window // 是否为IE浏览器 if (this.oWebControl != null) { this.oWebControl.JS_DestroyWnd().then( function() { console.log("JS_DestroyWnd"); }, function() {} ); this.oWebControl.JS_StopService("window").then(()=> { this.oWebControl.JS_Disconnect().then( function() { console.log("JS_Disconnect"); }, function() {} ); }); } }, /** * 设置视频初始化参数 */ initVideo() { if (this.oWebControl) { let initJson = { funcName: "Init", arguments: { type: "chain", initModel: 0, response: {} } }; initJson.arguments.response.data = { appKey: this.appKey, ezvizToken: this.token, videoLevel: 0, uploadUrl: "uploadUrl", accessKeyId: "accessKeyId", accessKeySecret: "accessKeySecret", accessToken: "accessToken", bucket: "bucket", object: "object" }; initJson.arguments = encodeURI(JSON.stringify(initJson.arguments)); this.oWebControl .JS_RequestInterface(initJson) .then(oData => { this.showCBInfo(oData.responseMsg); this.showTips(true, "视频初始化成功！"); }) .catch(err => { console.log(err); }); } }, /** * 播放门店视频 */ playVideo() { let data = null; data = this.IOTPlayData; this.oWebControl .JS_RequestInterface({ funcName: "StartPreview", arguments: encodeURI( JSON.stringify({ response: { code: 0, message: null, data: data } }) ) }) .then(oData => { console.log(JSON.stringify(oData.responseMsg)); this.showCBInfo(oData.responseMsg); }) .catch(err => { console.log(err); }); }, /** * 设置事件回调信息 */ showCBInfo(message) { this.callbackMessage = this.callbackMessage + JSON.stringify(message) + "\n"; }, showTips(status, message) { let self = this; this.successTip = status; this.tips = message; this.tipsShow = true; setTimeout(() => { self.tipsShow = false; }, 1000); } } }; </script>

需要注意的是，不能只取最后需要的appkey和token，所有包括accessToken都必须由前端去获取。否则eventName会一直是FireInitResult，进不了下一步，也无法显示图像。

成果

根据左侧生成的摄像头设备树，点击去获取设备的信息，并且需要对传入的data进行如下的格式处理： 将数据传入data。

这样就可以看到摄像头画面了！