EZUIKit.js萤石云vue项目使用

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

1. 引入EZUIKit.js

npm引入

javascript 复制代码
npm install ezuikit --save

或者通过CDN引入

html 复制代码
<!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. 使用

html 复制代码
<template>
  <div ref="playerContainer" id="SkeyeWebPlayer1"></div>
</template>
javascript 复制代码
    import EZUIKit from "ezuikit-js";
    function ezuikit1(url: string, accessToken: string) {
      playr1 = new EZUIKit.EZUIKitPlayer({
        id: "SkeyeWebPlayer1", // 视频容器ID
        accessToken: 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);
      });
    }
参数名 类型 描述 是否必选
accessToken String 授权过程获取的access_token Y
deviceSerial String 设备序列号例如427734222,均采用英文符号,限制最多50个字符 Y
channelNo Integer 通道号,非必选,默认为1 N
protocol Integer 流播放协议,1-ezopen、2-hls、3-rtmp、4-flv,默认为1 N
code String ezopen协议地址的设备的视频加密密码 N
expireTime Integer 过期时长,单位秒;针对hls/rtmp/flv设置有效期,相对时间;30秒-720天 N
type String 地址的类型,1-预览,2-本地录像回放,3-云存储录像回放,非必选,默认为1;回放仅支持rtmp、ezopen、flv协议 N
quality Integer 视频清晰度,1-高清(主码流)、2-流畅(子码流) N
startTime String 本地录像/云存储录像回放开始时间,云存储开始结束时间必须在同一天,示例:2019-12-01 00:00:00 N
stopTime String 本地录像/云存储录像回放结束时间,云存储开始结束时间必须在同一天,示例:2019-12-01 23:59:59 N
supportH265 Integer 请判断播放端是否要求播放视频为H265编码格式,1表示需要,0表示不要求 N
playbackSpeed String 回放倍速。倍速为 -1( 支持的最大倍速)、0.5、1、2、4、8、16; 仅支持protocol为4-flv 且 type为2-本地录像回放( 部分设备可能不支持16倍速) 或者 3-云存储录像回放 N
gbchannel String 国标设备的通道编号,视频通道编号ID N
相关推荐
夏殇之殁14 小时前
包中创建自定义列表项。 . 使用自定义列表项进行数据绑定 . 将天气预报数据保存到本地内存表,通过LiveBindings进行显示。 ...
服务器·前端·javascript
The Chosen One98514 小时前
高进度算法模板速记(待完善)
java·前端·算法
陈随易14 小时前
MoonBit抓包模块pcap,查看电脑的每一次联网通信
前端·后端·程序员
新中地GIS开发老师15 小时前
WebGIS开发学生作品|低空航天管理与航线规划系统
前端·javascript·webgis·三维gis开发
用户0595401744616 小时前
大模型对话记忆持久化踩坑实录:用 Playwright 自动化测了 300 次,终于揪出会话丢失的真凶
前端·css
丙氨酸長鏈16 小时前
Web前端入门第 问:JavaScript 一个简单的 IndexedDB 数据库入门示例
前端·javascript·数据库
kyriewen17 小时前
面试官让我手写虚拟列表——AI生成的版本,快速滚动几下就白屏了
前端·javascript·面试
IT_陈寒17 小时前
Vite热更新失效?你可能漏了这个配置
前端·人工智能·后端
梅孔立18 小时前
两种免费的翻译API调用方式详解 - Edge官方API与个人缓存服务
前端·缓存·edge
Revolution6118 小时前
React 组件重新渲染时,到底重新执行了什么
前端·react.js·面试