前端React项目中实现萤石云ezuikit摄像头的播放与控制

本文介绍了如何在React项目中使用ezuikit库集成萤石云摄像头,包括下载萤石云开放平台的demo,实现基础播放功能,以及添加控制摄像头移动和缩放的功能。通过组件化和事件处理,实现了摄像头的实时播放和云台控制。
摘要由CSDN通过智能技术生成

最近要在react项目中使用萤石云提供的ezuikit库来接入萤石云摄像头,实现远程播放、控制移动、放大缩小等功能,首先百度搜类似的需求,搜不到,只能自己采坑,登萤石云官网,看对应文档。

一、登录萤石云开放平台,下载demo并运行

  • 在萤石云开放平台官网(https://open.ys7.com)的导航栏中,点击下载按钮
  • 页面下方,分别有对应JavaScript、Android、IOS的demo,这里,我们下载JavaScript
    下载demo
  • 下载的demo中,会有对应的原生js摄像头案例,以及用vue、react框架的案例,打开下载的文件里的EZUIKit-JavaScript-npm\demos\react-demo,先用npm或者yarn下载依赖,之后执行npm run start命令就可以运行demo了,
  • 直接启动的话,代码中需要将一些参数修改为真实数据才能看到真实的摄像头画面

二、在实际项目中使用,实现基础播放功能

  • 首先,项目要下载依赖,在react中,用npm或者yarn下载ezuikit-js
  • 页面引入下载的库
    import EZUIKit from 'ezuikit-js'
  • render钩子中
  • 3
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 12
    评论
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值