SkeyeVSS综合安防视频云服务通过接入SkeyeRMS录像服务器实现对系统里的摄像机等设备录像，通过自定义的时间轴组件对录像记录进行加载渲染,播放器回调时间与下面时间轴相互联动，集拖动、点击、缩放、无限加载等于一体的时间轴组件。
通过接口获取录像回放记录的列表，数据结构中包含每段录像的开始与结束时间，把每段记录绘制到时间轴上，左右拖动会自动触发日期的改变回调，再通过接口去获取对应日期的数据，方便我们整体查看，点击有录像的时间段区域或拖动指针（三角形）返回当前时间戳，再配合拉流进行播放，通过滚轮缩放最小精确到秒，最终效果如图所示：
时间轴组件基本功能 时间轴初始化代码及录像时间段的数据格式，如下：
<div class="timeline-group" id="timeline"></div>
let times = [
{
begin: new Date(new Date('2022-04-14 11:30:00')).getTime(),
end: new Date(new Date('2022-04-14 17:00:00')).getTime()
},
{
begin: new Date(new Date('2022-04-14 17:01:00')).getTime(),
end: new Date(new Date('2022-04-14 19:00:00')).getTime()
}
]
let TimeAxis = new TimeLine({
dom: document.getElementById('timeline'),
bg: '#000',
date: new Date(new Date('2022-04-14').toLocaleDateString()).getTime(),
cellStyle: {
background: 'rgba(24,208,217,0.5)'
},
timecell: [...times],
callback: (data) => {
// {mode: 触发方式 timestamp: 时间戳 valid: 是否有效}
console.log(data)
this.$emit('changeTime', data)
}
})1、时间轴组件是使用canvas技术绘制，组件的宽高是自动根据外层div的宽高来自适应，通过设置外层div的宽高来控制即可。
- 创建canvas
- 注册事件
- 初始化边框
- 渲染时间轴
- 初始化刻度线
- 渲染播放指针
- 有效时间区域填充时间段
this.canvas.addEventListener('contextmenu', (e) => {
e.preventDefault();
});
this.canvas.addEventListener('mousemove', this.canvasMousemoveFunc.bind(this));
// 滚轮事件
this.canvas.addEventListener('mousewheel', this.mousewheelFunc.bind(this));
this.canvas.addEventListener('mousedown', this.mousedownFunc.bind(this));
this.canvas.addEventListener('mouseup', this.mouseupFunc.bind(this));
this.canvas.addEventListener('mouseout', this.mouseoutFunc.bind(this));
this.canvas.addEventListener('click', this.clickFunc.bind(this));
2、设置时间段默认填充色, 背景填充色, 时间段还可设置不同的填充色，来区分不同的时间段,在数据结构中添加 style字段参数即可，如果在数据结构中添加了style字段，则优先使用style，没有style参数时再使用cellStyle参数，如果cellStyle参数不存在，则使用内置的默认填充色，如下图：
let times = [
{
begin: new Date(new Date('2022-04-14 11:30:00')).getTime(),
end: new Date(new Date('2022-04-14 17:00:00')).getTime(),
style: {
background: 'rgba(172,17,189,0.5)'
}
}
]
cellStyle: {
background: 'rgba(24,208,217,0.5)'
},
bg: '#000',
3、左右拖动，拖动时间轴时组件会自动监听日期的变化，实现无限加载每天的录像回放记录，将记录的时间段渲染到时间轴上，滚轮缩放 ，通过绑定滚轮事件来控制时间轴的放大与缩小,
this.canvas.addEventListener('mousewheel', this.mousewheelFunc.bind(this));
mousewheelFunc(event) {
if (event && event.preventDefault) {
event.preventDefault()
} else {
window.event.returnValue = false;
return false;
}
let e = window.event || event;
let delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
let posX = this.getCursorPositionX(e);
let middle_time = this.date + posX * (this.zoomHours * 3600 * 1000) / (this.canvasWidth); //ms 记住当前中间的时间
if (delta < 0) {
this.zoomHours = this.zoomHours - delta;
if (this.zoomHours >= 24) {
this.zoomHours = 24;//放大最大24小时
}
} else if (delta > 0) {// 放大
this.zoomHours = this.zoomHours - delta;
if (this.zoomHours <= 1) {
this.zoomHours = 1;//缩小最小1小时
}
}
this.clearCanvas();
this.date = middle_time - posX * (this.zoomHours * 3600 * 1000) / (this.canvasWidth);
this.initCanvasCtx()
}4、配合SkeyeWebPlayer网页播放器，实现回放，在播放器callbackFunc回调中获取到当前播放的时间，通过TimeAxis.updateTime(时间戳)方法更新时间轴上面的播放指针位置，达到联动效果。
5、时间轴上单击右键 和 拖动指针结束后都会返回当前位置 获取当前点击位置 计算出时间戳，通过callback返回，拿到时间可生成播放地址或拉取播放信息，传到播放器中播放，在返回的参数中已经判断好当前时间是否为有效时间。mode判断是点击或拖动，valid判断时间是否在有效区域 如图：
