文档:萤石云文档(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进行操作(麻烦)
网友评论