vue项目集成萤石云在Web系统中实现实时摄像头监控及控制功能

需求

需求: 开发人员在产线上放置一个萤石摄像头,前端在可视化大屏上实时监控,且控制左右上下功能。

效果

vue项目集成萤石云在Web系统中实现实时摄像头监控及控制功能

萤石云接入web前期准备工作

  1. 阅读萤石云API文档:萤石云开放平台开发者文档

  2. 阅读萤石云控制API文档:萤石云摄像头控制文档

  3. 需要准备设备序列号,萤石云视频地址,accessToken,在代码中我将会写成乱码形式。

  4. 了解调用API时候返回的错误码,根据错误码做出响应的操作:萤石云调用API时出现的错误码

  5. 萤石云参数说明:参数说明,使用地址
    vue项目集成萤石云在Web系统中实现实时摄像头监控及控制功能

  6. vue项目安装依赖

    npm install ezuikit-js@0.2.4
    

vue项目集成萤石云在Web系统中实现实时摄像头监控及控制功能
7. 页面引入ezuikit

import EZUIKit from "ezuikit-js";
  1. 页面使用,及其控制开关实现
<template><div><div id="video-container" ref="video" class="content video">视频</div><div class="btn_box"><el-buttonstyle="margin-left: 10px;"roundsize="mini"icon="el-icon-top-left"@click="directionControl(4)"></el-button><el-buttonroundsize="mini"icon="el-icon-top"@click="directionControl(0)"></el-button><el-buttonroundsize="mini"icon="el-icon-top-right"@click="directionControl(6)"></el-button><el-buttonroundsize="mini"icon="el-icon-back"@click="directionControl(2)"></el-button><el-buttonroundsize="mini"icon="el-icon-video-play"@click="stopTurn"></el-button><el-buttonroundsize="mini"icon="el-icon-right"@click="directionControl(3)"></el-button><el-buttonroundsize="mini"icon="el-icon-bottom-left"@click="directionControl(5)"></el-button><el-buttonroundsize="mini"icon="el-icon-bottom"@click="directionControl(1)"></el-button><el-buttonroundsize="mini"icon="el-icon-bottom-right"@click="directionControl(7)"></el-button></div></div>
</template>
  1. 相关JS代码

import EZUIKit from "ezuikit-js";
import axios from "axios";
export default {mounted() {this.initEZUIKitPlayer();},data() {return {eZUIKitPlayer: null,accessToken:"at.b1bw5w7f8ogfo0rjcd5chidksjdu9jty-361f07133z-1oity3u-dth2n7yvl",accessUrl: "ezopen://open.ys7.com/F6293ADF88/1.hd.live",};},methods: {//停止控制控制云台stopTurn() {axios({url: "https://open.ys7.com/api/lapp/device/ptz/stop",method: "post",params: {accessToken: this.accessToken,// direction:num,channelNo: 1, // 通道号deviceSerial: "F6245FF7788", //序列号},timeout: 2000,}).then((res) => {//  console.log(res.data)if (res.data.code == "60000") {this.$message(res.data.msg);}});},// 云平台控制directionControl(num) {axios({url: "https://open.ys7.com/api/lapp/device/ptz/start",method: "post",params: {accessToken: this.accessToken, //accesstoken码,一般一周过期speed: 2, //旋转速度direction: num, //方向,传入数字,对应数字在api文档有channelNo: 1, // 通道号deviceSerial: "F62937788", //序列号},timeout: 2000,}).then((res) => {if (res.data.code == "60000") {this.$message(res.data.msg);}});},// 初始化萤石云视频对接initEZUIKitPlayer() {this.eZUIKitPlayer = new EZUIKit.EZUIKitPlayer({id: "video-container",accessToken: this.accessToken,url: this.accessUrl,header: ["capturePicture", "save", "zoom"],footer: ["fullScreen"],width: 375,height: 257,autoplay: true,audio: 1,template: "simple",});},},
};
</script>
  1. CSS相关代码

<style lang="scss" scoped>
.content {background: #fff;height: 368px;
}
.btn_box {margin: 0px auto;width: 190px;height: 125px;display: flex;justify-content: center;flex-wrap: wrap;align-content: space-around;
}
</style>
  1. 获取实时视频API说明

vue项目集成萤石云在Web系统中实现实时摄像头监控及控制功能
后续了解更多功能,继续更新

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【错题集-编程题】dd 爱旋转(模拟)

牛客对应题目链接&#xff1a;dd爱旋转 (nowcoder.com) 一、分析题目 模拟题&#xff0c;但是需要不能直接无脑模拟&#xff0c;要思考⼀下规律。 顺时针旋转 180&#xff1a;行变换 列变换行变换、列变换的顺序颠倒不会有影响行变换的次数是个数相当于不变 二、代码 #includ…

《C语言深度解剖》(15):动态内存管理和柔性数组

&#x1f921;博客主页&#xff1a;醉竺 &#x1f970;本文专栏&#xff1a;《C语言深度解剖》 &#x1f63b;欢迎关注&#xff1a;感谢大家的点赞评论关注&#xff0c;祝您学有所成&#xff01; ✨✨&#x1f49c;&#x1f49b;想要学习更多C语言深度解剖点击专栏链接查看&…

k8s中的集群调度

文章目录 k8s中的集群调度Pod 创建流程 通过指定节点来创建pod所在的node节点通过标签来指定pod创建在哪个节点上pod 的亲和性Pod的亲和性和反亲和性亲和性&#xff08;Affinity&#xff09;反亲和性&#xff08;Anti-Affinity&#xff09; 污点与容忍污点&#xff08;Taint&am…

Spring Cache入门详解

一、概述 1.1缓存介绍 Spring提供了一套cache缓存抽象(注解/接口)&#xff0c;使基于spring缓存的使用与实现解耦 默认实现&#xff0c;Spring JDK ConcurrentMap-based Cache第三方实现&#xff0c;caffeine/Ehcache/Redis等 https://docs.spring.io/spring-framework/do…

Postman快捷功能-快速填写请求头

大家好&#xff0c;之前给大家分享关于 Postman 工具的基础使用&#xff0c;今天给大家介绍一个快捷功能&#xff0c;可以一定程度提高我们使用 Postman 工具的效率&#xff0c;在我们进行接口测试时&#xff0c;几乎每个接口都需要填写 Headers&#xff0c;且 Headers 中的参数…

【ai】livekit服务本地开发模式2:模拟1个发布者

是一个会议用软件:LiveKit is an open source project that provides scalable, multi-user conferencing based on WebRTC. It’s designed to provide everything you need to build real-time video audio data capabilities in your applications.LiveKit’s server is wr…

【Python】 Django 框架如何支持百万级日访问量

基本原理 Django 是一个高级的 Python Web 框架&#xff0c;它鼓励快速开发和干净、实用的设计。Django 遵循 MVC&#xff08;模型-视图-控制器&#xff09;设计模式&#xff0c;允许开发者通过编写更少的代码来构建高质量的 Web 应用程序。Django 自带了许多内置功能&#xf…

发现没:随便搞个B端页面,就想在客户那里过关,难啦。

客户对B端界面要求越来越高的原因可以有以下几点&#xff1a; 用户体验要求提升&#xff1a;随着用户对移动应用和网页的使用经验增加&#xff0c;他们对于界面的交互、流畅性和易用性要求也越来越高。他们希望能够在使用B端应用时&#xff0c;能够快速、方便地完成任务&#…

设计模式详解(六):适配器模式——Adapter

目录导航 适配器模式及其作用现实生活举例 适配器模式的好处适配器模式的实现关系图实现步骤 适配器模式的适用场景适配器模式示例 适配器模式及其作用 适配器模式是一种结构型设计模式。所谓结构型是指在代码结构方面的设计模式。适配器模式作为中间层&#xff0c;可以让交互…

Vue3 图片或视频下载跨域或文件损坏的解决方法

Vue3 图片或视频下载跨域或文件损坏的解决方法 修改跨域配置文件下载方法 修改跨域配置文件 修改vite.config.ts文件proxy里面写跨域地址&#xff0c;如下图&#xff0c;图片地址就是我们要跨域的目标地址&#xff1a; 下载方法 如下就是我取消上面那句后的报错 然后调用两…

【Java】Sping Boot中使用Javax Bean Validation

目录 Javax Bean Validation在Spring Boot中集成Javax Bean Validation使用案例功能测试配置全局异常处理器重新测试返回特定形式的信息方式一方式二 附&#xff1a;常用的注解 Javax Bean Validation Javax Bean Validation是Java平台的一项规范&#xff0c;旨在提供一种简单…

想知道股指期货和期权有什么不同吗?

市场上目前有中金所的沪深300ETF&#xff0c;中证500和中证1000股指期货&#xff0c;期权市场有上证50ETF&#xff0c;沪深300etf和中证500ETF期权&#xff0c;股指期货和期权在买卖双方的权利义务、风险收益特征、保证金制度、上市合约数量等方面均有较大区别&#xff0c;下文…

每天学点小知识:Windows终端Powershell美化

前言 本章的旨在教会你美化自己的终端&#xff0c;powershell需要以管理员运行 经过我的测试&#xff0c;不同的电脑可能会有不同的报错&#xff0c;具体操作根据官方为主https://ohmyposh.dev/docs 效果展示 Oh My Posh&#xff1a;提供美观的 PowerShell 提示符主题 1.安装…

揭秘CISA:你不知道的信息安全认证,轻松掌握职场先机!

在当今的信息化时代&#xff0c;信息系统的安全和稳定是企业和组织的重要资产。信息系统审计是一项专业的工作&#xff0c;需要具备丰富的知识和经验&#xff0c;以及敏锐的洞察力和判断力。信息系统审计师是信息系统审计领域的专业人士&#xff0c;他们负责对信息系统的设计、…

【OpenGL实践12】关于缓存区Framebuffer的运用

文章目录 一、说明二、帧缓冲区三、创建新的帧缓冲区四、附属装饰4.1 纹理图像4.2 渲染缓冲区对象图像 五、使用帧缓冲区5.1 后期处理5.2 更改代码 六、后期处理效果6.1 色彩处理6.2 模糊6.3 Sobel算子 七、结论练习 一、说明 关于FrameBuffer的使用&#xff0c;是OpenGL的高级…

横截面分位数回归

一、分位数回归简介 分位数回归&#xff08;英语&#xff1a;Quantile regression&#xff09;是回归分析的方法之一。最早由Roger Koenker和Gilbert Bassett于1978年提出。一般地&#xff0c;传统的回归分析研究自变量与因变量的条件期望之间的关系&#xff0c;相应得到的回归…

AI时代的服装设计师--AIGC

AI时代的服装设计师--AIGC AIGCAIGC设计能替代真正的设计师吗森马T恤设计AIGC优势、优化 本文记录于去年参加的一次森马T恤设计活动的感受。 AIGC 可以说&#xff0c;近期以来&#xff0c;随着ChatGPT的不断发展&#xff0c;从ChatGPT-3到ChatGPT-4的飞速发展&#xff0c;AIGC…

Windows和Linux系统部署Docker(2)

目录 一、Linux系统部署docker 前置环境&#xff1a; 1.安装需要的软件包&#xff0c; yum-util 提供yum-config-manager功能 2.添加阿里云 docker-ce 仓库 3.安装docker软件包 4.启动 docker并设置开机自启 5.查看版本&#xff1a; 二、windows系统部署docker 1.查看…

Type ‘null‘ is not assignable to type ‘T‘. - ArkTSCheck

设置泛型将参数配置为 null 时抛出了如下异常: Type null is not assignable to type T. T could be instantiated with an arbitrary type which could be unrelated to null. <ArkTSCheck> 解决办法 在 null 后面添加 ! 即可,以表示该值不会为 null data: T null! 以…

Qt 基于FFmpeg的视频转换器 - 转GIF动图

Qt 基于FFmpeg的视频转换器 - 转GIF动图 引言一、设计思路二、核心源码三、参考链接 引言 gif格式的动图可以通过连续播放一系列图像或视频片段来展示动态效果&#xff0c;使信息更加生动形象&#xff0c;可以很方便的嵌入到网页或者ppt中。上图展示了视频的前几帧转为gif动图的…