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

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

François Beaufort

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

🧱 ค้นพบวิธีสื่อสารกับอุปกรณ์

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

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

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

• ซีเรียลผ่านบลูทูธใช้สื่อสารกับบริการ RFCOMM ในอุปกรณ์บลูทูธคลาสสิกที่จับคู่ไว้ เช่น โปรไฟล์พอร์ตอนุกรม (SPP) มาตรฐาน แต่สำหรับบริการที่อิงตาม RFCOMM ที่กําหนดเอง คุณจะต้องดูเอกสารประกอบของผู้ให้บริการอุปกรณ์เพื่อหา UUID ของบริการที่จะส่งไปยัง requestPort()

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

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

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

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

ขอขอบคุณ

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

รูปภาพโดย Darya Tryfanava จาก Unsplash