การเข้าถึงอุปกรณ์ฮาร์ดแวร์บนเว็บ

เลือก API ที่เหมาะสมเพื่อสื่อสารกับอุปกรณ์ฮาร์ดแวร์ที่คุณต้องการ

ฟร็องซัว โบฟอร์
François Beaufort

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

ปัญหาหนึ่งที่ผมมักเห็นบ่อยๆ คือการใช้ API ระดับต่ำโดยไม่ได้เรียนรู้เกี่ยวกับ API ระดับสูงขึ้นที่ติดตั้งใช้งานง่ายกว่า และมอบ UX ที่ดีกว่า ดังนั้น คู่มือนี้จึงเริ่มต้นด้วยการแนะนำ API ระดับสูงขึ้นก่อน แล้วจึงพูดถึง API ระดับล่างด้วยในกรณีที่คุณพิจารณาแล้วว่า API ระดับสูงกว่าไม่ตรงตามความต้องการของคุณ

🕹 รับเหตุการณ์การป้อนข้อมูลจากอุปกรณ์นี้

ลองฟังเหตุการณ์เกี่ยวกับแป้นพิมพ์และตัวชี้ หากอุปกรณ์นี้เป็นตัวควบคุมเกม ให้ใช้ Gamepad API เพื่อดูว่าปุ่มใดถูกกดอยู่และแกนใดย้าย

หากตัวเลือกเหล่านี้ไม่ได้ผลสำหรับคุณ คุณอาจใช้ API ระดับต่ำ ดูสำรวจวิธีสื่อสารกับอุปกรณ์เพื่อเริ่มต้นการเดินทาง

📸 เข้าถึงเสียงและวิดีโอจากอุปกรณ์นี้

ใช้ MediaDevices.getUserMedia() เพื่อรับสตรีมเสียงและวิดีโอแบบสดจากอุปกรณ์นี้และดูข้อมูลเกี่ยวกับการบันทึกเสียงและวิดีโอ คุณยังสามารถควบคุมการเลื่อน เอียง และซูมของกล้อง รวมถึงการตั้งค่าอื่นๆ ของกล้อง เช่น ความสว่างและคอนทราสต์ หรือแม้แต่ถ่ายภาพนิ่งได้ด้วย Web Audio อาจใช้เพื่อเพิ่มเอฟเฟกต์ลงในเสียง สร้างภาพเสียง หรือนำเอฟเฟกต์เชิงพื้นที่ (เช่น การเลื่อน) ไปใช้ อ่านวิธีโปรไฟล์ประสิทธิภาพของแอป Web Audio ใน Chrome ด้วย

หากตัวเลือกเหล่านี้ไม่ได้ผลสำหรับคุณ คุณอาจใช้ API ระดับต่ำ ดูสำรวจวิธีสื่อสารกับอุปกรณ์เพื่อเริ่มต้นการเดินทาง

🖨 พิมพ์ไปยังอุปกรณ์นี้

ใช้ window.print() เพื่อเปิดกล่องโต้ตอบของเบราว์เซอร์ที่ให้ผู้ใช้เลือกอุปกรณ์นี้เป็นปลายทางในการพิมพ์เอกสารปัจจุบัน

หากไม่ได้ผล คุณควรใช้ API ระดับต่ำแทน ดู สำรวจวิธีสื่อสารกับอุปกรณ์เพื่อเริ่มต้นการเดินทาง

🔐 ตรวจสอบสิทธิ์ด้วยอุปกรณ์นี้

ใช้ WebAuthn เพื่อสร้างข้อมูลเข้าสู่ระบบคีย์สาธารณะที่มีระดับ รับรอง และมีขอบเขตระดับต้นทาง โดยใช้อุปกรณ์รักษาความปลอดภัยแบบฮาร์ดแวร์นี้เพื่อตรวจสอบสิทธิ์ผู้ใช้ โดยรองรับการใช้บลูทูธ, NFC และตัวตรวจสอบสิทธิ์ U2F หรือ FIDO2 แบบโรมมิ่งผ่าน USB หรือที่เรียกอีกอย่างว่าคีย์ความปลอดภัย รวมถึงตัวตรวจสอบสิทธิ์ของแพลตฟอร์มซึ่งช่วยให้ผู้ใช้ตรวจสอบสิทธิ์ด้วยลายนิ้วมือหรือการล็อกหน้าจอได้ โปรดดูสร้างแอป WebAuthn แอปแรกของคุณ

หากอุปกรณ์นี้เป็นอุปกรณ์รักษาความปลอดภัยด้วยฮาร์ดแวร์ประเภทอื่น (เช่น กระเป๋าเงินคริปโตเคอเรนซี) API ระดับต่ำอาจเป็นทางออก ดูสำรวจ วิธีสื่อสารกับอุปกรณ์เพื่อเริ่มต้นการเดินทาง

🗄 เข้าถึงไฟล์ในอุปกรณ์นี้

ใช้ File System Access API เพื่ออ่านและบันทึกการเปลี่ยนแปลงลงในไฟล์และโฟลเดอร์ในอุปกรณ์ของผู้ใช้โดยตรง หากไม่มี ให้ใช้ File API เพื่อขอให้ผู้ใช้เลือกไฟล์ในเครื่องจากกล่องโต้ตอบของเบราว์เซอร์แล้วอ่านเนื้อหาของไฟล์เหล่านั้น

หากตัวเลือกเหล่านี้ไม่ได้ผลสำหรับคุณ คุณอาจใช้ API ระดับต่ำ ดูสำรวจวิธีสื่อสารกับอุปกรณ์เพื่อเริ่มต้นการเดินทาง

🧲 เข้าถึงเซ็นเซอร์ในอุปกรณ์นี้

ใช้ General Sensor API เพื่ออ่านค่าเซ็นเซอร์ดิบจากเซ็นเซอร์ตรวจจับการเคลื่อนไหว (เช่น ตัวตรวจวัดความเร่งหรือเครื่องวัดการหมุน) และเซ็นเซอร์สิ่งแวดล้อม (เช่น แสงแวดล้อม เครื่องวัดค่าความเข้มข้นของสนามแม่เหล็ก) หากไม่มี ให้ใช้เหตุการณ์ DeviceMotion และ DeviceOrientation เพื่อเข้าถึงตัวตรวจวัดความเร่ง เครื่องวัดการหมุน และเข็มทิศในตัวในอุปกรณ์เคลื่อนที่

หากไม่ได้ผล คุณควรลองใช้ API ระดับต่ำแทน ดู สำรวจวิธีสื่อสารกับอุปกรณ์เพื่อเริ่มต้นการเดินทาง

🛰 เข้าถึงพิกัด GPS ในอุปกรณ์นี้

ใช้ Geolocation API เพื่อรับละติจูดและลองจิจูดของตำแหน่งปัจจุบันของผู้ใช้ในอุปกรณ์นี้

หากไม่ได้ผล คุณควรลองใช้ API ระดับต่ำแทน ดู สำรวจวิธีสื่อสารกับอุปกรณ์เพื่อเริ่มต้นการเดินทาง

🔋 ตรวจสอบแบตเตอรี่ในอุปกรณ์นี้

ใช้ API แบตเตอรี่เพื่อรับข้อมูลโฮสต์เกี่ยวกับระดับการชาร์จแบตเตอรี่ และรับการแจ้งเตือนเมื่อระดับแบตเตอรี่หรือสถานะการชาร์จเปลี่ยนแปลง

หากไม่ได้ผล คุณควรลองใช้ API ระดับต่ำแทน ดู สำรวจวิธีสื่อสารกับอุปกรณ์เพื่อเริ่มต้นการเดินทาง

☀ สื่อสารกับอุปกรณ์นี้ผ่านเครือข่าย

ในเครือข่ายท้องถิ่น ให้ใช้ Remote Playback API เพื่อออกอากาศเสียงและ/หรือวิดีโอในอุปกรณ์เล่นระยะไกล (เช่น สมาร์ททีวีหรือลำโพงไร้สาย) หรือใช้ presentation API เพื่อแสดงผลหน้าเว็บในหน้าจอที่ 2 (เช่น จอแสดงผลรองที่เชื่อมต่อด้วยสาย HDMI หรือสมาร์ททีวีที่เชื่อมต่อแบบไร้สาย)

หากอุปกรณ์นี้แสดงเว็บเซิร์ฟเวอร์ ให้ใช้ Fetch API และ/หรือ WebSockets เพื่อดึงข้อมูลบางส่วนจากอุปกรณ์นี้โดยการกดปลายทางที่เหมาะสม แม้ว่าซ็อกเก็ต TCP และ UDP จะไม่พร้อมใช้งานบนเว็บ โปรดลองใช้ WebTransport เพื่อจัดการการเชื่อมต่อเครือข่ายแบบอินเทอร์แอกทีฟ แบบ 2 ทิศทาง และมัลติเพล็กซ์ โปรดทราบว่า WebRTC ยังใช้เพื่อสื่อสารข้อมูลแบบเรียลไทม์กับเบราว์เซอร์อื่นโดยใช้โปรโตคอลแบบเพียร์ทูเพียร์ได้ด้วย

🧱 ดูวิธีสื่อสารกับอุปกรณ์

การเลือก API ระดับต่ำที่คุณควรใช้จะขึ้นอยู่กับลักษณะการเชื่อมต่อทางกายภาพของคุณกับอุปกรณ์ หากเป็นระบบไร้สาย ให้ลองใช้ Web NFC สำหรับการเชื่อมต่อไร้สายระยะใกล้มากและเว็บบลูทูธสำหรับอุปกรณ์ไร้สายที่อยู่ใกล้เคียง

  • ใช้ Web NFC ในการอ่านและเขียนลงในอุปกรณ์นี้เมื่ออยู่ใกล้กับอุปกรณ์ของผู้ใช้ (โดยปกติคือ 5–10 ซม., 2–4 นิ้ว) เครื่องมืออย่างเช่น NFC TagInfo โดย NXP ช่วยให้คุณเรียกดูเนื้อหาของอุปกรณ์นี้เพื่อวัตถุประสงค์ในการทำวิศวกรรมย้อนกลับได้

  • เมื่อใช้เว็บบลูทูธ ให้เชื่อมต่อกับอุปกรณ์นี้ผ่านการเชื่อมต่อบลูทูธพลังงานต่ำ คุณควรสื่อสารกับผู้ใช้ได้ง่ายๆ เมื่อใช้บริการ Bluetooth GATT ที่ได้มาตรฐาน (เช่น บริการแบตเตอรี่) เนื่องจากพฤติกรรมการใช้งานได้รับการบันทึกไว้เป็นอย่างดี หากทำไม่ได้ในตอนนี้ คุณอาจต้องหาเอกสารฮาร์ดแวร์บางส่วนสำหรับอุปกรณ์นี้หรือทำวิศวกรรมย้อนกลับ คุณใช้เครื่องมือภายนอก เช่น nRF Connect for Mobile และเครื่องมือเบราว์เซอร์ในตัวได้ เช่น หน้าภายใน about://bluetooth-internals ในเบราว์เซอร์แบบ Chromium ลองดู Reverse-Engineering a Bluetooth Lightbulb จาก Uri Shaked โปรดทราบว่าอุปกรณ์บลูทูธอาจพูด HID หรือโปรโตคอลอนุกรม

หากใช้สาย ให้ตรวจสอบ API เหล่านี้ตามลำดับเฉพาะต่อไปนี้

  1. เมื่อใช้ WebHID การทำความเข้าใจรายงาน HID และคำอธิบายรายงานผ่านคอลเล็กชันเป็นกุญแจสำคัญในการทำความเข้าใจอุปกรณ์นี้ การทำเช่นนี้อาจเป็นเรื่องยากหากไม่มีเอกสารประกอบของผู้ให้บริการสำหรับอุปกรณ์นี้ เครื่องมืออย่าง Wireshark ช่วยคุณทำวิศวกรรมย้อนกลับได้ นอกจากนี้ คุณยังใช้เว็บแอป HID สำรวจเพื่อส่งออกข้อมูลอุปกรณ์ HID เป็นรูปแบบที่มนุษย์อ่านได้

  2. เมื่อใช้ Web Serial หากไม่มีเอกสารประกอบจากผู้ให้บริการสำหรับอุปกรณ์เครื่องนี้และคำสั่งที่อุปกรณ์นี้รองรับ ก็ทำได้ยากแต่ยังคงเป็นไปได้ด้วยการคาดเดา การทำวิศวกรรมย้อนกลับในอุปกรณ์นี้สามารถทำได้โดยบันทึกการเข้าชมดิบผ่าน USB ด้วยเครื่องมืออย่าง Wireshark นอกจากนี้ คุณยังใช้เว็บแอป Serial Terminal เพื่อทดลองใช้อุปกรณ์นี้ได้ด้วยหากอุปกรณ์ดังกล่าวใช้โปรโตคอลที่มนุษย์อ่านได้

  3. เมื่อใช้ WebUSB หากไม่มีเอกสารประกอบที่ชัดเจนสำหรับอุปกรณ์เครื่องนี้และคำสั่ง USB ที่อุปกรณ์นี้รองรับ ก็ทำได้ยากแต่ยังคงเป็นไปได้ด้วยการคาดเดา รับชมการสำรวจ WebUSB และศักยภาพอันน่าตื่นเต้นจาก Suz Hinton นอกจากนี้ คุณยังทำวิศวกรรมย้อนกลับในอุปกรณ์นี้ได้ด้วยการบันทึกการเข้าชมดิบผ่าน USB และตรวจสอบข้อบ่งชี้ USB ด้วยเครื่องมือภายนอก เช่น Wireshark และเครื่องมือเบราว์เซอร์ในตัว เช่น หน้าภายใน about://usb-internals ในเบราว์เซอร์แบบ Chromium

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

ขอขอบคุณ Reilly Grant, Thomas Steiner และ Kayce Basques ที่อ่านบทความนี้

รูปภาพโดย DaryaTRYfanava ใน Unsplash