uniapp微信小程序通过萤石云接入海康摄像机
发布时间
阅读量：
阅读量
需求
通过萤石云平台连接至海康摄像头设备时，请注意不同品牌设备在各自的时间段内可能采用不同的连接方法。为了获取具体的连接信息，请访问官方文档或联系技术支持。
海康摄像机官方客服热线：4008005998
连接方式：官方提供了多种连接方式，在此建议采用"半屏"链接（https://open.ys7.com/help/502）进行接入
操作流程：
- 请先确认该设备不在海康互联、海康云耀以及海康威视等监控管理平台上运行。
- 如已连接，请首先退出当前配置状态。
- 使用萤石云开放平台访问"萤石云视频"应用程序。
- 在通过"萤石云视频"APP添加设备...（选择SIM卡插槽安装）
- 对于采用内置或外置SIM卡的海康威视摄像头，在其摄像头设置中找到并安装SIM卡...（无需验证码完成）
- 在摄像头设置界面中找到相应的选项
- 找到"reset"键并按压以完成重置操作
- 等待系统提示音后完成整个过程
- 操作已完成
代码实现：
将appKey和appSecret分别存储于单独的js文件中使用，在此建议采用第一种导入方式；或者可以直接将它们包含在vue文件内。
@/common/config.js
// 萤石云（https://open.ys7.com/console/application.html）
export const appKey = 'xxx'
export const appSecret = 'xxx'
代码解读摄像机设备列表页
萤石云接口：
- token失效获取：https://open.ys7.com/api/lapp/token/get
- 全部设备信息及序列号可通过该接口获取：https://open.ys7.com/api/lapp/camera/list
- 实时抓拍图像可通过该接口进行捕获：https://open.ys7.com/api/lapp/device/capture
微信小程序半屏跳转：wx.openEmbeddedMiniProgram( )
@/pages/videoSurveillanceList/videoSurveillanceList
<template>
<view class="videoSurveillanceList">
<!-- 设备列表 -->
<view class="container" v-if="equipmentList">
<view class="item" v-for="item in equipmentList" :key="item.deviceSerial">
<view class="item-t" @click="toYXYApplet(item.deviceSerial)">
<image v-if="item.imgUrl" :src="item.imgUrl" mode=""></image>
<image v-else src="@/static/defaule/jk.png" mode=""></image>
</view>
<view class="item-b">
<view class="text">
<view class="">{{ item.channelName }}</view>
<view class="">{{ item.deviceSerial }}</view>
</view>
<view class="icon" @click="open(item.deviceSerial)">
<uni-icons type="more-filled" size="30"></uni-icons>
</view>
</view>
</view>
</view>
<!-- 编辑按钮弹出 -->
<uni-popup ref="popup" type="center">
<view class="popup_content">
<view class="title">{{currentId}}</view>
<view class="popup_item" @click="editName">
<uni-icons type="gear" size="26"></uni-icons>
<text> 修改名称 </text>
</view>
<view class="popup_item" @click="remove">
<uni-icons type="trash" size="26"></uni-icons>
<text> 移除设备 </text>
</view>
</view>
</uni-popup>
<!-- 右下角添加设备按钮 -->
<uni-fab ref="fab" horizontal="right" @fabClick="addEquipment" />
</view>
</template>
<script>
import {appKey, appSecret} from '@/common/config.js'
export default{
data(){
return {
accessTokenObj: uni.getStorageSync("accessTokenObj"),
accessToken: uni.getStorageSync("accessTokenObj").accessToken,
// 需要跳转的半屏小程序的id：萤石云微信小程序id
XYYAppId: 'wxf2b3a0262975d8c2',
equipmentList:[
// {
// // 序列号
// deviceSerial: '',
// // 添加时间
// bindingTime: '',
// // 监控图片（用于展示监控）
// imgUrl: '',
// // 设备名称
// channelName: ''
// },
],
currentId: '',
}
},
mounted(){
uni.removeStorageSync('accessTokenObj');
this.getEquipmentList();
uni.showLoading({
title: '加载中'
});
},
methods:{
open(e) {
this.$refs.popup.open()
this.currentId = e
},
close() {
this.$refs.popup.close()
},
// 修改名称
editName(){
// ...
this.$refs.popup.close()
},
// 删除设备
remove(){
// ...
this.$refs.popup.close()
},
// 添加设备
addEquipment(validateCode='', deviceSerial=''){
...
},
// 更新accessToken
async upToken(){
return new Promise((resolve, reject)=>{
uni.request({
url:'https://open.ys7.com/api/lapp/token/get',
data:{
appKey,
appSecret,
},
method :"POST",
header:{
"Content-Type": "application/x-www-form-urlencoded"
},
success:res=>{
if(res.data?.code==200){
uni.setStorageSync('accessTokenObj', res.data.data)
this.accessTokenObj = res.data.data
this.accessToken = res.data.data.accessToken
resolve('ok');
}else{
uni.showToast({ title: "获取萤石云token失败", icon: "error"})
reject(new Error("获取token失败"));
}
},
fail:err=>{
uni.showToast({ title: "获取萤石云token发生错误", icon: "error"})
reject(new Error("获取token失败"));
}
})
})
},
// 获取设备列表
async getEquipmentList(){
if(!this.accessTokenObj || this.accessTokenObj.expireTime <= Date.now()){
await this.upToken()
}
uni.request({
url:'https://open.ys7.com/api/lapp/camera/list',
data:{
accessToken: this.accessToken,
},
method:'POST',
header:{
"Content-Type": "application/x-www-form-urlencoded"
},
success: (res) => {
if(res.data?.code == 200){
this.getEquipmentsImgs(res.data.data)
}else{
uni.showToast({ title: "请求失败", icon: "none" })
}
},
fail: (err) => {
uni.showToast({ title: "请求错误", icon: "none" })
}
})
},
// 遍历调用reqEquipmentsImg，获取所有设备图片
async getEquipmentsImgs(list){
let newsArr = list.map(async item=>{
return await this.reqEquipmentsImg(item.deviceSerial)
})
await Promise.all(newsArr).then( r =>{
r.forEach((item,i)=>{
if(item.data?.code == 200){
list[i].imgUrl = item.data.data.picUrl
}else{
uni.showToast({ title: "抓拍图请求失败", icon: "none" })
}
})
}).catch( e =>{
uni.showToast({ title: "图片获取失败，请重试", icon: "none" })
})
uni.hideLoading()
this.equipmentList = list
},
// 获取单个设备图片
async reqEquipmentsImg(deviceSerial){
if(!this.accessTokenObj || this.accessTokenObj.expireTime <= Date.now()){
await this.upToken()
}
return await uni.request({
// 图片抓拍
url:'https://open.ys7.com/api/lapp/device/capture',
data:{
deviceSerial,
channelNo: 1,
accessToken: this.accessToken,
},
method:'POST',
header:{
"Content-Type": "application/x-www-form-urlencoded"
}
})
},
// 跳转萤石云小程序
async toYXYApplet(deviceSerial) {
if(!this.accessTokenObj || this.accessTokenObj.expireTime <= Date.now()){
await this.upToken()
}
// #ifdef MP-WEIXIN
wx.openEmbeddedMiniProgram({
appId: this.XYYAppId,
path: '/pages/live/live?accessToken='+ this.accessToken + '&deviceSerial='+ deviceSerial + '&channelNo=1'
})
// #endif
// #ifndef MP-WEIXIN
uni.showToast({
title: "请在微信小程序查看监控",
icon: "none"
})
// #endif
},
}
}
</script>
<style lang="scss" scoped>
.videoSurveillanceList{
width: 100vw;
height: 100vh;
background-color: #f9f9f9;
}
.container{
width: 100vw;
padding: 20rpx;
box-sizing: border-box;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 30rpx;
.item{
height: 392rpx;
border-radius: 20rpx;
overflow: hidden;
background-color: white;
box-shadow: 0 0 10px #d1d1d1;
.item-t{
width: 100%;
height: 300rpx;
image{
width: 100%;
height: 100%;
}
}
.item-b{
padding: 6rpx 10rpx;
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 500;
.text{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.icon{
margin-left: 10rpx;
display: flex;
align-items: center;
padding: 10rpx 4rpx;
}
}
}
}
.popup_content{
padding: 10rpx 0;
font-size: 28rpx;
font-weight: 500;
width: 300rpx;
height: 200rpx;
background-color: #f9f9f9;
border-radius: 20rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.title{
border-bottom: #d1d1d1 1px solid;
width: 100%;
font-weight: 600;
text-align: center;
margin-bottom: 10rpx;
}
.popup_item{
display: flex;
justify-content: center;
align-items: center;
margin:10rpx 0;
text{
padding-left: 10rpx;
}
}
.popup_item:last-child{
margin-bottom: 0;
}
}
</style>
代码解读注释：本文针对萤石云视频APP、萤石云开放平台以及海康摄像机设备等硬件资源，在uniapp技术框架下开发出一个功能模块用于实时监控摄像头图像流并进行相关操作
全部评论 (0)
还没有任何评论哟~