uniapp对接萤石云 实现监控播放、云台控制、截图、录像、历史映像等功能

news2024/9/29 5:36:59

萤石云开发平台地址：文档概述 · 萤石开放平台API文档 (ys7.com)

萤石云监控播放

  • 首先引入萤石云js

js地址：GitHub - Ezviz-OpenBiz/EZUIKit-JavaScript-npm: 轻应用npm版本，降低接入难度，适配自定义UI，适配主流框架

video.vue

<template>
	<view class="content">
		<view class="preview" id="video-container"></view>
		<view>
			<button @click="ezuikit.stop">stop</button>
			<button @click="ezuikit.play">play</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				strings: ' '
			}
		},
		methods: {
			
		}
	}
</script>

<script module="ezuikit" lang="renderjs">
	var player = null;

	export default {
	
		mounted() {
			console.log('mounted...');

			if (typeof window.EZUIKit !== 'undefined') {
				
				console.log('defined EZUIKit...');
				this.initPlayer();
			} else {
				
				console.log('undefined EZUIKit...');				
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script')
				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
				script.src = 'static/ezuikit.js'
				script.onload = this.initPlayer.bind(this)
				document.head.appendChild(script)
			}
		},

		methods: {
			initPlayer() {
				const {
					windowWidth,
					windowHeight
				} = uni.getSystemInfoSync();
				console.log('initPlayer...');
						
				fetch('https://open.ys7.com/jssdk/ezopen/demo/token')
				      .then(response => response.json())
				      .then(res => {
				        var accessToken = res.data.accessToken;
				        player = new EZUIKit.EZUIKitPlayer({
				          id: 'video-container', // 视频容器ID
				          accessToken: accessToken,
				          url: 'ezopen://open.ys7.com/G39444019/1.live',
				          // simple - 极简版; pcLive-pc直播；pcRec-pc回放；mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版;
				          //template: 'simple',
				          plugin: ['talk'], // 加载插件，talk-对讲
				          width: windowWidth,
				          height: windowWidth * 2 / 3,
				        });
				        window.player = player;
				      });
			},
			play() {
				var playPromise = player.play();
				playPromise.then((data) => {
					console.log("promise 获取 数据", data)
				})
			},
			stop() {
				var stopPromise = player.stop();
				stopPromise.then((data) => {
					console.log("promise 获取 数据", data)
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.preview {
		background-color: black;
	}
</style>

云台控制

player = new EZUIKit.EZUIKitPlayer({
					id: 'ezuikit', // 视频容器ID
					accessToken: this.ezuikitDataM.accessToken,
					url: 'ezopen://open.ys7.com/' + this.ezuikitDataM.deviceSerial + '/'+this.ezuikitDataM.channelNo+'.live',
					// simple - 极简版; pcLive-pc直播；pcRec-pc回放；mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版;
					template: 'mobileLive',
					plugin: ['talk', 'ptz'], // 加载插件，talk-对讲
					width: windowWidth,
					height: windowWidth * 2 / 3,
				});

截图

使用接口：https://open.ys7.com/api/lapp/device/capture   -   设备抓拍图片

接口文档位置：文档概述 · 萤石开放平台API文档 (ys7.com)

screenshot() {
				this.isLoading = true
				let _this = this
				post('/api/lapp/device/capture', {
					'accessToken': this.ezuikitData.accessToken,
					'deviceSerial': this.ezuikitData.deviceSerial,
					'channelNo': this.newData.channelNo,
					'quality': 1
				}, {
					'content-type': 'application/x-www-form-urlencoded'
				}, 'https://open.ys7.com').then(res => {
					uni.saveImageToPhotosAlbum({
						filePath: res.data.data.picUrl,
						success: function(res2) {
							_this.isLoading = false
							_this.$refs.messagePopup.showMessage('success', '圖片保存成功')
						},
						fail: function(err2) {

						}
					});

				}).catch(err => {
					console.error(err);
				});
			}

录像

  • 首先要创建一个存储项目，拿到项目ID后再录制

  • 录制视频到云端项目存储

即时视频转码录制存储接口，接口：https://open.ys7.com/api/open/cloud/v1/instant/record/save

接口描述：立即开始进行视频录制

预约视频转码录制存储接口，接口：https://open.ys7.com/api/open/cloud/v1/preview/save

接口描述： 从实时视频中取流进行转码录制，注意该接口开始时间需在未来 10 分钟后

文档地址：文档概述 · 萤石开放平台API文档 (ys7.com)

//即时录制
recordSave() {
				let _this = this
				post('/api/open/cloud/v1/instant/record/save', {
					'projectId': 'YtechAppRecord',
					'recordSeconds': '15'
				}, {
					'accessToken': this.ezuikitData.accessToken,
					'deviceSerial': this.ezuikitData.deviceSerial,
					'localIndex': this.ezuikitData.channelNo,
					'content-type': 'application/x-www-form-urlencoded'
				}, 'https://open.ys7.com').then(res => {
					_this.taskId = res.data.data.taskId
				}).catch(err => {
					console.error(err);
				});
			}
  • 根据任务ID查询视频文件，并获取下载链接

接口：https://open.ys7.com/api/v3/open/cloud/task/files

文档：https://open.ys7.com/api/v3/open/cloud/task/files

taskFiles() {
				let _this = this
				get('/api/v3/open/cloud/task/files', {
					'accessToken': _this.ezuikitData.accessToken,
					'taskId': _this.taskId,
					'hasUrl': true
				}, {
					'content-type': 'application/x-www-form-urlencoded'
				}, 'https://open.ys7.com').then(res => {
					uni.downloadFile({
						url: res.data.data[0].downloadUrls[0],
						success: (downloadResult) => {
							if (downloadResult.statusCode === 200) {
								uni.saveVideoToPhotosAlbum({
									filePath: downloadResult.tempFilePath,
									success: () => {
										_this.$refs.messagePopup.showMessage('default', '保存到相冊成功')
									},
									fail: (err) => {
										console.log(err)
									}
								});
							}
						},
						fail: (err) => {
							console.log(err)
						}
					})
				}).catch(err => {
					console.error(err);
				});
			}

历史映像

player = new EZUIKit.EZUIKitPlayer({
					id: 'ezuikit', // 视频容器ID
					accessToken: this.ezuikitDataM.accessToken,
					url: 'ezopen://open.ys7.com/' + this.ezuikitDataM.deviceSerial + '/'+this.ezuikitDataM.channelNo+'.live',
					// simple - 极简版; pcLive-pc直播；pcRec-pc回放；mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版;
					template: 'mobileRec',
					width: windowWidth,
					height: windowWidth * 2 / 3
				});

<script module="ezuikit" lang="renderjs">

  • renderjs的概念

运行在视图层的js，只支持app-vue和h5（简单来说就是开了另外一条线程）

  • renderjs的作用

大幅降低逻辑层和视图层的通讯损耗，提供高性能视图交互能力（减少通讯损耗提升性能，例如一些手势或canvas动画的场景）

在视图层操作dom，运行for web的js库（可以操作dom，意味着拥有window、document等这些全局变量，在app-vue的service层没有这些）

uniapp官网说明地址：renderjs | uni-app官网

  •  renderjs的使用

在原先的script标签的同级新增一个script，设置lang=renderjs，module=(值任意，相当于命名空间，之后会根据这个名字调用其中的方法)

renderjs和service层的通信示例一

<template>
	<view class="content">
		<!-- #ifdef APP-PLUS || H5 -->
		<view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" id="echarts" class="echarts"></view>
		<button @click="changeOption">更新数据</button>
		<!-- #endif -->
		<!-- #ifndef APP-PLUS || H5 -->
		<view>非 APP、H5 环境不支持</view>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				option: {
					title: {
						text: 'ECharts 入门示例'
					},
					tooltip: {},
					legend: {
						data: ['销量']
					},
					xAxis: {
						data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
					},
					yAxis: {},
					series: [{
						name: '销量',
						type: 'bar',
						data: [5, 20, 36, 10, 10, 20]
					}]
				}
			}
		},
		onLoad() {

		},
		methods: {
			changeOption() {
				const data = this.option.series[0].data
				// 随机更新示例数据
				data.forEach((item, index) => {
					data.splice(index, 1, Math.random() * 40)
				})
			},
			onViewClick(options) {
				console.log(options)
			}
		}
	}
</script>

<script module="echarts" lang="renderjs">
	let myChart
	export default {
		mounted() {
			if (typeof window.echarts === 'function') {
				this.initEcharts()
			} else {
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script')
				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
				script.src = 'static/echarts.js'
				script.onload = this.initEcharts.bind(this)
				document.head.appendChild(script)
			}
		},
		methods: {
			initEcharts() {
				myChart = echarts.init(document.getElementById('echarts'))
				// 观测更新的数据在 view 层可以直接访问到
				myChart.setOption(this.option)
			},
			updateEcharts(newValue, oldValue, ownerInstance, instance) {
				// 监听 service 层数据变更
				myChart.setOption(newValue)
			},
			onClick(event, ownerInstance) {
				// 调用 service 层的方法
				ownerInstance.callMethod('onViewClick', {
					test: 'test'
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.echarts {
		margin-top: 100px;
		width: 100%;
		height: 300px;
	}
</style>

renderjs和service层的通信示例二

<template>
	<view class="videoDetails">
		<view class="CommonTop_top"></view>
		<view class="CommonTop_app">
			<view class="left" @click="returnPage()"><uni-icons type="left" color="#8c8c8c" :size="28"></uni-icons>
			</view>
			<view class="tilte">{{ezuikitData?.channelName}}</view>
		</view>
		<view class="CommonTop_bottom"></view>
		<view class="CommonTop_bottom_two" style="height: var(--status-bar-height);"></view>
		<view class="content">
			<view class="videoBoxDetail">
				<view class="preview" :info="ezuikitData" :change:info="ezuikit.receiveInfo" id="ezuikit"></view>
			</view>
			<view class="tips">{{$t('VIDEO.16')}}</view>
		</view>
	</view>
</template>

<script>
	import {
		reactive,
		ref,
		toRefs,
		onMounted
	} from 'vue';
	import {
		onReady,
		onLoad
	} from "@dcloudio/uni-app"
	import {
		get,
		post
	} from '@/util/request/request.js'
	import localStorage from '@/util/commen/localStorage.js'

	export default {
		data() {
			return {
				ezuikitData: {},
				userInfo: JSON.parse(localStorage.get('userInfo')),
				projInfo: JSON.parse(localStorage.get('projInfo'))
			}
		},
		onLoad(option) {
			let newData = JSON.parse(decodeURIComponent(option.data))
			console.log(newData,'...........................')
			this.ezuikitData = newData
		},
		methods: {
			returnPage() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>
<script module="ezuikit" lang="renderjs">
	var player = null
	var ezuikitDataM = null
	export default {
		mounted() {
			if (typeof window.EZUIKit !== 'undefined') {
				this.initPlayer();
			} else {
				const script = document.createElement('script')
				script.src = 'static/ezuikit/ezuikit.js'
				script.onload = this.initPlayer.bind(this)
				document.head.appendChild(script)
			}
		},
		methods: {
			receiveInfo(newValue, oldValue, ownerInstance, instance) {
				if (JSON.stringify(newValue) != '{}') {
					this.ezuikitDataM = newValue
					console.log('新值', JSON.stringify(this.ezuikitDataM))
				}
			},
			initPlayer() {
				const windowWidth = uni.upx2px(750)
				player = new EZUIKit.EZUIKitPlayer({
					id: 'ezuikit', // 视频容器ID
					accessToken: this.ezuikitDataM.accessToken,
					url: 'ezopen://open.ys7.com/' + this.ezuikitDataM.deviceSerial + '/'+this.ezuikitDataM.channelNo+'.live',
					// simple - 极简版; pcLive-pc直播；pcRec-pc回放；mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版;
					template: 'mobileLive',
					plugin: ['talk', 'ptz'], // 加载插件，talk-对讲
					width: windowWidth,
					height: windowWidth * 2 / 3,
				});
				window.player = player;
			}
		}
	}
</script>
<style scoped>
	.videoDetails {
		position: relative;
	}

	.videoDetails .tips {
		position: absolute;
		bottom: -70rpx;
		color: #8c8c8c;
		width: 100%;
		text-align: center;
	}
</style>

其他关于renderjs文章推荐：uniapp中使用renderjs的一些细节 - 掘金

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1550672.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

DC电源模块的设计与制造流程

DC电源模块的设计与制造流程

BOSHIDA DC电源模块的设计与制造流程 DC电源模块是一种用于将交流电转换为直流电的设备。它广泛应用于各种电子设备中&#xff0c;如电子产品、工业仪器、电视等。下面是DC电源模块的设计与制造流程的简要描述&#xff1a; 1. 需求分析&#xff1a;在设计DC电源模块之前&#…
阅读更多...
目标检测——服装数据集

目标检测——服装数据集

一、重要性及意义 首先&#xff0c;服装检测是确保产品质量和安全性的关键环节。通过对服装的材质、工艺、安全性等方面的检测&#xff0c;可以及时发现并纠正可能存在的缺陷和问题&#xff0c;从而确保产品符合消费者的期望和要求。这有助于维护品牌形象&#xff0c;提高消费…
阅读更多...
【Java程序设计】【C00360】基于Springboot的考研互助交流平台（有论文）

【Java程序设计】【C00360】基于Springboot的考研互助交流平台（有论文）

基于Springboot的考研互助交流平台&#xff08;有论文&#xff09; 项目简介项目获取开发环境项目技术运行截图 项目简介 项目获取 &#x1f345;文末点击卡片获取源码&#x1f345; 开发环境 运行环境&#xff1a;推荐jdk1.8&#xff1b; 开发工具&#xff1a;eclipse以及i…
阅读更多...
day70 Mybatis使用mapper重构xml文件重新修改商品管理系统

day70 Mybatis使用mapper重构xml文件重新修改商品管理系统

day67 基于mysql数据库jdbcDruidjar包连接的商品管理用户购物系统-CSDN博客 1多表操作 2动态SQL 项目中使用的为商品管理系统的表 一 查询商品信息 编号&#xff0c;名称&#xff0c;单价&#xff0c;库存&#xff0c;类别 1表&#xff1a;商品表&#xff0c;类别表 n对1…
阅读更多...
el-table中复选框、展开列、索引

el-table中复选框、展开列、索引

<!-- 复选框&#xff0c;搭配selection-change"handleSelectChange"使用&#xff0c;每次点击复选框就会调用方法handleSelectChange(selection) {}&#xff0c;在该方法中只要调用该方法获取到的selection就是所有已勾选的记录集合 --> <el-table-column t…
阅读更多...
【正点原子FreeRTOS学习笔记】————（14）事件标志组

【正点原子FreeRTOS学习笔记】————（14）事件标志组

这里写目录标题 一、事件标志组简介&#xff08;了解&#xff09;二、事件标志组相关API函数介绍&#xff08;熟悉&#xff09;三、事件标志组实验&#xff08;掌握&#xff09; 一、事件标志组简介&#xff08;了解&#xff09; 事件标志位&#xff1a;用一个位&#xff0c;来…
阅读更多...
网站可扩展架构设计

网站可扩展架构设计

从公众号转载&#xff0c;关注微信公众号掌握更多技术动态 --------------------------------------------------------------- 一、可扩展性架构简介 1.可扩展性是什么 可扩展性指系统为了应对将来需求变化而提供的一种扩展能力&#xff0c;当有新的需求出现时&#xff0c;系…
阅读更多...
剑指Offer题目笔记19（二分查找）

剑指Offer题目笔记19（二分查找）

面试题68&#xff1a; 问题&#xff1a; ​ 输入一个排序的整形数组nums和一个目标值t&#xff0c;如果数组nums中包含t&#xff0c;则返回在数组中的下标&#xff0c;否则返回按照顺序插入到数组的下标。 解决方案&#xff1a; ​ 使用二分查找。每次二分查找都选取位于数组…
阅读更多...
CIM搭建实现发送消息的效果

CIM搭建实现发送消息的效果

目录 背景过程1、下载代码2、进行配置3、直接启动项目4、打开管理界面5、启动web客户端实例项目6、发送消息 项目使用总结 背景 公司项目有许多需要发送即时消息的场景&#xff0c;之前一直采用的是传统的websocket连接&#xff0c;它会存在掉线严重&#xff0c;不可重连&…
阅读更多...
PCB经常连锡？或许你可以看看这三个焊盘

PCB经常连锡？或许你可以看看这三个焊盘

在印刷电路板&#xff08;PCB&#xff09;制造中&#xff0c;很容易遇见连锡问题&#xff0c;即相邻焊盘之间出现意外的锡桥连接&#xff0c;这主要是焊盘的设置不当&#xff0c;若是不及时处理&#xff0c;很可能导致电路短路&#xff0c;影响其正常功能。那么如何选择焊盘&am…
阅读更多...
4.Python数据分析—数据分析入门知识图谱索引(知识体系下篇)

4.Python数据分析—数据分析入门知识图谱索引(知识体系下篇)

4.Python数据分析—数据分析入门知识图谱&索引-知识体系下篇 一个人简介二机器学习基础2.1 监督学习与无监督学习2.1.1 监督学习&#xff1a;2.1.2 无监督学习&#xff1a; 2.2 特征工程2.3 常用机器学习算法概述2.3.1 监督学习算法&#xff1a;2.3.2 无监督学习算法&#…
阅读更多...
Redis 教程系列之Redis 集群配置(十三)

Redis 教程系列之Redis 集群配置(十三)

1.Redis集群方案比较 主从模式 在软件的架构中，主从模式（Master-Slave）是使用较多的一种架构。主（Master）和从（Slave）分别部署在不同的服务器上，当主节点服务器写入数据时，同时也会将数据同步至从节点服务器，通常情况下，主节点负责写入数据，而从节点负责读取数据。…
阅读更多...
网络原理(6)——IP协议

网络原理(6)——IP协议

目录 一、网段划分 现在的网络划分&#xff1a; 1、一般情况下的家庭网络环境 2、IP地址 3、子网掩码 4、网关 以前的网络划分&#xff1a; 二、特殊IP 1、环回 IP 2、主机号为全 0 的IP 3、广播地址IP 三、路由选择&#xff08;路线规划&#xff09; 一、网段划分…
阅读更多...
零信任的应用场景和部署模式

零信任的应用场景和部署模式

零信任是新一代网络安全理念&#xff0c;并非指某种单一的安全技术或产品&#xff0c;其目标是为了降低资源访问过程中的安全风险&#xff0c;防止在未经授权情况下的资源访问&#xff0c;其关键是打破信任和网络位置的默认绑定关系。 一、零信任安全模型的核心理念可以概括为…
阅读更多...
教育数字化调研团走进锐捷，共议职业教育数字化转型新思路

教育数字化调研团走进锐捷，共议职业教育数字化转型新思路

为贯彻落实国家教育数字化战略行动部署和2024年全国教育工作会议精神,加快推进职业教育数字化转型与发展,梳理职业教育数字化转型的现状、问题及发展趋势,并总结展示职业教育数字化转型的好经验、好做法,培育职业教育数字化创新成果,推动数字技术与职业教育深度融合、提高数字化…
阅读更多...
fs.1.10 ON CENTOS7 docker镜像制作

fs.1.10 ON CENTOS7 docker镜像制作

概述 freeswitch是一款简单好用的VOIP开源软交换平台。 centos7 docker上编译安装fs1.10版本的流程记录。 环境 docker engine&#xff1a;Version 24.0.6 centos docker&#xff1a;7 freeswitch&#xff1a;v1.10.7 手动模式 centos准备 docker hub拉取centos镜像。…
阅读更多...
汉化必备工具 Poedit Pro 翻译编辑器

汉化必备工具 Poedit Pro 翻译编辑器

特色功能 简单易用的界面&#xff1a; Poedit的界面简洁直观&#xff0c;没有复杂的选项和设置。它专注于提供最基本的翻译编辑功能&#xff0c;使得用户能够快速上手并高效完成翻译工作。多种文件格式支持&#xff1a; Poedit支持多种常见的翻译文件格式&#xff0c;包括Gett…
阅读更多...
ROS2从入门到精通0-4：ROS2核心架构与常用指令大全

ROS2从入门到精通0-4：ROS2核心架构与常用指令大全

目录 0 专栏介绍1 ROS2核心架构1.1 工作空间1.2 功能包 2 ROS2常用指令2.1 功能包相关2.2 节点运行相关2.3 话题相关2.4 参数相关2.4 录制包、播放包相关2.5 服务相关2.6 动作相关2.7 生命周期相关 0 专栏介绍 本专栏旨在通过对ROS2的系统学习&#xff0c;掌握ROS2底层基本分布…
阅读更多...
SD卡备份和烧录ubuntu20.04镜像

SD卡备份和烧录ubuntu20.04镜像

设备及系统&#xff1a;nuc幻影峡谷工控机&#xff0c;ubuntu20.04&#xff0c;树莓派4B&#xff0c;SD卡读卡器 一、确定SD卡设备号的两种方法 方法1&#xff1a; 将有ubuntu镜像的SD卡插入读卡器&#xff0c;再将读卡器插入电脑主机&#xff0c;在 工具 中打开 磁盘&#…
阅读更多...
Spring Cloud Gateway Server MVC

Spring Cloud Gateway Server MVC

之前你如果要用spring cloud gateway &#xff0c;就必须是webflux 的&#xff0c;也就是必须是异步响应式编程。不能和spring mvc 一起使用。现在spring cloud 新出了一个可以不用webflux的gateway。 具体使用mvc的gateway步骤如下 普通的Eureka Client的项目 如果你只是想测…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023