视频截图功能实现及遇到的坑点

---

前言

最近项目有个需求：实现多屏展示页面一键截屏功能，通俗点讲就是将多屏展示页面正在播放的所有监控画面截图保存在一张图片上并下载到本地。接下来笔者将分享实现该需求的思路及过程中遇到的问题和解决方案。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、总体思路

最初我想到的方案是首先全屏显示多屏展示区域，然后调用系统自带的截屏功能。然而这个方案很快被证明不可行，因为js语言无法调用window系统自带的截屏功能。接下来我想到用html2canvas这个前端常用的截图插件，它可以对页面dom元素进行截图，尝试后发现截出来是空白图片，百度后找到原因是html2canvas压根无法对视频进行截图。接下来我转变思路，首先利用canvas截取每个播放窗口的视频画面，然后再将这些截图绘制在一张画布上，最后转换成base64位字符串格式的图片导出。

二、代码实现

代码如下（示例）：

......
<el-button @click="printScreen">截屏</el-button>
......

//  对所有播放窗口进行截屏
printScreen() {
   
  // 获取所有video标签
  let videos = this.$el.querySelectorAll('video')
  // 单个播放窗口长和宽
  let videoWidth = videos[0].offsetWidth
  let videoHeight = videos[0].offsetHeight
  // 当前多屏展示页面的行列数
  let len = Math