Skip to content

Commit

Permalink
Add Keyboard Lock API support (Chromium 68+ & HTTPS only)
Browse files Browse the repository at this point in the history
This enables web browser to capture key combos, e.g., Alt+F4, Alt+Tab, and send it to web page.

Limitations: 1) Chromium 68+ only; 2) User should click full screen button inside the webpage. API won't work when toggling full screen via F11 or browser menu. 3) HTTPS instead of HTTP.

- https://developer.chrome.com/docs/capabilities/web-apis/keyboard-lock
- https://developer.mozilla.org/en-US/docs/Web/API/Navigator/keyboard
  • Loading branch information
foresee-io committed Oct 20, 2024
1 parent db7bca4 commit eb331de
Show file tree
Hide file tree
Showing 2 changed files with 12 additions and 2 deletions.
11 changes: 10 additions & 1 deletion app/ui.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ import "core-js/stable";
import "regenerator-runtime/runtime";
import * as Log from '../core/util/logging.js';
import _, { l10n } from './localization.js';
import { isTouchDevice, isSafari, hasScrollbarGutter, dragThreshold, supportsBinaryClipboard, isFirefox, isWindows, isIOS, supportsPointerLock }
import { isTouchDevice, isSafari, hasScrollbarGutter, dragThreshold, supportsBinaryClipboard, isFirefox, isWindows, isIOS, supportsPointerLock, supportsKeyboardLock }
from '../core/util/browser.js';
import { setCapture, getPointerEvent } from '../core/util/events.js';
import KeyTable from "../core/input/keysym.js";
Expand Down Expand Up @@ -1841,6 +1841,9 @@ const UI = {
document.mozFullScreenElement || // currently working methods
document.webkitFullscreenElement ||
document.msFullscreenElement) {
if (supportsKeyboardLock) {
navigator.keyboard.unlock();
}
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
Expand All @@ -1860,6 +1863,12 @@ const UI = {
} else if (document.body.msRequestFullscreen) {
document.body.msRequestFullscreen();
}
// No need to explicitly ask for permission,
// but it's expected that user grant it since Chromium 131.
// See https://developer.chrome.com/blog/keyboard-lock-pointer-lock-permission
if (supportsKeyboardLock) {
navigator.keyboard.lock();
}
}
UI.updateFullscreenButton();
},
Expand Down
3 changes: 2 additions & 1 deletion core/util/browser.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,8 @@ window.addEventListener('touchstart', function onFirstTouch() {
// brings us a bit closer but is not optimal.
export let dragThreshold = 10 * (window.devicePixelRatio || 1);

export const supportsKeyboardLock = ('keyboard' in navigator && 'lock' in navigator.keyboard && typeof(navigator.keyboard.lock) === 'function');

let _supportsCursorURIs = false;

try {
Expand Down Expand Up @@ -174,4 +176,3 @@ export function supportsPointerLock() {
if (isIOS() || isIE()) { return false; }
return (document.exitPointerLock);
}

0 comments on commit eb331de

Please sign in to comment.