diff --git a/packages/webapp/package.json b/packages/webapp/package.json
index 95a4de04..4f11b0aa 100644
--- a/packages/webapp/package.json
+++ b/packages/webapp/package.json
@@ -33,6 +33,7 @@
     "@graphql-codegen/typescript-operations": "^2.2.1",
     "@nesbox/config": "^0.0.1",
     "@tauri-apps/api": "1.0.0-rc.7",
+    "@types/dom-screen-wake-lock": "^1.0.1",
     "@types/dom-speech-recognition": "^0.0.1",
     "@types/marked": "^4.0.3",
     "dotenv": "^16.0.1",
diff --git a/packages/webapp/src/effects/wake-lock.ts b/packages/webapp/src/effects/wake-lock.ts
new file mode 100644
index 00000000..4091f290
--- /dev/null
+++ b/packages/webapp/src/effects/wake-lock.ts
@@ -0,0 +1,29 @@
+import { logger } from 'src/logger';
+
+export function wakeLock() {
+  let wakeLockPromise: Promise<WakeLockSentinel> | null = null;
+
+  const listener = () => {
+    if (document.visibilityState === 'visible') {
+      wakeLockPromise = navigator.wakeLock?.request('screen');
+
+      // log
+      wakeLockPromise?.then((wakeLock) => {
+        logger.info('wake lock created!');
+        wakeLock.addEventListener('release', () => {
+          logger.info('wake lock released!');
+        });
+      });
+    }
+  };
+
+  listener();
+
+  // 当页面处于非活动状态时该锁自动失效
+  document.addEventListener('visibilitychange', listener);
+  return async () => {
+    document.removeEventListener('visibilitychange', listener);
+
+    (await wakeLockPromise)?.release();
+  };
+}
diff --git a/packages/webapp/src/pages/mt-room.ts b/packages/webapp/src/pages/mt-room.ts
index 7623182b..f5f5adfa 100644
--- a/packages/webapp/src/pages/mt-room.ts
+++ b/packages/webapp/src/pages/mt-room.ts
@@ -22,6 +22,7 @@ import { leaveRoom, updateRoomScreenshot } from 'src/services/api';
 import { configure } from 'src/configure';
 import { theme } from 'src/theme';
 import { updateMtApp } from 'src/mt-app';
+import { wakeLock } from 'src/effects/wake-lock';
 
 import type { MStageElement } from 'src/modules/stage';
 import type { MVoiceRoomElement } from 'src/modules/room-voice';
@@ -95,6 +96,7 @@ export class PMtRoomElement extends GemElement {
   };
 
   mounted = () => {
+    this.effect(wakeLock, () => []);
     this.effect(
       () => {
         if (configure.user && !this.#playing) {
diff --git a/packages/webapp/src/pages/room.ts b/packages/webapp/src/pages/room.ts
index 068d5de8..dc83848d 100644
--- a/packages/webapp/src/pages/room.ts
+++ b/packages/webapp/src/pages/room.ts
@@ -36,6 +36,7 @@ import { logger } from 'src/logger';
 import { ScUserStatus } from 'src/generated/graphql';
 import { theme } from 'src/theme';
 import { mountedRoom, unmountedRoom } from 'src/modules/nav';
+import { wakeLock } from 'src/effects/wake-lock';
 
 import type { MStageElement } from 'src/modules/stage';
 
@@ -352,6 +353,7 @@ export class PRoomElement extends GemElement {
   });
 
   mounted = () => {
+    this.effect(wakeLock, () => []);
     this.effect(
       () => {
         if (configure.user && !this.#playing) {
diff --git a/yarn.lock b/yarn.lock
index 7aaf6ff6..43f27cf2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1793,6 +1793,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/dom-screen-wake-lock@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@types/dom-screen-wake-lock/-/dom-screen-wake-lock-1.0.1.tgz#8f125f91821d49f51feee95e6db128eb6974aea9"
+  integrity sha512-WJQas3OFGcC8AeMzaa7FwzzbNNfanuV2R12kQYNp4BkUMghsRz5JxJ5RgVhJifhw7t0s6LvRSWZArmKbMDZ+5g==
+
 "@types/dom-speech-recognition@^0.0.1":
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/@types/dom-speech-recognition/-/dom-speech-recognition-0.0.1.tgz#e326761a04b4a49c0eec2ac7948afc1c6aa12baa"