Very high CPU usage on desktop Chrome and Brave browsers #66

pmiklos · 2019-02-07T04:36:00Z

Device Name: Ubuntu Linux (Dell XPS 13, Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz)
Device Version: Ubuntu 16.04.5 LTS ( 4.15.0-42-generic mute the video #45~16.04.1-Ubuntu SMP Mon Nov 19 13:02:27 UTC 2018 x86_64 x86_64 x86_64 GNU/Linux)
Browser Name: Chrome / Brave
Browser Version: Chrome 72.0.3626.81 (Official Build) (64-bit) / Brave 0.58.21 Chromium: 71.0.3578.98 (Official Build)
NoSleep.js Version: 0.9.0

Expected Behavior

Do not use excessive CPU

Actual Behavior

The CPU usage goes up to 170-180% (inspecting in Chrome task manager) as soon as the NoSleep enable() function is called and my laptop starts overheating.

I doesn't seem to happen with Firefox and I also tested on Android 9 (Pixel 3) which didn't seem to overheat or use much cpu.

I understand that the primary target of this library is mobile devices, but it still shouldn't behave as described above on desktop.

Code

I used the live example page

How Do We Reproduce?

Go to the live demo page and enable wake lock, press Shift+Esc and see the CPU usage shooting up.

pmiklos · 2019-02-07T05:55:53Z

It has something to do with the webm file. If I disable that from the video sources, mp4 starts playing and that one uses significantly less cpu (jumping around 10%-20%) .
I wonder why the mp4 is implemented in way to constantly update the video position rather than looping. Looping seems to use less resources.

pmiklos · 2019-02-07T06:28:03Z

generated a new webm video as below that consumes only 1-3% CPU. It's slightly bigger in size though:

 ffmpeg -r 20 -t 1 -s 1x1 -f rawvideo -pix_fmt rgb24 -i /dev/zero noop.mpeg
 ffmpeg -i noop.mpeg -c:v libvpx -an noop.webm

pmiklos · 2019-02-08T04:43:11Z

found a better way, generate a 5sec 1fps webm which doesn't even spike the CPU:

ffmpeg -r 20 -t 4 -s 1x1 -f rawvideo -pix_fmt rgb24 -i /dev/zero noop.mpeg
ffmpeg -i noop.mpeg -c:v libvpx -an -r 1 noop.webm

The only thing is that the code has to be changed to check the currently playing source when testing for the media to loop

if (this.noSleepVideo.currentSrc.includes('video/webm')) {
     this.noSleepVideo.setAttribute('loop', '')
}

LeandroJF · 2019-02-11T16:47:16Z

Hey, can you post here the new generated video files? You can use this tool to convert them to data URI:
https://dopiaza.org/tools/datauri/index.php

Tks in advance

pmiklos · 2019-02-11T19:46:03Z

You can find it here. It required another change in index.js to detect the video (since it's not 1sec anymore). Also I only tested it with Brave and Chrome browsers on desktop and with Android Brave on Pixel 3.

pmiklos@963a9e8

LeandroJF · 2019-02-11T20:05:40Z

Ok, tks

virpo · 2019-02-12T13:35:15Z

I created a pull request that will hopefully fix these CPU issues: #65

viktorvi · 2019-02-22T13:23:58Z

I have same problem with Chrome.

pedromarquesm · 2019-04-18T12:53:50Z

just found out this is the problem for my computer to always having it's fans at max.
CPU usage from Chrome task manager pointed out 170
After disabling NoSleep, way below 20...
any fix by now?

hugovk · 2019-04-18T13:20:56Z

@pedromarquesm Use NoSleep.js from #65.

pedromarquesm · 2019-04-18T14:25:33Z

last commit on 5 december of 2018. is this repo already dead?
There are improvements not being accepted...

garygrubb · 2019-04-19T07:27:14Z

found a better way, generate a 5sec 1fps webm which doesn't even spike the CPU:
ffmpeg -r 20 -t 4 -s 1x1 -f rawvideo -pix_fmt rgb24 -i /dev/zero noop.mpeg
ffmpeg -i noop.mpeg -c:v libvpx -an -r 1 noop.webm
The only thing is that the code has to be changed to check the currently playing source when testing for the media to loop
if (this.noSleepVideo.currentSrc.includes('video/webm')) {
     this.noSleepVideo.setAttribute('loop', '')
}

Thank you. This really makes a difference. It reduced by CPU utilisation from 50% to almost idle.

a22aaass · 2019-04-24T03:57:04Z

found a better way, generate a 5sec 1fps webm which doesn't even spike the CPU:
ffmpeg -r 20 -t 4 -s 1x1 -f rawvideo -pix_fmt rgb24 -i /dev/zero noop.mpeg
ffmpeg -i noop.mpeg -c:v libvpx -an -r 1 noop.webm
The only thing is that the code has to be changed to check the currently playing source when testing for the media to loop
if (this.noSleepVideo.currentSrc.includes('video/webm')) {
     this.noSleepVideo.setAttribute('loop', '')
}
Thank you. This really makes a difference. It reduced by CPU utilisation from 50% to almost idle.

how can i use it?
"ffmpeg -r 20 -t 4 -s 1x1 -f rawvideo -pix_fmt rgb24 -i /dev/zero noop.mpeg
ffmpeg -i noop.mpeg -c:v libvpx -an -r 1 noop.webm"

garygrubb · 2019-04-24T06:28:24Z

found a better way, generate a 5sec 1fps webm which doesn't even spike the CPU:
ffmpeg -r 20 -t 4 -s 1x1 -f rawvideo -pix_fmt rgb24 -i /dev/zero noop.mpeg
ffmpeg -i noop.mpeg -c:v libvpx -an -r 1 noop.webm
The only thing is that the code has to be changed to check the currently playing source when testing for the media to loop
if (this.noSleepVideo.currentSrc.includes('video/webm')) {
     this.noSleepVideo.setAttribute('loop', '')
}
Thank you. This really makes a difference. It reduced by CPU utilisation from 50% to almost idle.
how can i use it?
"ffmpeg -r 20 -t 4 -s 1x1 -f rawvideo -pix_fmt rgb24 -i /dev/zero noop.mpeg
ffmpeg -i noop.mpeg -c:v libvpx -an -r 1 noop.webm"

You need to run the ffmpeg commands on a Linux machine where the tool is available to generate the template video files. Use thee videos in NoSleep.js instead of importing the strings which are present by default.

This is my code in a react project.

// const webm= 'data:video/webm;base64,G...3AA/vz0AAA=';
// const mp4= 'data:video/mp4;base64,AAAAIG...DA=';

import webm from './webm.webm'
import mp4 from './mp4.mpeg'

Also don't forget to update the if statement as described in previous post.

a22aaass · 2019-04-24T07:25:50Z

found a better way, generate a 5sec 1fps webm which doesn't even spike the CPU:
ffmpeg -r 20 -t 4 -s 1x1 -f rawvideo -pix_fmt rgb24 -i /dev/zero noop.mpeg
ffmpeg -i noop.mpeg -c:v libvpx -an -r 1 noop.webm
The only thing is that the code has to be changed to check the currently playing source when testing for the media to loop
if (this.noSleepVideo.currentSrc.includes('video/webm')) {
     this.noSleepVideo.setAttribute('loop', '')
}
Thank you. This really makes a difference. It reduced by CPU utilisation from 50% to almost idle.
how can i use it?
"ffmpeg -r 20 -t 4 -s 1x1 -f rawvideo -pix_fmt rgb24 -i /dev/zero noop.mpeg
ffmpeg -i noop.mpeg -c:v libvpx -an -r 1 noop.webm"
You need to run the ffmpeg commands on a Linux machine where the tool is available to generate the template video files. Use thee videos in NoSleep.js instead of importing the strings which are present by default.

This is my code in a react project.
// const webm= 'data:video/webm;base64,G...3AA/vz0AAA=';
// const mp4= 'data:video/mp4;base64,AAAAIG...DA=';

import webm from './webm.webm'
import mp4 from './mp4.mpeg'
Also don't forget to update the if statement as described in previous post.

yep,i get it
tks!!!! I hope we shall be good friends

jmcbee · 2019-09-12T09:54:02Z

Man, I thought I was going crazy. I've been trying to profile my reactjs app trying to find the problem. I didn't think it would be caused by this lib.

pedrommarquesm · 2019-09-12T09:56:58Z

Man, I thought I was going crazy. I've been trying to profile my reactjs app trying to find the problem. I didn't think it would be caused by this lib.

well, don't even try to profile it on development mode :) I was getting almost 1gb of memory use (well because of development mode)
of course a normal memory use, in production mode is about 20-50mb.

I also had a similar problem with a particular version of typescript. the filewatcher was very CPU intensive. eventually they solved it

timtribers · 2020-06-08T10:50:08Z

Can't wait to use the latest version of this lib (thx for all the hard work recently @richtr), but unfortunately I'm stuck on v0.8 - if I move to any later release I get this problem of maxed out CPU in Chrome (on Windows). I take it that the video file changed after that release. Does it need something like PR#65 to fix this? (Will post this there too)

mhmo91 · 2020-07-10T09:14:55Z

Man, I thought I was going crazy. I've been trying to profile my reactjs app trying to find the problem. I didn't think it would be caused by this lib.

Same here!
there should be a Warning somewhere in the library readMe. i wasted sooooo many hours because of this!!!

richtr · 2020-12-16T00:11:15Z

The video files suggested in #65 have now been merged to master (via 2ebb901).

This should reduce CPU usage based on the discussions from #65.

I will release a new version of this library shortly with these fixes included.

MasterInQuestion · 2023-04-16T12:06:25Z

[ Quote pmiklos @ CE 2019-02-07 05:55:53 UTC:
https://github.com/richtr/NoSleep.js/issues/66#issuecomment-461297387
I wonder why the mp4 is implemented in way to constantly update the video position rather than looping. Looping seems to use less resources. ]
<^> Related commits:
https://github.com/richtr/NoSleep.js/pull/32/files#diff-89779e3bb9293db4f0888f94691e5e313edfe27a2a234cf037e866f9f197abc8R27-R31
https://github.com/richtr/NoSleep.js/commit/016580ddd200ff6e7a12f0904c314e3ee2c9bae1#diff-bfe9874d239014961b1ae4e89875a6155667db834a410aaaa2ebe3cf89820556R25

Also note: theoretically updating the playback position (when done properly) should cause less load than looping the whole video.
NoSleep.js failed to do so by listening on the wrong event ("timeupdate") and doing pointless operations (`if ( currentTime > 0.5 )` and `Math.random()`).

a22aaass · 2023-04-16T12:06:46Z

什么事吖

MasterInQuestion · 2023-04-18T23:33:11Z

@a22aaass,
Initially I thought your reply was an AI generated test [1], my apologies.
After more careful checking I noted your reply might be of actual meaning.
.
So I would like to inform you that I'm recently analyzing the optimal way to implement the WakeLock.
For more details, check the linked posts. (or my recent activities)

[1] Due to the extremely close timestamp to my post, and some low-effort background research that happened to have failed.

timtribers mentioned this issue Jun 8, 2020

Use longer blank media files to improve CPU load #65

Closed

Danue1 mentioned this issue Jun 19, 2020

NoSleep.js eats a lot of CPU power in latest desktop Google Chrome #98

Closed

richtr closed this as completed Dec 16, 2020

MasterInQuestion mentioned this issue Apr 16, 2023

[question] about the HTML5-VIDEO-tag #68

Closed

Very high CPU usage on desktop Chrome and Brave browsers #66

Very high CPU usage on desktop Chrome and Brave browsers #66

pmiklos commented Feb 7, 2019 •

edited

pmiklos commented Feb 7, 2019

pmiklos commented Feb 7, 2019

pmiklos commented Feb 8, 2019

LeandroJF commented Feb 11, 2019

pmiklos commented Feb 11, 2019 •

edited

LeandroJF commented Feb 11, 2019

virpo commented Feb 12, 2019 •

edited

viktorvi commented Feb 22, 2019

pedromarquesm commented Apr 18, 2019

hugovk commented Apr 18, 2019

pedromarquesm commented Apr 18, 2019

garygrubb commented Apr 19, 2019

a22aaass commented Apr 24, 2019

garygrubb commented Apr 24, 2019 •

edited

a22aaass commented Apr 24, 2019

jmcbee commented Sep 12, 2019

pedrommarquesm commented Sep 12, 2019 •

edited

timtribers commented Jun 8, 2020

mhmo91 commented Jul 10, 2020

richtr commented Dec 16, 2020

MasterInQuestion commented Apr 16, 2023 •

edited

a22aaass commented Apr 16, 2023 via email

MasterInQuestion commented Apr 18, 2023 •

edited

Very high CPU usage on desktop Chrome and Brave browsers #66

Very high CPU usage on desktop Chrome and Brave browsers #66

Comments

pmiklos commented Feb 7, 2019 • edited

Expected Behavior

Actual Behavior

Code

How Do We Reproduce?

pmiklos commented Feb 7, 2019

pmiklos commented Feb 7, 2019

pmiklos commented Feb 8, 2019

LeandroJF commented Feb 11, 2019

pmiklos commented Feb 11, 2019 • edited

LeandroJF commented Feb 11, 2019

virpo commented Feb 12, 2019 • edited

viktorvi commented Feb 22, 2019

pedromarquesm commented Apr 18, 2019

hugovk commented Apr 18, 2019

pedromarquesm commented Apr 18, 2019

garygrubb commented Apr 19, 2019

a22aaass commented Apr 24, 2019

garygrubb commented Apr 24, 2019 • edited

a22aaass commented Apr 24, 2019

jmcbee commented Sep 12, 2019

pedrommarquesm commented Sep 12, 2019 • edited

timtribers commented Jun 8, 2020

mhmo91 commented Jul 10, 2020

richtr commented Dec 16, 2020

MasterInQuestion commented Apr 16, 2023 • edited

a22aaass commented Apr 16, 2023 via email

MasterInQuestion commented Apr 18, 2023 • edited

pmiklos commented Feb 7, 2019 •

edited

pmiklos commented Feb 11, 2019 •

edited

virpo commented Feb 12, 2019 •

edited

garygrubb commented Apr 24, 2019 •

edited

pedrommarquesm commented Sep 12, 2019 •

edited

MasterInQuestion commented Apr 16, 2023 •

edited

MasterInQuestion commented Apr 18, 2023 •

edited