将Mat实例克隆存储到阵列时发生内存泄漏

Question

我正在阅读视频，并将每个帧的Mat实例克隆存储到数组中，这样我就可以按需播放并分析帧。一旦处理完视频并将帧存储在数组中，JSArrayBufferData中的内存快照就会从150Mb增加到1000Mb。

我不得不提到我正在使用Vue.js前端框架将数组存储在vue的可观察数据中，即数组。

我试图删除并将每个帧设置为零，只是为了查看是否会释放内存，但是似乎没有任何作用。

也许由于我使用递归函数调用，这也有事情要做 https://jsfiddle.net/j93tmr6f/

    new Vue({
  el: "#app",
  data: {
   videoFrames: [],
   videoFile: null,
   frame: null,
   videoCap: null,
  },
  methods: {
  videoEnded() {
  console.log('ended')
     this.streaming = false
      // show first frame from small frames array
      this.playFrame(this.videoFrames[11])
    },
    videoChanged: function(fieldName, file){
        this.videoFile = URL.createObjectURL(file[0])
      this.$refs.videoRef.src = this.videoFile
      this.loadFrames()
    },
    loadFrames() {
      this.isProcessing = true
            this.streaming = true
      this.videoFrames = []
      const videoRef = this.$refs.videoRef
      const [height, width] = [720, 1280]
      this.$refs.canvasOutput.width = width / 2
      this.$refs.canvasOutput.height = height / 2
      videoRef.width = width
      videoRef.height = height

      this.videoCap = new cv.VideoCapture(videoRef)
      videoRef.play()

      setTimeout(this.scanFrames, 0)

  },
  scanFrames() {
    if (!this.streaming) return 
      try {
        const [height, width] = [720, 1280]

        this.frame = new cv.Mat(height, width, cv.CV_8UC4)
        let begin = Date.now()
        this.videoCap.read(this.frame)
        this.videoFrames.push(this.frame.clone())
        cv.imshow('canvasOutput', this.frame)
        // remove the processed frame from memory.
        this.frame.delete()

        // schedule the next one.
        let delay = 1000 / this.FPS - (Date.now() - begin)
        setTimeout(this.scanFrames, delay)
      } catch (err) {
        console.log(err)
      }
    },
    }
})

这或多或少是代码的结构。由于内存错误，它无法正常运行。

我想从Chrome中释放内存，因为现在每次分析视频时，它的内存占用量都可能高达9GB。您可以想象这不是理想的结果。