เลือก API ที่เหมาะสมเพื่อสื่อสารกับอุปกรณ์ฮาร์ดแวร์ที่คุณเลือก
เป้าหมายของคู่มือนี้คือช่วยคุณเลือก API ที่ดีที่สุดในการสื่อสารกับอุปกรณ์ฮาร์ดแวร์ (เช่น เว็บแคม ไมโครโฟน ฯลฯ) บนเว็บ "ดีที่สุด" ในที่นี้หมายถึงการให้ทุกสิ่งที่คุณต้องการโดยใช้เวลาทำงานน้อยที่สุด กล่าวคือ คุณทราบกรณีการใช้งานทั่วไปที่ต้องการแก้ไข (เช่น การเข้าถึงวิดีโอ) แต่ไม่ทราบว่าควรใช้ API ใด หรือสงสัยว่ามีวิธีอื่นในการดำเนินการหรือไม่
ปัญหาหนึ่งที่ฉันมักเห็นนักพัฒนาเว็บประสบคือการข้ามไปใช้ API ระดับต่ำโดยไม่ได้เรียนรู้เกี่ยวกับ API ระดับสูงที่ติดตั้งใช้งานได้ง่ายกว่าและมอบ UX ที่ดีกว่า ดังนั้น คู่มือนี้จึงเริ่มต้นด้วยการแนะนำ API ระดับสูงก่อน แต่ก็พูดถึง API ระดับต่ำด้วยในกรณีที่คุณพิจารณาแล้วว่า API ระดับสูงไม่ตรงกับความต้องการของคุณ
🕹 รับเหตุการณ์การป้อนข้อมูลจากอุปกรณ์นี้
ลองฟังเหตุการณ์แป้นพิมพ์และเคอร์เซอร์ หากอุปกรณ์นี้เป็นเกมคอนโทรลเลอร์ ให้ใช้ Gamepad API เพื่อดูว่ามีการกดปุ่มใดและมีการเคลื่อนไหวแกนใด
หากตัวเลือกเหล่านี้ใช้ไม่ได้ผล API ระดับต่ำอาจเป็นโซลูชันที่เหมาะสม ดูวิธีสื่อสารกับอุปกรณ์เพื่อเริ่มต้นใช้งาน
📸 เข้าถึงเสียงและวิดีโอจากอุปกรณ์นี้
ใช้ MediaDevices.getUserMedia() เพื่อรับสตรีมเสียงและวิดีโอสดจากอุปกรณ์นี้ และดูข้อมูลเกี่ยวกับการบันทึกเสียงและวิดีโอ นอกจากนี้ คุณยังควบคุมการเลื่อน เอียง และซูมของกล้อง รวมถึงการตั้งค่ากล้องอื่นๆ เช่น ความสว่างและคอนทราสต์ และแม้แต่ถ่ายภาพนิ่งได้ด้วย คุณสามารถใช้ Web Audio เพื่อเพิ่มเอฟเฟกต์ให้กับเสียง สร้างการแสดงภาพเสียง หรือใช้เอฟเฟกต์เชิงพื้นที่ (เช่น การแพน) ดูวิธีสร้างโปรไฟล์ประสิทธิภาพของแอป 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 เพื่อสื่อสารข้อมูลแบบเรียลไทม์กับเบราว์เซอร์อื่นๆ โดยใช้โปรโตคอลแบบเพียร์ทูเพียร์ได้ด้วย
🧱 ค้นพบวิธีสื่อสารกับอุปกรณ์ของคุณ
การตัดสินใจว่าควรใช้ API ระดับต่ำใดจะขึ้นอยู่กับลักษณะของการเชื่อมต่อทางกายภาพกับอุปกรณ์ หากเป็นการเชื่อมต่อแบบไร้สาย ให้ดู Web NFC สำหรับการเชื่อมต่อไร้สายระยะสั้นมาก และ Web Bluetooth หรือ Web Serial สำหรับอุปกรณ์ไร้สายที่อยู่ใกล้เคียง
Web NFC ช่วยให้อ่านและเขียนข้อมูลลงในอุปกรณ์นี้ได้เมื่ออยู่ใกล้กับอุปกรณ์ของผู้ใช้ (โดยปกติคือ 5-10 ซม. หรือ 2-4 นิ้ว) เครื่องมืออย่าง NFC TagInfo by NXP ช่วยให้คุณเรียกดูเนื้อหาของอุปกรณ์นี้เพื่อวัตถุประสงค์ด้านวิศวกรรมย้อนกลับได้
Web Bluetooth ช่วยให้คุณเชื่อมต่อกับอุปกรณ์นี้ผ่านการเชื่อมต่อบลูทูธพลังงานต่ำได้ การสื่อสารกับอุปกรณ์ควรเป็นเรื่องง่ายเมื่อใช้บริการ Bluetooth GATT ที่ได้มาตรฐาน (เช่น บริการแบตเตอรี่) เนื่องจากลักษณะการทำงานของอุปกรณ์มีเอกสารประกอบที่ชัดเจน หากไม่พบ คุณจะต้องหาเอกสารประกอบเกี่ยวกับฮาร์ดแวร์ของอุปกรณ์นี้หรือทำวิศวกรรมย้อนกลับ คุณสามารถใช้เครื่องมือภายนอก เช่น nRF Connect for Mobile และเครื่องมือเบราว์เซอร์ในตัว เช่น หน้าภายใน
about://bluetooth-internalsในเบราว์เซอร์ที่ใช้ Chromium เพื่อดำเนินการดังกล่าวได้ ดูวิศวกรรมย้อนกลับของหลอดไฟบลูทูธจาก Uri Shaked โปรดทราบว่าอุปกรณ์บลูทูธอาจใช้โปรโตคอล HID หรือโปรโตคอลแบบอนุกรมด้วยSerial over Bluetooth ช่วยให้คุณสื่อสารกับบริการ RFCOMM ในอุปกรณ์บลูทูธคลาสสิกที่จับคู่ไว้ เช่น Serial Port Profile (SPP) ที่ได้มาตรฐาน อย่างไรก็ตาม สำหรับบริการที่ใช้ RFCOMM ที่กำหนดเอง คุณจะต้องดูเอกสารประกอบของผู้ให้บริการอุปกรณ์สำหรับ UUID ของบริการเพื่อส่งไปยัง
requestPort()
หากใช้สาย ให้ตรวจสอบ API เหล่านี้ตามลำดับที่ระบุไว้
เมื่อใช้ WebHID การทำความเข้าใจรายงาน HID และข้อบ่งชี้รายงานผ่านคอลเล็กชันเป็นกุญแจสำคัญในการทำความเข้าใจอุปกรณ์นี้ ซึ่งอาจเป็นเรื่องยากหากไม่มีเอกสารประกอบของผู้ให้บริการสำหรับอุปกรณ์นี้ เครื่องมืออย่าง Wireshark จะช่วยคุณทำวิศวกรรมย้อนกลับได้ นอกจากนี้ คุณยังใช้เว็บแอป HID Explorer เพื่อดัมพ์ข้อมูลอุปกรณ์ HID ให้อยู่ในรูปแบบที่มนุษย์อ่านได้
เมื่อใช้ Web Serial หากไม่มีเอกสารประกอบของผู้ให้บริการสำหรับอุปกรณ์นี้และคำสั่งที่อุปกรณ์นี้รองรับ ก็อาจเป็นเรื่องยาก แต่ก็ยังเป็นไปได้ด้วยการเดาสุ่ม คุณสามารถทำวิศวกรรมย้อนกลับอุปกรณ์นี้ได้โดยการบันทึกการรับส่งข้อมูล USB ดิบด้วยเครื่องมืออย่าง Wireshark นอกจากนี้ คุณยังใช้เว็บแอป Serial Terminal เพื่อทดสอบอุปกรณ์นี้ได้หากอุปกรณ์ใช้โปรโตคอลที่มนุษย์อ่านได้
เมื่อใช้ WebUSB โดยไม่มีเอกสารประกอบที่ชัดเจนสำหรับอุปกรณ์นี้และคำสั่ง USB ที่อุปกรณ์นี้รองรับ การดำเนินการนี้จะทำได้ยากแต่ก็ยังเป็นไปได้หากเดาถูก ดูวิดีโอการสำรวจ WebUSB และศักยภาพที่น่าสนใจจาก Suz Hinton นอกจากนี้ คุณยังทำวิศวกรรมย้อนกลับอุปกรณ์นี้ได้โดยการบันทึกการรับส่งข้อมูล USB ดิบและตรวจสอบข้อบ่งชี้ USB ด้วยเครื่องมือภายนอก เช่น Wireshark และเครื่องมือในตัวของเบราว์เซอร์ เช่น หน้าภายใน
about://usb-internalsในเบราว์เซอร์ที่ใช้ Chromium
การรับทราบ
ขอขอบคุณ Reilly Grant, Thomas Steiner และ Kayce Basques ที่ช่วยตรวจสอบบทความนี้