Web API: Screen Wake Lock API для предотвращения выключения экрана устройства

Когда вы смотрите видео на YouTube на своем мобильном устройстве, экран не выключается даже при длительном простое. Это возможно благодаря Screen Wake Lock API.

API блокировки экрана позволяет вашему веб-приложению предотвратить автоматическое выключение экрана устройства. Это особенно полезно для видеоплееров и других приложений, которые должны сохранять экран включенным для продолжительного времени.

<button id="startBtn">Начать воспроизведение</button>
<button id="stopBtn">Остановить воспроизведение</button>

<video id="videoPlayer" src="video.mp4"></video>

При нажатии на кнопку "Начать воспроизведение" вызываем метод navigator.wakeLock.request(), чтобы запросить блокировку экрана, и затем начинаем воспроизведение видео. При нажатии на кнопку "Остановить воспроизведение" мы освобождаем блокировку экрана, если она была запрошена, и останавливаем воспроизведение видео.

const videoPlayer = document.querySelector('#videoPlayer');
const startButton = document.querySelector('#startBtn');
const stopButton = document.querySelector('#stopBtn');
let wakeLock = null;

startButton.addEventListener('click', async () => {
  try {
    wakeLock = await navigator.wakeLock.request( 'screen' );
    videoPlayer.play();
  } 
  catch (err) 
  {
    console.error( 'Ошибка запроса блокировки экрана', err );
  }
});

stopButton.addEventListener('click', () => {
  if( wakeLock !== null )
  {
  	wakeLock.release();
    wakeLock = null;
  }
  videoPlayer.pause();
});