Why import { CanvasCapture } from 'canvas-capture' cause cpu usage 99%?

[wxfred]

I‘m using electron to develop vue app, and only import this package with import { CanvasCapture } from 'canvas-capture' the Chrome Performance monitor shows the cpu usage is up to 99%! After commented out the import, the cpu usage is lower than 10%.

[amandaghassaei]

Hey, thanks for the issue. Can you be a little more specific, which performance monitor in chrome? The built-in one in the devtools? can you post a screenshot?

Nothing really "happens" in my codebase when the import occurs, so I wonder if this is coming from a dependency. Do you have any insight into what functions are being called that are hogging the CPU?

[wxfred]

Hey, thanks for the issue. Can you be a little more specific, which performance monitor in chrome? The built-in one in the devtools? can you post a screenshot?

Nothing really "happens" in my codebase when the import occurs, so I wonder if this is coming from a dependency. Do you have any insight into what functions are being called that are hogging the CPU?

Yes, the built-in one in the devtools. Thanks for replay, I will create another empty project to test.

[wxfred]

Steps to reproduce the problem: 1.Install vue-cli, create a test project

npm install -g @vue/cli
vue create canvascapture
cd ./canvascapture

2.Add electron dev tool, install canvas-capture, and run

vue add electron-builder
npm install canvas-capture --save
npm run electron:serve

3.Press F12 to open Chrome Dev Tools in your electron app, check the Performance monitor, the CPU usage is low currently

4.Import CanvasCapture in Home.vue, save the change, then check the monitor again, the CPU usage is up to 99%

...
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import { CanvasCapture } from 'canvas-capture'
console.log(CanvasCapture)

export default {
...

By the way, the final product (npm run electron:build) has no weird cpu high usage. Maybe something in electron dev mode are conflict with canvas-capture.

[amandaghassaei]

thanks for this info. will take a look when I get the chance. good to know it's not affecting the final build!

[wxfred]

I found that, if I require CanvasCapture in mounted, the CPU usage will be fine.

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
//import { CanvasCapture } from 'canvas-capture' // not work
//const { CanvasCapture } = require('canvas-capture') // not work, wrapping with setTimeOut is the same
let CanvasCapture

export default {
  mounted() {
    const CC = require('canvas-capture') // it works
    CanvasCapture = CC.CanvasCapture
  }
}

It is weird, but seems to be a work around.

[amandaghassaei]

thanks for the update on this @wxfred !

[SvetlozarValchev]

Same problem here, the whole browser is lagging (Chrome 117.0.5938.132). My CPU is i9 13900K so it's definitely not a hardware issue. @wxfred's proposal solves it, but then I lose TypeScript types.

[amandaghassaei]

@SvetlozarValchev yeah sorry about that - I'm hoping to do a big rewrite of this when I get to it with my current project that should fix these issues. A lot of the code in the repo (e.g. gifjs, CCapture, all the ffmpeg stuff) was not written by me and it does not seem to be playing well in compiled js environments.