React Web应用如何阻止显示器休眠？多种尝试未解决求可行方案

核心问题分析 #

你遇到的Mac系统下<video autoplay muted loop>无效的情况，是因为部分系统（尤其是Mac）会对静音视频做特殊判定，不将其视为"活跃交互"来阻止休眠。定时请求和<audio>也同理，这类操作不属于系统认可的"媒体活跃"行为。

替代方案 #

1. 优化视频标签方案 #

YouTube的实现核心是让视频保持非静音状态（手动将音量设为0），而非依赖muted属性。你可以尝试：

• 移除muted属性，通过JS将视频音量设置为0
• 避免使用单帧循环的静态视频，确保视频有连续播放的帧（系统更容易识别为活跃媒体）

示例React代码：

import { useEffect, useRef } from 'react';

function WakeLockVideo() {
  const videoRef = useRef(null);

  useEffect(() => {
    const video = videoRef.current;
    if (video) {
      video.volume = 0; // 手动设为0，替代muted属性
      video.play().catch(err => console.error(err));
    }
  }, []);

  return (
    <video
      ref={videoRef}
      autoplay
      loop
      playsInline
      style={{ position: 'fixed', top: '-9999px', left: '-9999px' }}
    >
      <source src="/path/to/short-loop-video.mp4" type="video/mp4" />
    </video>
  );
}

export default WakeLockVideo;

2. 特性检测+双方案兼容 #

针对Firefox不支持Screen Wake Lock API的问题，可以做特性检测，支持时用标准API，不支持时用视频降级：

import { useEffect, useState } from 'react';

function WakeLockHandler() {
  const [wakeLock, setWakeLock] = useState(null);

  useEffect(() => {
    const requestWakeLock = async () => {
      try {
        // 优先使用标准Screen Wake Lock API
        if ('wakeLock' in navigator) {
          const lock = await navigator.wakeLock.request('screen');
          setWakeLock(lock);
          lock.addEventListener('release', () => setWakeLock(null));
        } else {
          // Firefox降级方案：用非静音+0音量的隐藏视频
          const video = document.createElement('video');
          video.src = '/path/to/short-loop-video.mp4';
          video.volume = 0;
          video.autoplay = true;
          video.loop = true;
          video.playsInline = true;
          video.style.cssText = 'position: fixed; top: -9999px; left: -9999px;';
          document.body.appendChild(video);
          return () => document.body.removeChild(video);
        }
      } catch (err) {
        console.error('请求唤醒锁失败:', err);
      }
    };

    const cleanup = requestWakeLock();

    return () => {
      if (wakeLock) wakeLock.release();
      if (typeof cleanup === 'function') cleanup();
    };
  }, []);

  return null;
}

export default WakeLockHandler;

关于noSleepJs的疑问 #

noSleepJs的核心逻辑和上面的视频优化方案一致：用隐藏的非静音（音量设为0）视频模拟活跃媒体。

• 耗电问题：确实会比静态页面增加少量功耗，但只要使用短时长（1-2秒）、编码优化的循环视频，日常使用中几乎感知不到差异，不会造成明显的电池负担。
• 卡顿问题：仅在视频编码低效或设备性能极差时可能出现轻微卡顿，选择H.264格式的MP4视频，绝大多数现代设备都能流畅运行，不会有明显卡顿。

内容的提问来源于stack exchange，提问作者Valeri Petkov