需求：在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：螢石云微信小程序idXYYAppId: '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=''){...},// 更新accessTokenasync 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.datathis.accessToken = res.data.data.accessTokenresolve('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-WEIXINwx.openEmbeddedMiniProgram({appId: this.XYYAppId,path: '/pages/live/live?accessToken='+ this.accessToken +  '&deviceSerial='+ deviceSerial + '&channelNo=1'})// #endif// #ifndef MP-WEIXINuni.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微信小程序查看海康攝像機監控視頻和操作攝像機拍攝方向