[Vuejs]-Memory Leak when Drawing Video to Canvas using requestAnimationFrame

0๐Ÿ‘

โœ…

I found the problem was in this.canvas.captureStream(). I want to collage 1920ร—1080 side by side to create dual-monitor screen recorder, therefore I need a big canvas with a width of 3840ร—1080. I think that Javascript does not have enough time to do a garbage collector, when I tried to do single recording, with the resolution 1920*1080, everything goes to normal.

Here, if we would to do captureStream on the big canvas, we should choose to sacrifice one of two things below:

  • Set canvas capture stream to less fps for example 15 or 10 fps, for example,
    this.captureStream(10) for 10 fps

  • Second option is to rescale to smaller canvas size without sacrifice the fps.

Leave a comment