hikvision 模块测试 demo

杨愿 · *发表于 2020-11-10 15:14:37*

有业务，对接萤石云的监控设备，所以在模块库里测试了一下这个模块备用qrcode（），和 pause（）方法没有写。
在config.xml配置好这些

<feature name="hikvision">
<param name="appKey" value="26810f3acd794862b608b6cfbc32a6b8" />
</feature>

复制代码

整体页面代码如下，

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>测试萤石视频监控</title>
<link rel="stylesheet" href="https://cdn**.**/npm/vant@2.10/lib/index.css" />
<style type="text/css">
html,
body {
height: 100%;
background-color: #f5f5f5;
-webkit-overflow-scrolling: touch;
}
#wrap {
height: 100%;
}
#main {
overflow: auto;
}
.flex-wrap {
display: -webkit-box;
display: -webkit-flex;
display: flex;
}
.flex-con {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
}
.flex-vertical {
-webkit-box-orient: vertical;
-webkit-flex-flow: column;
flex-flow: column;
}
.van-nav-bar {
background-color: #13227a;
}
.van-nav-bar__text:active {
background-color: #13227a;
color: #C1C3C5;
}
.van-nav-bar__title,
.van-nav-bar .van-icon,
.van-nav-bar__text {
color: #FFFFFF;
}
.van-nav-bar__left,
.van-nav-bar__right {
align-items: flex-end;
bottom: 1rem;
}
.center {
text-align: center;
}
[v-cloak] {
display: none;
}
.van-button {
margin: 5px 0;
}
</style>
</head>
<body>
<div id="wrap" class="flex-wrap flex-vertical" v-cloak>
<van-nav-bar id="header" title="测试萤石视频监控" :border="false"></van-nav-bar>
<div id="main" class="flex-con"></div>
<van-row :gutter="20" style="width: calc(100% - 20px);margin: 0 auto;">
<van-col span="12">
<van-button block type="primary" @click="open">open</van-button>
</van-col>
<van-col span="12">
<van-button block type="danger" @click="close">close</van-button>
</van-col>
<van-col span="12">
<van-button block type="primary" @click="start">start</van-button>
</van-col>
<van-col span="12">
<van-button block type="danger" @click="stop">stop</van-button>
</van-col>
<van-col span="12">
<van-button block type="primary" @click="show">show</van-button>
</van-col>
<van-col span="12">
<van-button block type="danger" @click="hide">hide</van-button>
</van-col>
</van-row>
</div>
</body>
<script type="text/javascript" src="./script/api.js"></script>
<script src="https://cdn**.**/npm/vue@2.6/dist/vue.min.js"></script>
<script src="https://cdn**.**/npm/vant@2.10/lib/vant.min.js"></script>
<script type="text/javascript">
new Vue({
el: '#wrap',
mounted() {
apiready = function() {
$api.fixStatusBar($api.byId('header')) // 沉浸式
hikvision = api.require('hikvision');
}
},
methods: {
toast(msg) {
api.toast({
msg: msg,
duration: 2000,
location: 'bottom'
});
},
open() {
var offset = $api.offset($api.byId('main'));
var params = {
accessToken: 'ra.65xkz22b0bp6xex24l61s2np3hnp1cv4-8oi40mvxxd-1qae9is-vlahjlovm',
url: 'ezopen://open**.**/203751922/1.hd.live',
rect: {
x: offset.l, //（可选项）数字类型；播放画面 x 坐标（相对于所属的 Window 或 Frame）；默认值：0
y: offset.t, //（可选项）数字类型；播放画面 y 坐标（相对于所属的 Window 或 Frame）；默认值：0
w: offset.w, //（可选项）数字类型；播放画面宽（相对于所属的 Window 或 Frame）；默认值：屏幕宽度
h: offset.h, //（可选项）数字类型；播放画面高（相对于所属的 Window 或 Frame）；默认值：300
},
isProgress: true
};
var _this = this
hikvision.open(params, function(ret, err) {
if (ret.status) {
_this.toast('打开成功')
} else {
_this.toast(JSON.stringify(err));
}
});
},
start() {
hikvision.start();
this.toast('开始播放');
},
close() {
hikvision.close();
this.toast('关闭播放器');
},
show() {
hikvision.show();
this.toast('显示');
},
hide() {
hikvision.hide();
this.toast('隐藏');
},
stop() {
hikvision.stop();
this.toast('停止播放');
}
}
})
</script>
</html>

复制代码

技术咨询-F · 回复于2020-11-19 16:52:58

有新模块ezopen