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

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

Thomas Steiner

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

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

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

การใช้ Keyboard Lock API

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

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

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

กำลังจับภาพคีย์ทั้งหมด

ตัวอย่างต่อไปนี้ครอบคลุมการกดแป้นทั้งหมด

navigator.keyboard.lock();

การจับภาพแป้นที่ต้องการ

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

ข้อความแสดงการยอมรับ

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