【vue ezuikit-js】5分钟实现萤石视频放大对焦和缩小对焦

最新推荐文章于 2024-09-26 16:29:08 发布
最新推荐文章于 2024-09-26 16:29:08 发布
阅读量624 收藏 1
点赞数 4
分类专栏： vue2 文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41747256/article/details/135993211
版权
本文介绍如何使用Vue和ezuikit-js库，在5分钟内实现萤石视频播放器的放大对焦和缩小对焦功能。通过结合萤石提供的放大、对焦接口以及定时器控制，实现了点击按钮逐级放大对焦的效果。
摘要由CSDN通过智能技术生成

实现功能如上图：点击+按钮，实现画面放大并对焦；点击-，实现画面缩小并对焦。

官网上提供了电子放大的控制按钮和接口，但是只是把当前画面进行放大，并没有对焦，画面模糊。

萤石官方还提供了对焦的接口，根据传入的参数不同，可以实现放大对焦和缩小对焦。但是注意此接口是直接对焦到底，中途不会停留。

而我想做成的效果是，点击一下，放大对焦一下，再点击一下，再放大对焦。

对焦接口

停止接口

最低0.47元/天 解锁文章
米老鼠的摩托车日记
关注
专栏目录
萤石视频demo ezuikit-js
01-19
萤石视频demo，包含base-demo，EZUIKitHD，nginx-demo，react-demo，vue-demo格式。可以直接复制使用。
html实现ezuikit.js萤石云直播监控，ezuikit.js实时监控实现，H5萤石云实时监控简单实现
weixin_43992507的博客
11-29 6486
html实现ezuikit.js萤石云直播监控，ezuikit.js实时监控实现，H5萤石云实时监控简单实现
vue 播放萤石云实景
qq_42181155的博客
09-01 296
/direction：0-上，1-下，2-左，3-右，4-左上，5-左下，6-右上，7-右下，8-放大，9-缩小，10-近焦距，11-远焦距。playbackSpeed: [0.5, 0.75, 1, 1.25, 1.5, 2, 3], //可选的播放速度，可自定义。lang: "zh-cn", // 语言，'en', 'zh-cn', 'zh-tw'theme: "#b7daff", // 风格颜色，例如播放条，音量条的颜色。hotkey: true, // 是否支持热键，调节音量，播放，暂停等。
EZUIKit.js萤石云vue项目使用
最新发布
XYX8958的博客
09-26 1026
EZUIKit.js 是萤石云（Ezviz）提供的一款用于Web端的视频播放和控制的JavaScript库。它允许开发者在网页上轻松集成视频监控、对讲、录像回放等功能，适用于安防监控、智能家居等场景。通过EZUIKit.js，你可以方便地访问萤石云平台上的摄像头和其他智能设备。
前端React项目中实现萤石云ezuikit摄像头的播放与控制
weixin_45777997的博客
10-13 8673
最近要在react项目中使用萤石云提供的ezuikit库来接入萤石云摄像头，实现远程播放、控制移动、放大缩小等功能，首先百度搜类似的需求，搜不到，只能自己采坑，登萤石云官网，看对应文档。 一、登录萤石云开放平台，下载demo并运行 在萤石云开放平台官网(https://open.ys7.com)的导航栏中，点击下载按钮 页面下方，分别有对应JavaScript、Android、IOS的demo，这里，我们下载JavaScript 下载的demo中，会有对应的原生js摄像头案例，以及用vue、react框
ezuikit-js萤石云
u014708123的博客
12-20 1591
【代码】ezuikit-js萤石云。
在vue展示萤石云监控视频
m0_70947033的博客
02-02 585
萤石云开放平台appKey申请可在开放平台官网注册登录https://open.ys7.com/view/app/app_edit.html（官网）萤石云开放平台:https://open.ys7.com/console/device.html。需要安装下载video和 videojs-contrib-hls。就可以拿到一个地址,复制下来,在下面或用到。
vue 接入萤石云，实现监控、多窗口监控、转向、放大缩小等
qq_38008818的博客
07-18 4642
vue接萤石云踩坑之路
EZUIKit-JavaScript-test:海康萤石云测试
05-15
UIKit Javascript 使用说明 #demo_hk1是4个视频框 简介 UIKit，是基于萤石开放平台OpenSDK封装的UI组件，使用过程中不必学习专业的业务概念，更不用调用繁琐的接口，能够以极简的嵌入方式，快速在您的应用中集成视频...
EZUIKit-JavaScript.zip
04-13
在这个特定的案例中，EZUIKit很可能是萤石为开发者设计的一套JavaScript工具集，包含了用于操作和控制萤石设备（如摄像头、报警器等）的API和组件。 EZUIKit可能包括以下关键知识点： 1. **JavaScript基础**：理解...
vue自定义指令-实现div和图片的拖拽，放大，缩小
06-20
vue自定义指令--实现div和图片的拖拽，放大，缩小，已封装成组件，下来导入后可直接使用
萤石云前端页面demo
07-06
萤石云前端页面demo，EZUIKit是基于萤石开放平台OpenSDK封装的UI组件，使用过程中不必学习专业的业务概念，更不用调用繁琐的接口，能够以极简的嵌入方式，快速在您的应用中集成视频功能。 详细了解EZOpen协议 EZUIKit是给客户端用户本地安装使用的，是一个exe执行文件。可以提供一个下载地址让用户下载安装.
萤石云播放海康摄像头
12-12
最近做了一个工地上监控，远程查看监控，用了萤石云播放海康的监控摄像具体使用https://blog.csdn.net/qq_29099209/article/details/84969885
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
10-14
在本文中，我们将深入探讨如何使用 Vue-Video-Player 实现监控设备的实时视频播放，特别是通过 RTMP 流。 1. **安装 Vue-Video-Player** 在 Vue 项目中安装 Vue-Video-Player 可以通过 npm 完成： ``` npm ...
【PHP】控制摄像头缩放监控画面大小，并保存可视画面为图片
qq_25285531的博客
06-27 681
调用摄像头并可以控制缩放摄像头监控画面的大小，把可视画面保存为图片。我使用的是USB摄像头，其他摄像头此方法应该也通用。
vue2使用ezuikit播放在线视频，支持hls.m3u8
Uxiao7的博客
12-27 1120
【代码】vue2使用ezuikit播放在线视频，支持hls.m3u8。
萤石云 ezuikit-js创建的播放器实例esc取消全屏后变黑屏
hq123897的博客
08-07 307
ezuikit播放器故障解决
萤石云轻应用 ezuikit 点击对讲，浏览器报错提示：talk err getUserMedia not available
hq123897的博客
08-07 161
ezuikit 的浏览器协议兼容问题
ezuikit-js + vue 调用摄像头并且实现录像功能
07-30
Ezuikit-js是一个基于Vue框架的摄像头调用和录像功能实现的插件。以下是一种可能的实现方式： 首先，我们需要在Vue项目中安装ezuikit-js插件。可以通过npm命令来进行安装： ``` npm install ezuikit-js ``` 然后，在Vue组件中引入和使用ezuikit-js插件： ```javascript import ezuikit from 'ezuikit-js'; export default { data() { return { player: null, isRecording: false, }; }, mounted() { this.initPlayer(); }, methods: { initPlayer() { this.player = new ezuikit.Player({ id: 'video-player', accessToken: 'your_access_token', url: 'rtsp://your_camera_url', }); this.player.initialize(); }, startRecording() { this.isRecording = true; this.player.startRecord(); }, stopRecording() { this.player.stopRecord().then((recordData) => { console.log(recordData); // 可以在控制台输出录像数据（recordData） this.isRecording = false; }); }, }, }; ``` 上述代码中，我们首先在`mounted()`生命周期方法中初始化ezuikit的播放器。然后，我们可以在组件的模板中使用一个`video`标签来显示视频流，并将该标签的`id`设置为"video-player"。接下来，我们通过调用ezuikit的`startRecord()`方法和`stopRecord()`方法来开始和停止录像。在停止录像时，`stopRecord()`方法会返回录像的数据（recordData），可以用于后续的处理和保存。 需要注意的是，上述代码中的`your_access_token`和`your_camera_url`需要被替换为实际的访问令牌和摄像头的URL。 这只是一种实现方式，具体的实现还取决于项目的具体需求和摄像头的接口要求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值