Prevent computer or display sleep with HTML5/JavaScript

Include the sleep.js script in your page, then control the computer's sleep functionality by calling:

 sleep.prevent()
 sleep.allow()

Take a look at the example.html file to see it in action.

Limitations

Tested on 2015-01-01 on Mac OS X Yosemite (10.10.1) with Chrome 39.0.2171.95, Firefox 34.0.5, Safari 8.0.2.

This table explains the ability of the script to prevent sleep in different scenarios.

                           |IE |Chrome|Firefox|Safari

-------------------------------|:-:|:----:|:-----:|:----: If is selected tab |? |Yes |Yes |No
If is not selected tab |? |No |Yes |No
If browser isn't in foreground |? |Yes |Yes |No

How does it work?

This approach uses a small empty video that is inserted in the page, but off-screen, without sound, but importantly: with an audio track.

This hack in reality controls the video playback which is what makes the browser stay awake.

Troubleshooting

The video files are at these locations; make sure they are accessible:

https://github.com/ivanmaeder/computer-sleep/raw/master/resources/muted-blank.mp4

https://github.com/ivanmaeder/computer-sleep/raw/master/resources/muted-blank.ogv

Check that your browser supports these video formats.

Check that your browser normally stays awake when playing video.

References:

http://stackoverflow.com/questions/10377453/play-infinitely-looping-video-on-load-in-html5

http://stackoverflow.com/questions/26896400/how-to-allow-system-sleep-on-non-fullscreen-html5-video

https://productforums.google.com/forum/#!msg/youtube/C72RHsRYDpo/XE15rBP3gZUJ