获取视频第一帧

故事背景: 服务端今天又跑过来了, 说新服务 docker 无法安装获取视频第一帧的服务了,问前端有没有办法获取第一帧. 其实之前有看过相关文档, 通过 canvas 来获取指定帧.通过查看相关资料我们写下了如下代码:

  uploadVideoImg(file) {
      return new Promise(resolve => {
        var fileUrl = URL.createObjectURL(file)
        var videoElement = document.createElement('VIDEO')
        videoElement.src = fileUrl
        videoElement.autoplay = true
        videoElement.addEventListener('loadeddata',  function (_event)  {
        const canvas = document.createElement('canvas')
        canvas.width = videoElement.videoWidth
        canvas.height = videoElement.videoHeight
        canvas.getContext('2d').drawImage(videoElement, 0, 0, canvas.width, canvas.height)
        const dataone = new FormData()
        // 直接给 base64 给服务端显然不合理, base64 一般上万字符左右, 存在 DB 肯定会出现慢查询问题, 所以我们我们把 base64 转化为文件流的形式上传获取 url 再给服务端.
        dataone.append('file', new File([base64toBlob(canvas.toDataURL('image/png'))], new Date() + '.jpg')) // 上传的是 File 对象
        axios({
          url: `${process.env.VUE_APP_UPLOADER_API}/file/upload` + '',
          data: dataone,
          method: 'post',
          headers: {'Content-Type': 'multipart/form-data', 'X-Token': getToken()},
          processData: false,
          contentType: false
        }).then(res => {
          resolve(res?.data?.data?.filePath)
        })
        })
      })
    },