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文件在客户端。
点击下载后,会在浏览器底端显示下载的内容,至此该条实时录像就已经下载完毕。