当前位置: 首页 > news >正文

EZUIKit.js萤石云vue项目使用

EZUIKit.js 是萤石云(Ezviz)提供的一款用于Web端的视频播放和控制的JavaScript库。它允许开发者在网页上轻松集成视频监控、对讲、录像回放等功能,适用于安防监控、智能家居等场景。通过EZUIKit.js,你可以方便地访问萤石云平台上的摄像头和其他智能设备。

1. 引入EZUIKit.js

npm引入

npm install ezuikit --save

或者通过CDN引入

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>My Project</title><!-- 引入EZUIKit.js --><script src="https://cdn.jsdelivr.net/npm/ezuikit@latest/dist/ezuikit.min.js"></script>
</head>
<body><div id="app"></div>
</body>
</html>

2. 使用 

<template><div ref="playerContainer" id="SkeyeWebPlayer1"></div>
</template>

 

    import EZUIKit from "ezuikit-js";function ezuikit1(url: string, accessToken: string) {playr1 = new EZUIKit.EZUIKitPlayer({id: "SkeyeWebPlayer1", // 视频容器IDaccessToken: accessToken,url: url,template: 'simple', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版; theme-可配置主题;plugin: ["talk"], // 加载插件,talk-对讲width: 'auto',height: 'auto',});const playPromise = playr1.play();// 处理播放成功的情况playPromise.then(() => {console.log("播放成功");}).catch((error) => {// 处理播放失败的情况console.error("播放失败:", error);});}
参数名类型描述是否必选
accessTokenString授权过程获取的access_tokenY
deviceSerialString设备序列号例如427734222,均采用英文符号,限制最多50个字符Y
channelNoInteger通道号,非必选,默认为1N
protocolInteger流播放协议,1-ezopen、2-hls、3-rtmp、4-flv,默认为1N
codeStringezopen协议地址的设备的视频加密密码N
expireTimeInteger过期时长,单位秒;针对hls/rtmp/flv设置有效期,相对时间;30秒-720天N
typeString地址的类型,1-预览,2-本地录像回放,3-云存储录像回放,非必选,默认为1;回放仅支持rtmp、ezopen、flv协议N
qualityInteger视频清晰度,1-高清(主码流)、2-流畅(子码流)N
startTimeString本地录像/云存储录像回放开始时间,云存储开始结束时间必须在同一天,示例:2019-12-01 00:00:00N
stopTimeString本地录像/云存储录像回放结束时间,云存储开始结束时间必须在同一天,示例:2019-12-01 23:59:59N
supportH265Integer请判断播放端是否要求播放视频为H265编码格式,1表示需要,0表示不要求N
playbackSpeedString回放倍速。倍速为 -1( 支持的最大倍速)、0.5、1、2、4、8、16;
仅支持protocol为4-flv

type为2-本地录像回放( 部分设备可能不支持16倍速) 或者 3-云存储录像回放
N
gbchannelString国标设备的通道编号,视频通道编号IDN

 

相关文章:

  • BufferQueue低延迟优化,以及SurfaceView帧率上限问题解决
  • 计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-09-26
  • 【移植】小型系统平台驱动移植
  • 计算机毕业设计 基于Flask+Vue的博客系统 Python毕业设计 前后端分离 附源码 讲解 文档
  • Python PyQt5 在frame中生成多个QLabel控件和彻底销毁QLabel控件
  • 【工具分享】Chimera勒索病毒解密工具
  • 流行的微前端框架有哪些,适应场景是什么
  • overlayscrollbars使用
  • 基于大数据技术的颈椎病预防交流与数据分析及可视化系统
  • 易燃气体检测系统源码分享
  • 统信服务器操作系统【qcow2 镜像空间扩容】方案
  • 【速成Redis】03 Redis 五大高级数据结构介绍及其常用命令 | 消息队列、地理空间、HyperLogLog、BitMap、BitField
  • CVE-2024-1112 Resource Hacker 缓冲区溢出分析
  • VBA技术资料MF205:移动工作表时名称重复的处理
  • 吹爆这份Stable diffusion提示词攻略!
  • (三)从jvm层面了解线程的启动和停止
  • [js高手之路]搞清楚面向对象,必须要理解对象在创建过程中的内存表示
  • [译]如何构建服务器端web组件,为何要构建?
  • 《Java编程思想》读书笔记-对象导论
  • 0基础学习移动端适配
  •  D - 粉碎叛乱F - 其他起义
  • ESLint简单操作
  • iOS 颜色设置看我就够了
  • JavaSE小实践1:Java爬取斗图网站的所有表情包
  • js递归,无限分级树形折叠菜单
  • Linux各目录及每个目录的详细介绍
  • Phpstorm怎样批量删除空行?
  • Spring Cloud Alibaba迁移指南(一):一行代码从 Hystrix 迁移到 Sentinel
  • spring-boot List转Page
  • Vue 动态创建 component
  • 百度贴吧爬虫node+vue baidu_tieba_crawler
  • 成为一名优秀的Developer的书单
  • 道格拉斯-普克 抽稀算法 附javascript实现
  • 爬虫进阶 -- 神级程序员:让你的爬虫就像人类的用户行为!
  • 前端
  • 深入体验bash on windows,在windows上搭建原生的linux开发环境,酷!
  • 学习Vue.js的五个小例子
  • 以太坊客户端Geth命令参数详解
  • 好程序员web前端教程分享CSS不同元素margin的计算 ...
  • 回归生活:清理微信公众号
  • ​ssh-keyscan命令--Linux命令应用大词典729个命令解读
  • ​学习笔记——动态路由——IS-IS中间系统到中间系统(报文/TLV)​
  • !$boo在php中什么意思,php前戏
  • #VERDI# 关于如何查看FSM状态机的方法
  • #window11设置系统变量#
  • (2.2w字)前端单元测试之Jest详解篇
  • (web自动化测试+python)1
  • (附源码)spring boot球鞋文化交流论坛 毕业设计 141436
  • (论文阅读40-45)图像描述1
  • (算法)前K大的和
  • (一)模式识别——基于SVM的道路分割实验(附资源)
  • *_zh_CN.properties 国际化资源文件 struts 防乱码等
  • .net mvc actionresult 返回字符串_.NET架构师知识普及
  • .NET企业级应用架构设计系列之技术选型
  • ::before和::after 常见的用法