uniapp微信小程序通过萤石云接入海康摄像机

已于 2024-05-15 16:16:03 修改
阅读量1.2k 收藏 9
点赞数 3
文章标签： uni-app 微信小程序
于 2024-05-15 15:31:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chen_jigang/article/details/138910195
版权

需求：在uniapp微信小程序上查看海康威视的摄像机监控视频和和操作摄像机拍摄方向

在萤石云接入海康摄像机设备，由于不同品牌设备在不同时间段接入方式可能不一致，具体接入方式查看官方文档或咨询官方客服。

海康摄像机官方客服热线：4008005998

接入方式：官方提供多种接入方式，在此选择通过“半屏”（https://open.ys7.com/help/502）接入

操作流程：

  • 先确保该设备未在海康互联、海康云耀、海康威视等平台接入。如有接入，请先退出。确保该设备已购买流量套餐。
  • 萤石云开放平台：注册平台账号并创建好应用，https://open.ys7.com/console/application.html
  • “萤石云视频”APP：在通过“萤石云视频”APP，添加设备，扫描摄像机底部专属二维码或输入设备序列号，根据提示的步骤操作…（选择SIM设备添加，无需验证码）
  • 海康威视摄像机：在摄像机摄像头的安置SIM卡的地方（该款摄像机提供内置和外置SIM卡），扭开螺丝钉，找到“reset”键，接通电源，按下重置键，等待摄像机提示“等待注册平台”等提示音…
  • 接入完毕

在这里插入图片描述
在这里插入图片描述

代码实现：

单独js文件存放萤石云appKey和appSecret，也可直接写在vue文件中，在此选择第一种js导入方式

@/common/config.js

// 萤石云（https://open.ys7.com/console/application.html）
export const appKey = 'xxx'

export const appSecret = 'xxx'

摄像机设备列表页

萤石云接口：

  • accessToken过期获取：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，简略实现了uniapp微信小程序查看海康摄像机监控视频和操作摄像机拍摄方向
在这里插入图片描述
在这里插入图片描述

年纪轻轻只想躺平
关注
  • 3
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序摄像头监控_微信小程序对接串口摄像头
weixin_42347739的博客
12-24 1912
#_*_ coding:utf-8importserialimporttimeimporttracebackimportpycurlimportrequestsimportioimportjsonimportbase64ser= serial.Serial("/dev/ttyAMA0",115200)print(ser.name)print(ser.port)f=Nonedefmain():pri...
微信小程序接入海康威视萤石云直播，字节跳动前端高级工程师
2401_83739503的博客
03-31 1065
萤石云开放平台微信开发者工具在mpvue中，采用vue语法嵌入video组件，并将HLS地址写入src中。
WeChat-miniApp:微信小程序接入平台设备视频预览，直播，回放（敬请期待）及其示例demo
05-11
1. 用户指南 萤石云开放平台小程序（以下简称：萤石云小程序）为您提供设备预览、回放及设备能力体验，您可以快速体验设备预览、设备回放功能。同时，小程序还开放了视频取流SDK。如果您没有萤石开放平台账号或海康/萤石设备，也可体验我们提供的试用设备。 1.1 微信搜索进入小程序 1、微信搜索“萤石云开放平台”小程序。 2、点击“萤石云开放平台”，进入萤石云小程序首页。 1.2 自助设备播放 如果您拥有萤石开放平台账号和萤石/海康设备，可自助进行您账号下设备直播和设备回放。（如果您还没有萤石/海康设备，您可以体验试用设备播放，参考1.3） 自助进行账号下设备直播和回放需将您的设备绑定到您的萤石开放平台账号下，这一步您可以参考 。 1.2.1 自助设备直播 1、进入萤石云小程序首页，单击 「设用设备」，进入试用设备页，单击 「自助设备」 按钮。 2、根据提示填写您的账号信息和设备信息。您可登录
微信小程序接入海康威视萤石云直播
热门推荐
大家好，我是 ed.
04-13 1万+
微信小程序接入海康威视萤石云直播 微信小程序中播放海康萤石云HLS '.m3u8’视频 video标签 因为项目需要在微信小程序上展示实时视频流信息，以下内容是我将萤石云平台官方文档和自己实践过程中遇到的问题的总结。官方文档地址：https://open.ys7.com/doc/zh/book/index/live_proto.html 萤石云开放平台 按照萤石摄像机官方携带的说明书进行注册...
uniapp微信小程序接入萤石云监控
最新发布
weixin_52830464的博客
05-29 1081
本文可参考以及登录您的小程序微信公众平台，点击左侧菜单栏，进入设置页，在第三方设置->插件管理->添加插件 中申请ezplayer插件，申请的插件appId为【wxf2b3a0262975d8c2】。
uniapp对接萤石云 实现监控播放、云台控制、截图、录像、历史映像等功能
weixin_52479803的博客
03-28 2271
uniapp对接萤石云 实现监控播放、云台控制、截图、录像、历史映像等功能
微信小程序对接萤石云开发平台
weixin_45956954的博客
12-07 1811
微信小程序对接萤石云视频
一个视频监控的小程序
11-19
一个还不错的视频监控的小程序，主要是MFC，大家可以去参考下吧 对于初学者来说还是有一定作用的
微信小程序摄像头监控_Fundebug微信小程序BUG监控服务支持Source Map
weixin_39973492的博客
12-25 263
摘要： 自动还原真实出错位置，快速修复BUG。Source Map功能微信小程序的Source Map功能目前只在 iOS 6.7.2 及以上版本支持。微信小程序在打包时，会将所有 js 代码打包成一个文件，从而减少体积，加快访问速度。然而，压缩代码的错误是很难Debug的，因为错误位置是这样的:文件：app-service.js行号：13782列号：7974这时，错误的位置信息(文件，行号和列号...
简易摄像头报警监控小程序
06-15
能够实现简单的摄像头照相，录像及报警功能
小程序控制萤石摄像头源码开发版.zip
12-28
小程序控制萤石摄像头源码开发版.zip
JS实现监控微信小程序的原理
01-03
原理 之前也做过浏览器web端的SDK数据埋点上报，其实原理大同小异：通过劫持原始方法，获取需要上报的数据，最后再执行原始方法，这样就能实现无痕埋点。 举个例子：我希望监控所有web页面的ajax请求，每次发送ajax，都需要在控制台打印出发送的url 平时我们开发，发送ajax一般用的都是封装好的库，例如jQuery,Axios等，然而这些库，底层仍然用的是浏览器原生的XMLHttpRequest对象，因此，我们只需要修改XMLHttpRequest对象即可 注意：由于JS的灵活性，修改原生方法是一件很容易的事，然而并不鼓励这样做！ // 把这段代码放在所有JS代码之前，我们就实现了拦截a
海康威视安卓端 sdk（非萤石云）
01-10
海康威视安卓端sdk视频预览（非萤石云），可以预览视频与控制，语音对讲等
C#接入大华海康摄像机实现人数统计
02-04
接入大华海康摄像机设备登录、设备登出、打开实时预览、关闭实时预览、订阅事件、取消订阅事件、显示上报的人员进去信息、清空当天的人数统计信息。 【接口列表】 NETClient.Init SDK初始化 ...
萤石云播放海康摄像头
12-12
萤石云播放海康摄像头是基于云计算技术的一种远程视频监控解决方案，主要应用于工地、家庭、商铺等场景，便于用户随时随地查看实时监控画面。这个系统整合了海康威视的硬件设备与萤石云服务平台，提供了稳定且高效的...
萤石摄像头接录像机(NVR).md
10-08
萤石云官方发布：2021年4月后，萤石摄像头不可以接入海康录像机（NVR）及 4200平台等视频管理系统，即逼用户上萤石云收费，这是一种商业模式，用户只能吐槽，无法更改现状。 本方案解决上述的问题，包括最新版的萤石...
海康官方DS-8800系列支持萤石云升级程序包
12-02
DS-7804H-SNH DS-7804HW-SNH DS-7804HW-SL DS-7804HW-SH DS-7904HF-SH DS-7904HW-SH DS-8804H-SH DS-8804HW-SH DS-7808H-SNH DS-7816H-SNH DS-7816H-SL DS-7808H-SLT DS-7816H-SLT ...DS-7932HW-E4
uni-app开发微信小程序 web-view通讯
小混子得得的博客
08-04 1254
h5通讯uni-app微信小程序，web-view页面嵌套h5打开其他小程序。
uniapp开发微信小程序页面调用海康openapi
05-30
要在uniapp中开发微信小程序页面调用海康openapi，可以参考以下步骤： 1. 在微信公众平台注册小程序并获取到小程序的AppID。 2. 在海康威视官网注册账号并获取到openapi的AppKey和AppSecret。 3. 在uniapp中安装uni-request插件，并在小程序的main.js文件中进行引入和配置。 4. 在需要调用openapi的页面中，使用uni.request方法发起请求，并传入openapi的接口地址和相关参数，如下所示： ```javascript uni.request({ url: 'https://open.ys7.com/api/lapp/token/get', //openapi接口地址 method: 'POST', data: { appKey: 'yourAppKey', //海康开放平台分配的AppKey appSecret: 'yourAppSecret' //海康开放平台分配的AppSecret }, success: (res) => { console.log(res.data) }, fail: (err) => { console.log(err) } }) ``` 需要注意的是，openapi的调用需要进行身份验证，因此需要传入AppKey和AppSecret。另外，openapi的接口地址和参数需要根据具体的需求进行调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值