萤石摄像头实现web端监控预览以及录像回放
文章目录
- 前言
- 一、在萤石云平台上注册账号并添加设备以及创建应用
- 二、利用云平台的api获取到前端展示需要的相关信息
- 三、前端页面展示内容
- 总结
前言
前段时间对接了萤石摄像头，在此做一次总结，总体思路是：把萤石摄像头绑定到萤石云平台上，利用云平台的api来获取到access_token等信息，最终拼接成一个url，放在一个iframe标签中即可。
提示：以下是本篇文章正文内容，案例可供参考
一、在萤石云平台上注册账号并添加设备以及创建应用
萤石云平台
PC客户端下载
在萤石云平台上进行账号注册和登录。
在PC客户端中登录已经注册的账号以后进行设备添加，添加以后效果如下：我这里是几个摄像头挂在了录像机上面，所有就显示了一个设备，几个摄像头又被分在了不同的通道上。
在我的账号下我的应用中创建一个应用，后续调用平台的api需要用到。
在PC客户端里也可以对摄像头的一系列相关信息进行编辑，这里就不再详述。
二、利用云平台的api获取到前端展示需要的相关信息
获取accessToken接口文档
获取用户下的直播地址列表
视频参考地址如下
下载ezuikit.js
三、前端页面展示内容
前端页面展示案例效果如下：
前端页面添加设备以后的展示效果如下：这里设备不在线，所有没法看到实时视频以及回放。
其中iframe的src为：src=“https://open.ys7.com/ezopen/h5/iframe_se?url=ezopen://open.ys7.com/F43268732/1.live&autoplay=1&audio=1&accessToken=at.ck3a0s9z4kgnfvva2xocucbh4twah1kf-99s18gqdat-1j0nwew-v6sm6jtbp&templete=2”
其中url=ezopen://open.ys7.com/F43268732/1.live,"F43268732"为录像机的设备序列号,"1"为摄像头的通道号。
最后直接把拼接的iframe放入到web端的html页面中即可。
总结
对接萤石摄像头主要是在萤石云平台的基础上对接的，差不多是平台完成了这个功能，而我这边只是利用了平台的这个工具而已，有很大的局限性，对摄像头更详细的信息并没有深入了解，还是停留在了使用的阶段，就此做一下记录。
萤石摄像头实现web端监控预览以及录像回放相关推荐
- 莹石云(EZVIZ) 实时视频预览、录像回放、语音对讲
莹石云(EZVIZ) 实时视频预览.录像回放.语音对讲插件地址:https://ext.dcloud.net.cn/plugin?id=2454
- uni-app 海康(HIKVISION)实时视频预览、录像回放、语音对讲
uni-app 海康(HIKVISION)实时视频预览.录像回放.语音对讲:https://ext.dcloud.net.cn/plugin?id=2403
- uni-app 海康实时视频预览、录像回放、倍数回放、抓图、声音、录像、语言对讲、鱼眼 V2
地址:海康实时视频预览.录像回放.倍数回放.抓图.声音.录像.语言对讲.鱼眼 V2 - DCloud 插件市场 海康iSecure Center实时视频预览.录像回放.倍数回放.抓图.声音.录像.语言 ...
- pdfh5.js 基于pdf.js和jQuery，web/h5/移动端PDF预览手势缩放插件。
pdfh5.js 基于pdf.js和jQuery,web/h5/移动端PDF预览手势缩放插件. 注意:本地绝对路径地址不能加载,跨域问题用代理或者服务端解决. svg模式渲染存在缺陷,只能渲染普通pd ...
- java开发调用海康威视摄像头的web端页面开发心得
最近在开发过程中 需要用到海康威视的摄像头 在web端展示 在各种百度之后 发现网上很难找到一个 简便,可靠的教程 在摸索着完成项目之后 ,决定写一篇攻略 造福有需求的小伙伴 言归正传 首先需 ...
- 海康威视webservice接口获取监控预览地址调查
目的:获取海康威视摄像头实时监控预览URL地址 一. 通过海康管理平台抓包获取 登录海康管理平台,到实时监控场景下 抓包两个主要的数据流 第一个:获取树节点,也就是监控点列表. 第二步:获取id为 ...
- ftp 文件服务器预览,web文件服务器 ftp 预览
web文件服务器 ftp 预览 内容精选 换一换 该任务指导用户使用Loader将数据从HBase导出到SFTP服务器.创建或获取该任务中创建Loader作业的业务用户和密码.确保用户已授权访问作业执 ...
- 手机端与PC端在线预览PDF
问题场景 公司需要把出具的报告在PC端在线预览,之前一直用embed标签解决,效果很好.产品提出在手机端(微信链接或者手机浏览器)也要在线预览,尴尬的是安卓端提示的是下载,IOS端只能看不能滑动.经一 ...
- 手机端html5展示pdf,pdf.js移动端展示预览打开pdf-pdfh5.js
pdf.js移动端展示预览打开pdf-pdfh5.js 本插件基于pdf.js和jQuery,可手势捏合缩放,支持懒加载(即分段加载). 2019.07.18更新:增加npm install pdfh ...
- js实现移动端图片预览：手势缩放， 手势拖动，双击放大...
原文:js实现移动端图片预览:手势缩放, 手势拖动,双击放大... 前言 本文将介绍如何通过js实现移动端图片预览,包括图片的 预览模式,手势缩放,手势拖动,双击放大等基本功能: 扫码查看示例效果: ...
最新文章
- 案例精解企业网络构建读书笔记之网络故障排除案例
- Winupdatelist
- c语言中oxb0常量是什么意思,C语言练习库V1.0
- 每天一个Linux命令之date
- 第一章 基础知识---1.4Crack小实验--复现
- 2、压滤机现场图片和组成部分详细构造
- C/C++中break、return、continue和goto在循环语句中的使用
- 学习遗忘曲线_级联相关，被遗忘的学习架构
- python破解wifi-Python利用字典破解WIFI密码的方法
- 关于使用 View Binding 不生效的记录
- 易班自动答题脚本_Python实现手机APP之自动打卡签到详细教程（小白合适）
- H265 SAO 技术
- 一文带你吃透黑盒测试跟白盒测试的区别
- springboot实现数据库数据导出生成Excel报表
- 虚拟机里博图能连接上实物PLC，但是HMI仿真不能连接实物PLC
- 万能密码为什么能成功
- 微软面试中考察的核心竞争力，有哪些？
- 使用python爬取天气信息（包括历史天气数据）
- 微信在线答题如何制作？
- 使用EasyPoi根据模板导出Excel或word文档