จับภาพคีย์ด้วย 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 จะแสดงผลตามสัญญาหลังจากเปิดใช้การจับภาพการกดแป้นสำหรับแป้นใดก็ได้หรือทุกแป้นบนแป้นพิมพ์จริง วิธีนี้สามารถบันทึกเฉพาะคีย์ที่ได้รับสิทธิ์เข้าถึงจากระบบปฏิบัติการพื้นฐานเท่านั้น เมธอด 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 ได้โดยเรียกใช้เดโมใน Glitch อย่าลืมตรวจสอบซอร์สโค้ด การคลิกปุ่ม "เข้าสู่โหมดเต็มหน้าจอ" ด้านล่างจะเปิดการสาธิตในหน้าต่างใหม่เพื่อให้เข้าสู่โหมดเต็มหน้าจอได้

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

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

ขอขอบคุณ

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