จับภาพคีย์ด้วย Keyboard Lock API

มอบประสบการณ์แบบเต็มหน้าจอที่สมจริงสำหรับกรณีการใช้งานต่างๆ รวมถึงเว็บไซต์แบบอินเทอร์แอกทีฟ เกม และการสตรีมเดสก์ท็อประยะไกลหรือแอปพลิเคชัน

Thomas Steiner

เมื่อผู้ใช้ใช้เวลาส่วนใหญ่ในเบราว์เซอร์มากขึ้นเรื่อยๆ เว็บไซต์แบบอินเทอร์แอกทีฟที่สมบูรณ์ เกม การสตรีมเดสก์ท็อประยะไกล และการสตรีมแอปพลิเคชันจึงพยายามมอบประสบการณ์แบบเต็มหน้าจอที่สมจริง หากต้องการดำเนินการนี้ เว็บไซต์ต้องมีสิทธิ์เข้าถึงแป้นพิเศษและแป้นพิมพ์ลัดขณะอยู่ในโหมดเต็มหน้าจอ เพื่อให้ใช้สำหรับการนำทาง เมนู หรือการเล่นเกมได้ ตัวอย่างปุ่มที่อาจต้องใช้ ได้แก่ Esc, Alt + Tab, Cmd + ` และ Ctrl + N

ตามค่าเริ่มต้น เว็บแอปพลิเคชันจะใช้คีย์เหล่านี้ไม่ได้เนื่องจากเบราว์เซอร์หรือระบบปฏิบัติการพื้นฐานจะจับคีย์เหล่านี้ไว้ Keyboard Lock API ช่วยให้เว็บไซต์ใช้คีย์ทั้งหมดที่พร้อมใช้งานซึ่งระบบปฏิบัติการโฮสต์อนุญาต (ดูความเข้ากันได้ของเบราว์เซอร์)

Ubuntu Linux สตรีมไปยังแท็บเบราว์เซอร์ใน Chrome บน macOS (ยังไม่ได้ทำงานในโหมดเต็มหน้าจอ)
ปัญหา: เดสก์ท็อประยะไกลของ Ubuntu Linux ที่สตรีมไม่ได้ทํางานในโหมดเต็มหน้าจอและไม่มีการล็อกแป้นพิมพ์ที่ใช้งานอยู่ ดังนั้นระบบปฏิบัติการโฮสต์ macOS จึงยังคงจับปุ่มของระบบได้ และประสบการณ์การใช้งานจึงยังไม่สมจริง

การใช้ Keyboard Lock API

Keyboardอินเทอร์เฟซของ Keyboard API มีฟังก์ชันที่สลับการจับภาพการกดแป้นจากแป้นพิมพ์จริง รวมถึงรับข้อมูลเกี่ยวกับเลย์เอาต์แป้นพิมพ์ของผู้ใช้

วิชาบังคับก่อน

เบราว์เซอร์สมัยใหม่มีโหมดเต็มหน้าจอ 2 ประเภท ได้แก่ โหมดที่เริ่มต้นด้วย JavaScript ผ่าน Fullscreen API และโหมดที่ผู้ใช้เริ่มต้นผ่านแป้นพิมพ์ลัด Keyboard Lock API จะใช้ได้เมื่อโหมดเต็มหน้าจอที่เริ่มต้นด้วย JavaScript ทำงานอยู่เท่านั้น ตัวอย่างการเริ่มต้นโหมดเต็มหน้าจอด้วย JavaScript มีดังนี้

await document.documentElement.requestFullscreen();

การตรวจหาฟีเจอร์

คุณใช้รูปแบบต่อไปนี้เพื่อตรวจสอบว่าเบราว์เซอร์รองรับ Keyboard Lock API หรือไม่

if ('keyboard' in navigator && 'lock' in navigator.keyboard) {
  // Supported!
}

การล็อกแป้นพิมพ์

เมธอด lock() ของอินเทอร์เฟซ Keyboard จะแสดงผล Promise หลังจากเปิดใช้การบันทึกการกดแป้นสำหรับแป้นใดแป้นหนึ่งหรือทั้งหมดบนแป้นพิมพ์จริง วิธีนี้จะบันทึกได้เฉพาะคีย์ที่ระบบปฏิบัติการพื้นฐานให้สิทธิ์เข้าถึงเท่านั้น เมธอด lock() รับอาร์เรย์ของรหัสคีย์อย่างน้อย 1 รายการเพื่อล็อก หากไม่ได้ระบุรหัสคีย์ ระบบจะล็อกคีย์ทั้งหมด ดูรายการค่ารหัสคีย์ที่ใช้ได้ในข้อกําหนด UI Events KeyboardEvent code Values

การบันทึกคีย์ทั้งหมด

ตัวอย่างต่อไปนี้จะบันทึกการกดแป้นทั้งหมด

navigator.keyboard.lock();

การบันทึกคีย์ที่เฉพาะเจาะจง

ตัวอย่างต่อไปนี้จะบันทึกปุ่ม W, A, S และ D โดยจะบันทึกคีย์เหล่านี้ไม่ว่าแป้นกดร่วมใดจะใช้ร่วมกับการกดแป้นก็ตาม เมื่อใช้เลย์เอาต์ QWERTY ของสหรัฐอเมริกา การลงทะเบียน "KeyW" จะช่วยให้มั่นใจได้ว่าระบบจะส่ง W, Shift + W, Control + W, Control + Shift + W และการผสมปุ่มอื่นๆ ทั้งหมดที่มี W ไปยังแอป ในทำนองเดียวกันกับ "KeyA", "KeyS" และ "KeyD"

await navigator.keyboard.lock([
  "KeyW",
  "KeyA",
  "KeyS",
  "KeyD",
]);

คุณตอบสนองต่อการกดแป้นที่บันทึกไว้ได้โดยใช้เหตุการณ์ของแป้นพิมพ์ ตัวอย่างเช่น โค้ดนี้ใช้เหตุการณ์ onkeydown

document.addEventListener('keydown', (event) => {
  if ((event.code === 'KeyA') && !(event.ctrlKey || event.metaKey)) {
    // Do something when the 'A' key was pressed, but only
    // when not in combination with the command or control key.
  }
});

การปลดล็อกแป้นพิมพ์

เมธอด unlock() จะปลดล็อกคีย์ทั้งหมดที่เมธอด lock() จับภาพไว้และจะแสดงผลแบบพร้อมกัน

navigator.keyboard.unlock();

เมื่อปิดเอกสาร เบราว์เซอร์จะเรียก unlock() โดยนัยเสมอ

สาธิต

คุณทดสอบ Keyboard Lock API ได้โดยเรียกใช้เดโมนี้ อย่าลืมดูซอร์สโค้ด การคลิกปุ่มเข้าสู่โหมดเต็มหน้าจอด้านล่างจะเปิดตัวเดโมในหน้าต่างใหม่เพื่อให้เข้าสู่โหมดเต็มหน้าจอได้

ข้อควรพิจารณาด้านความปลอดภัย

ข้อกังวลอย่างหนึ่งเกี่ยวกับ API นี้คืออาจมีการใช้เพื่อดึงคีย์ทั้งหมด และ (ร่วมกับ Fullscreen API และ PointerLock API) ป้องกันไม่ให้ผู้ใช้ออกจากหน้าเว็บ ข้อกำหนดระบุว่าเบราว์เซอร์ต้องมีวิธีให้ผู้ใช้ออกจากฟีเจอร์ล็อกแป้นพิมพ์ได้แม้ว่า API จะขอใช้แป้นทั้งหมดก็ตาม เพื่อป้องกันไม่ให้เกิดกรณีนี้ ใน Chrome ทางออกนี้คือการกดแป้น Esc ค้างไว้ (2 วินาที) เพื่อทริกเกอร์การออกจากฟีเจอร์ล็อกแป้นพิมพ์

คำขอบคุณ

บทความนี้ได้รับการตรวจสอบโดย Joe Medley และ Kayce Basques ข้อกำหนดการล็อกแป้นพิมพ์เขียนโดย Gary Kacmarcik และ Jamie Walch รูปภาพหลักโดย Ken Suarez ใน Unsplash