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

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

Thomas Steiner

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

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

Ubuntu Linux สตรีมไปยังแท็บเบราว์เซอร์ใน macOS Chrome (ยังไม่ได้ทำงานในโหมดเต็มหน้าจอ)
ปัญหา: เดสก์ท็อประยะไกล 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 รายการเพื่อล็อก หากไม่ได้ระบุรหัสคีย์ ระบบจะล็อกคีย์ทั้งหมด ดูรายการค่ารหัสคีย์ที่ถูกต้องได้ในข้อกำหนดเฉพาะค่ารหัส KeyboardEvent ของเหตุการณ์ UI

กำลังบันทึกคีย์ทั้งหมด

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

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 นี้คืออาจมีการใช้ API นี้เพื่อดึงคีย์ทั้งหมดและ (ร่วมกับ Fullscreen API และ PointerLock API) ป้องกันไม่ให้ผู้ใช้ออกจากหน้าเว็บ เพื่อป้องกันปัญหานี้ ข้อกำหนดกำหนดให้เบราว์เซอร์ต้องจัดเตรียมวิธีให้ผู้ใช้ออกจากล็อกแป้นพิมพ์ แม้ว่า API จะขอแป้นทั้งหมดก็ตาม ใน Chrome วิธีการออกจากโหมดนี้คือการกดแป้น Esc ค้างไว้ (2 วินาที) เพื่อออกจากโหมดล็อกแป้นพิมพ์

การรับทราบ

บทความนี้ได้รับการตรวจสอบโดย Joe Medley และ Kayce Basques ข้อกำหนดของ Keyboard Lock เขียนโดย Gary Kacmarcik และ Jamie Walch