CODEWITHSUNDEEP
androidhtml
Mrgoos
Mrgoos

Reputation: 243

In HTML5, how can I keep an Android device’s screen on?

We are developing an App in HTML5 using jQuery.

Is there a way/method, in JavaScript or another technology, to keep the screen "on"?

Upvotes: 22

Views: 20736

Answers (6)

Ayman Morsy
Ayman Morsy

Reputation: 1419

The future answer - because it's experimental now - is to use the new API called: Screen Wake Lock API

I think you can mix it with previous workaround answers

// Create a reference for the Wake Lock.
let wakeLock = null;

// create an async function to request a wake lock
try {
  wakeLock = await navigator.wakeLock.request('screen');
  statusElem.textContent = 'Wake Lock is active!';
} catch (err) {
  // try other solutions here ...
}

You can follow the support of this feature here

Upvotes: 10

Herbi Shtini
Herbi Shtini

Reputation: 2040

I think there is another way doing it without any java code. You can add a video of 1 second with infinite repeat and hidden and it will do the trick. I have read it somewhere but i don't remember where.

Maybe you could use one of the blank videos below:

  1. https://github.com/esc0rtd3w/blank-intro-videos
  2. https://github.com/kud/blank-video

IT WORKS!

Upvotes: 32

MadeInLagny
MadeInLagny

Reputation: 185

Keeping the device on does not depend on the OS but on the browser. Chrome is in the process of implementing Wake Lock API, but it is still experimental.

Until fully available, there is a way to mock the api by playing a base64 video in the background. This locks the sleep mode with all browsers.

You can find a webcomponent implementation here https://github.com/madeInLagny/mil-no-sleep

Upvotes: 1

dave1010
dave1010

Reputation: 15425

Google's WebVR polyfill has a way to do this on Chrome. It basically creates a tiny video (with a data URL, so no extra downloads needed) and loops it.

It seems like a hack, so I wouldn't be surprised if it's not reliable in the future.

They have code that achieves the same thing on iOS too, by triggering a location update.

Here's the relevant code for Android:

var Util={};
Util.base64 = function(mimeType, base64) {
  return 'data:' + mimeType + ';base64,' + base64;
};

var video = document.createElement('video');
  video.setAttribute('loop', '');

  function addSourceToVideo(element, type, dataURI) {
    var source = document.createElement('source');
    source.src = dataURI;
    source.type = 'video/' + type;
    element.appendChild(source);
  }

  addSourceToVideo(video,'webm', Util.base64('video/webm', 'GkXfo0AgQoaBAUL3gQFC8oEEQvOBCEKCQAR3ZWJtQoeBAkKFgQIYU4BnQI0VSalmQCgq17FAAw9CQE2AQAZ3aGFtbXlXQUAGd2hhbW15RIlACECPQAAAAAAAFlSua0AxrkAu14EBY8WBAZyBACK1nEADdW5khkAFVl9WUDglhohAA1ZQOIOBAeBABrCBCLqBCB9DtnVAIueBAKNAHIEAAIAwAQCdASoIAAgAAUAmJaQAA3AA/vz0AAA='));
  addSourceToVideo(video, 'mp4', Util.base64('video/mp4', 'AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAAG21kYXQAAAGzABAHAAABthADAowdbb9/AAAC6W1vb3YAAABsbXZoZAAAAAB8JbCAfCWwgAAAA+gAAAAAAAEAAAEAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAIVdHJhawAAAFx0a2hkAAAAD3wlsIB8JbCAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAQAAAAAAIAAAACAAAAAABsW1kaWEAAAAgbWRoZAAAAAB8JbCAfCWwgAAAA+gAAAAAVcQAAAAAAC1oZGxyAAAAAAAAAAB2aWRlAAAAAAAAAAAAAAAAVmlkZW9IYW5kbGVyAAAAAVxtaW5mAAAAFHZtaGQAAAABAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAAEcc3RibAAAALhzdHNkAAAAAAAAAAEAAACobXA0dgAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAIAAgASAAAAEgAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABj//wAAAFJlc2RzAAAAAANEAAEABDwgEQAAAAADDUAAAAAABS0AAAGwAQAAAbWJEwAAAQAAAAEgAMSNiB9FAEQBFGMAAAGyTGF2YzUyLjg3LjQGAQIAAAAYc3R0cwAAAAAAAAABAAAAAQAAAAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAEAAAABAAAAFHN0c3oAAAAAAAAAEwAAAAEAAAAUc3RjbwAAAAAAAAABAAAALAAAAGB1ZHRhAAAAWG1ldGEAAAAAAAAAIWhkbHIAAAAAAAAAAG1kaXJhcHBsAAAAAAAAAAAAAAAAK2lsc3QAAAAjqXRvbwAAABtkYXRhAAAAAQAAAABMYXZmNTIuNzguMw=='));

video.play();

Upvotes: 8

Roland
Roland

Reputation: 5234

Simplest method is to go to the Settings, Developer Options, and to select "Stay awake while charging". No need to code anything!

This supposes that OP wants to keep the screen on while connected to an external power source, which is reasonable, otherwise no clever coding will prevent the screen from going off soon when the internal battery drains empty.

The external power source can be as simple as a portable usb battery. When that eventually gets empty, the device will go to sleep as usual, but will remain functional on its internal battery.

I found this solution here: posting about keeping the screen on

Upvotes: 1

10s
10s

Reputation: 1699

There is no way to ONLY write javascript or other web code to keep the screen on, without writing at least a little java code.

To explain why I am so certain, if you are developing a web app through html5 you MUST use a WebView as the main "screen" of your application to host your html,javascript code. So your "web code" does not directly run in the application but uses a View as its holder. As you can guess you can't just lock the screen from some code that is not even running in the native part.

I can provide a very easy and simple way to keep the screen on if you are not an expert in android programming. In the first activity, that uses the WebView I guess, add in onCreate after super:

getWindow().addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON);

Upvotes: 1

Related Questions