AI智能视频分析平台EasyCVR前端界面实现实时录像下载功能步骤

TSINGSEE青犀视频云边端架构产品EasyCVR视频云服务支持视频的在线直播和录像回放,为了增强用户体验,我们对EasyCVR的实时录像也增加了下载的功能,在前端页面的开发中,我们增加了一个实时录像下载的入口,具体实现方式如下:

1.在EasyCVR播放页面添加实时录像下载按钮DOM。加入展示判定条件,设备类型为GB和Ehome才展示,并加入onDow事件。

            <FormItem label="实时录像" v-if="deviceType === 'GB'|| deviceType === 'ehome'">
              <span class="Btn" @click.stop="onDow" style="margin: 0">
                <i class="iconfont iconxiazai1" />{{isDow?'停止':'实时'}}录像
              </span>
            </FormItem>

2.加入下载事件

    onDow() {
      this.isDow = !this.isDow
      if (this.isDow) {
        record
        .recordDownloadrecordStart({channel: this.query.channel})
        .then(res => {
          if (res.data !== "OK") {
            this.$Message.error("实时录像失败,请从新尝试!");
            record.recordDownloadrecordStop({channel: this.query.channel})
          }
        }).catch(err => {
          this.$Message.error("实时录像失败,请从新尝试!");
          this.isDow = !this.isDow
          record.recordDownloadrecordStop({channel: this.query.channel})
        })
      } else {
        record
        .recordDownloadrecordStop({channel: this.query.channel})
        .then(res => {
          window.open(`${location.origin}${res.data.DownloadURL}`);
        }).catch(err => {
          this.$Message.error("实时录像获取失败,请从新尝试!");
        })
      }
    },

  

3.按钮点击会切换到 停止录像,按下停止后录像会下载MP4文件在客户端。

AI智能视频分析平台EasyCVR前端界面实现实时录像下载功能步骤

 

 

点击下载后,会在浏览器底端显示下载的内容,至此该条实时录像就已经下载完毕。

AI智能视频分析平台EasyCVR前端界面实现实时录像下载功能步骤

 

 

上一篇:AI视频结构化智能分析平台EasyCVR搭建市教育考试院综合视频安防监控系统


下一篇:AI智能视频分析平台EasyCVR在小屏下出现样式层叠的原因排查与优化