首页 > 其他分享 >前端视频监控和回放方案

前端视频监控和回放方案

时间:2022-12-05 15:11:33浏览次数:125  
标签:视频 回放 接入 前端 暂停 ezuikit 萤石 进行

采用方案:

1、采用了萤石云(属于海康威视旗下的云服务)视频方案。

2、支持第三方、海康部分及萤石云摄像头接入。

3、萤石云接入登录入口:登录-用户认证中心 (ys7.com)

 

绑定流程:

1、注册并登录萤石云平台。

2、在【我的账号 -> 应用信息】填写相关应用信息得到应用秘钥:AppKey、Secret、AccessToken 重要信息需妥善保管。

3、其中可通过AppKey + Secret 可获取到AccessToken,获取方式参见:获取Access Token · 萤石开放平台API文档 (ys7.com) ,其中AccessToken为7天有效期,不可频繁获取,可采用相关存储方案进行储存。

4、在【我的资源 -> 设备列表】接入设备,其中海康部分或萤石云摄像头,可点击 **萤石协议接入 **按钮,填写  设备序列号  及 设备验证码 即可接入,第三方接入则需要选择符合国际协议的设备进行接入,接入之后视频设备详情列表中会出现一条设备信息,并注意该设备是否是在线状态,如果不是在线状态则无法连接。

5、接下来即可编写前端代码进行接入。

 

代码实现:

1、采用了 ezuikit-js 进行视频接入,其相关文档地址:UIKit Javascript · 萤石开放平台API文档 (ys7.com)

2、视频直播及回放相关案例展示:https://open.ys7.com/console/ezuikit/template.html

3、代码二次封装组件案例(实现直播和回放):video-ezuikit.zip

4、调用示例: <VideoEzuikit accessToken="需要获取到的AccessToken" deviceName="G53164888" controller={false} autoplay={false} audioplay={false} width={400} height={200} />

5、按正常步骤都无法获取视频信息,那么则检查视频是否处于加密状态,如果属于加密状态,那么视频则无法播放,必须解密才能进行视频播放,解密方案参见文档:提示“视频已加密”怎么办? - 萤石服务中心 - 萤石官网 - EZVIZ

 

注意事项:

1、其中在使用的时候,组件卸载并不会暂停或卸载视频,反而还会占用很高的内存,所以需要在页面离开的时候把视频暂停(注意:暂停的视频不能再次暂停否则会报错,这个属于video-ezuikit的bug,需要自行进行处理)。

2、这里解决这个bug采用的方式是:在视频组件中赋值了 window._ezuikit_list 相关数组变量进行存储,记录每个video-ezuikit组件中的视频对象,并记录了该对象是否是暂停还是播放状态,那么在切换页面的时候需先进行对 window._ezuikit_list 数组进行遍历查找是否有在播放的视频,有的话则需要调用 .stop() 方法进行暂停(这里采用了setTimeout稍微进行延时处理,先把视频进行暂停),再跳转到其它页面方案进行解决(当然有更好的方案也可以告知我进行改进)。

3、接入多个视频流注意事项,参见ezuikit-js文档:

 

标签:视频,回放,接入,前端,暂停,ezuikit,萤石,进行
From: https://www.cnblogs.com/zion0707/p/16952312.html

相关文章

  • Web前端开发中的MCRV模式
     摘要针对前端开发中基于ajax的复杂页面开发所面临的代码规模大,难以组织和维护,代码复用性、扩展性和适应性差等问题,本文尝试以MVC思想为基础,结合Web前端开发中“内容......
  • 使用七牛云上传视频
    1.七牛云介绍属于第三方文件服务器(国内go语言推崇者),免费的个人存储空间。我们把图片视频等文件资料放在第三方托管平台,这样消耗带宽和硬盘就是消耗的第三方的了。2.......
  • react前端优化小结笔记
    编译阶段的优化主要是webpack开发环境时重复构建更快1.include缩小编译的范围rules:[{test:/\.js$/,use:[{loader:'babel-loader',opt......
  • 前端基础-02-CSS
    CSS介绍CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素。当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染)。CSS语法CSS实例每个CSS......
  • 前端基础-03-JavaScript
    JavaScript概述ECMAScript和JavaScript的关系1996年11月,JavaScript的创造者--Netscape公司,决定将JavaScript提交给国际标准化组织ECMA,希望这门语言能够成为国际标准。次......
  • 前端知识-01-HTML内容
    HTML介绍Web服务本质 importsocketsk=socket.socket()sk.bind(("127.0.0.1",8080))sk.listen(5)whileTrue:conn,addr=sk.accept()data=c......
  • #yyds干货盘点#前端开源动画库Lottie
    最开始前端开发动画时会使用gif图,但是从前端性能的角度来说,gif有以下弊端:GIF图片保存了每一帧的内容,因此造成图片很大;为解决图片过大的问题,大多数情况下都会采用压缩的方式......
  • 北京化工大学物理化学视频/北京化工大学860物理化学电子资料
    详情介绍​​​​​​​​ ......
  • 如何将bilibili上的缓存视频移动到电脑PC上
    1需要的软件手机端、ES文件浏览器、qq或者微信等文件传输工具pc端:qq或微信等 2操作步骤2.1先将文件缓存下来    2.2在ES文件浏览器里找到目录地址是......
  • 第九周总结-MySQL、前端
    多表查询的两种方式1.连表操作: 1.1:innerjoin:内连接,将两张表共同的部分连接在一起生成一张新表。凭借顺序是把后面的表拼在前面表的后面,如果颠倒位置结果不同。 s......