萤石云视频监控对接

文档:萤石云文档(web开发)
示例参考:萤石云DEMO下载
最新SDK及示例:最新SDK及示例

参考博客:vue中实现视频直播(萤石云) - 简书

参考博客:海康威视&萤石摄像头直播/监控模式Vue开发 - 简书

视频直播一听很是高大上,其实就是一个播放器的地址真指向了监控的视频或直播的视频地址。但这个地址,得通过一个平台转播(或叫转换)一下。

我暂且先不管地址怎么来的,只需要了解我们会拿到一个直播或监控的视频地址,我们来用一个播放器播放即可(这里我们选择的平台为萤石云)。
言归正传,直接上步骤:

1. 安装

import  EZUIKit from 'ezuikit-js';

2. 页面引用

import  EZUIKit from 'ezuikit-js';

3. 创建dom

<div id="video-container"></div>

4. 初始化

var player = new EZUIKit.EZUIKitPlayer({
  id: 'video-container', // 视频容器ID
  accessToken: 'at.3bvmj4ycamlgdwgw1ig1jruma0wpohl6-48zifyb39c-13t5am6-yukyi86mz',
  url: 'ezopen://open.ys7.com/203751922/1.live',
})

这里的 accessToken 和 url 可以在官网注册后添加设备可得

直播与视频监控开发区别

1: 直播可使用第三方播放器如video标签等;而视频监控不可
2:直播可使用https开头链接;而视频监控不可,视频监控使用萤石云协议(ezopen://)

ezuikit-js源码了解(主要是播放器模板的区别)
1:simple(极简版)
2:standard(标准版)
3:security(安防版(预览回放))
4:voice(语音版)

1.其中simple最适合用来自定义,ezuikit-js中的大部分代码都是simple的,当给simple进行header,footer等配置时,不满意,可以在源码中进行更改,该源码只有js代码,html和css皆由js来生成,与其通过配置来对simple进行改变,不如对simple自定义(由参考博客1可知萤石云大部分api非常方便使用)

2.standard/security/voice,这是三种固定模板,无法进行配置(由源码可知:本地并无此三种模板的代码,代码在萤石云服务器上),若需对此三种模板进行样式等变更,则需要对不同源iframe进行操作(麻烦)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容