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

最新推荐文章于 2024-05-17 17:18:12 发布
最新推荐文章于 2024-05-17 17:18:12 发布
阅读量452 收藏 1
点赞数 4
分类专栏： vue2 文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41747256/article/details/135993211
版权

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

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

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

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

对焦接口

停止接口

想到的方案是利

最低0.47元/天 解锁文章
米老鼠的摩托车日记
关注
  • 4
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ajax放大缩小,vue接入实时视频，并可以控制缩放与上下左右
weixin_31156677的博客
08-06 789
效果图：1、在大屏上的效果：页面嵌入实时视频，可通过点击下面的按钮实现，摄像头拉进，缩小，上下左右等旋转动作image.png2、双击视频时候全屏的放大效果：image.png步骤：一、在要嵌入监控的vue页面中，用iframe引入：image.pngvedio的目录结构：整个demo文件都要导入项目中，可以看到在ysyDemo下面还有几个js文件和一些样式，我们需要修改的就是，在vedio里面接...
前端React项目中实现萤石云ezuikit摄像头的播放与控制
weixin_45777997的博客
10-13 8390
最近要在react项目中使用萤石云提供的ezuikit库来接入萤石云摄像头，实现远程播放、控制移动、放大缩小等功能，首先百度搜类似的需求，搜不到，只能自己采坑，登萤石云官网，看对应文档。 一、登录萤石云开放平台，下载demo并运行 在萤石云开放平台官网(https://open.ys7.com)的导航栏中，点击下载按钮 页面下方，分别有对应JavaScript、Android、IOS的demo，这里，我们下载JavaScript 下载的demo中，会有对应的原生js摄像头案例，以及用vue、react框
vue 接入萤石云，实现监控、多窗口监控、转向、放大缩小等
qq_38008818的博客
07-18 4282
vue接萤石云踩坑之路
萤石视频demo ezuikit-js
01-19
萤石视频demo，包含base-demo，EZUIKitHD，nginx-demo，react-demo，vue-demo格式。可以直接复制使用。
视频监控播放 （UIKit ）
yuer629
04-28 1496
超简单，直接上代码： <!DOCTYPE html> <html> <!-- 第三方平台： https://open.ys7.com/doc/zh/uikit/uikit_javascript.html --> <head> <meta charset="utf-8" ...
❤ 前端JS、Vue使用萤石实现视频回放、云台控制功能
林太白
07-24 2482
❤ 前端JS、Vue使用萤石实现视频回放、云台控制功能
ezuikit-js萤石云
u014708123的博客
12-20 1181
【代码】ezuikit-js萤石云。
在vue展示萤石云监控视频
m0_70947033的博客
02-02 388
萤石云开放平台appKey申请可在开放平台官网注册登录https://open.ys7.com/view/app/app_edit.html（官网）萤石云开放平台:https://open.ys7.com/console/device.html。需要安装下载video和 videojs-contrib-hls。就可以拿到一个地址,复制下来,在下面或用到。
vue2使用ezuikit播放在线视频，支持hls.m3u8
Uxiao7的博客
12-27 867
【代码】vue2使用ezuikit播放在线视频，支持hls.m3u8。
vue使用萤石云监控视频/录像回放功能踩坑记录
最新发布
m0_57121248的博客
05-17 465
vue使用萤石云监控视频/录像回放功能踩坑记录
萤石云播放海康摄像头
12-12
最近做了一个工地上监控，远程查看监控，用了萤石云播放海康的监控摄像具体使用https://blog.csdn.net/qq_29099209/article/details/84969885
萤石云前端页面demo
07-06
萤石云前端页面demo，EZUIKit是基于萤石开放平台OpenSDK封装的UI组件，使用过程中不必学习专业的业务概念，更不用调用繁琐的接口，能够以极简的嵌入方式，快速在您的应用中集成视频功能。 详细了解EZOpen协议 EZUIKit是给客户端用户本地安装使用的，是一个exe执行文件。可以提供一个下载地址让用户下载安装.
EZUIKit-JavaScript-test:海康萤石云测试
05-15
UIKit Javascript 使用说明 #demo_hk1是4个视频框 简介 UIKit，是基于萤石开放平台OpenSDK封装的UI组件，使用过程中不必学习专业的业务概念，更不用调用繁琐的接口，能够以极简的嵌入方式，快速在您的应用中集成视频...
EZUIKit-JavaScript.zip
04-13
萤石的demo
vue自定义指令-实现div和图片的拖拽，放大，缩小
06-20
vue自定义指令--实现div和图片的拖拽，放大，缩小，已封装成组件，下来导入后可直接使用
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
10-14
主要介绍了vue-video-player实现实时视频播放方式(监控设备-rtmp流)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
html实现ezuikit.js萤石云直播监控，ezuikit.js实时监控实现，H5萤石云实时监控简单实现
weixin_43992507的博客
11-29 5835
html实现ezuikit.js萤石云直播监控，ezuikit.js实时监控实现，H5萤石云实时监控简单实现
萤石云 UIKit Javascript 使用
weixin_44042792的博客
05-31 2372
1. 安装 npm install ezuikit-js 2.引用 import EZUIKit from 'ezuikit-js'; （如果全局在main.js引用，否则在页面引入即可） 3. 使用 html部分 <div id="video-container"></div> js部分 this.player = new EZUIKit.EZUIKitPlayer({ id: 'video-container', // 视频容器ID accessToken:.
萤石（海康视频）---vue中使用（ezuikit-js）
wo_1021的博客
07-20 8891
第一次使用萤石直播接入vue中使用，遇到了很多坑，在下面总结以下： 萤石官网：https://open.ys7.com/cn 这个是ezuikit-js的使用方法：https://www.npmjs.com/package/ezuikit-js 第一个坑： 通过官网给的接口https://open.ys7.com/api/lapp/token/get获取accessToken，传入appKey和appSecret后，发现报‘10001’的错，但检查了格式都是正确的，结果发现他的请求头是这样...
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、付费专栏及课程。

余额充值