เลือก API ที่เหมาะสมในการสื่อสารกับอุปกรณ์ฮาร์ดแวร์ที่ต้องการ
เป้าหมายของคู่มือนี้คือเพื่อช่วยให้คุณเลือก API ที่ดีที่สุดเพื่อสื่อสารกับ อุปกรณ์ฮาร์ดแวร์ (เช่น เว็บแคม ไมโครโฟน ฯลฯ) บนเว็บ ตาม "ดีที่สุด" ใช่แล้ว ทำให้คุณมีทุกสิ่งที่ต้องการด้วย การทำงานที่สั้นที่สุด กล่าวคือ คุณทราบกรณีการใช้งานทั่วไปที่คุณต้องการแก้ไข (เช่น การเข้าถึงวิดีโอ) แต่คุณ ไม่รู้ว่าจะใช้ API ใด หรือสงสัยว่ามีวิธีอื่นที่ทำได้
ปัญหาหนึ่งที่ผมมักเห็นนักพัฒนาเว็บพบได้มากก็คือ API ระดับล่างโดยที่ไม่ต้องเรียนรู้เกี่ยวกับ API ระดับสูงกว่าซึ่งสามารถ ใช้งานและมอบ UX ที่ดีขึ้น ดังนั้น คู่มือนี้จึงเริ่มต้นด้วยการแนะนำ API ระดับสูงกว่าก่อน แต่จะกล่าวถึง API ระดับล่างด้วยในกรณีที่คุณ พบว่า API ระดับสูงกว่านี้ ไม่ตรงกับความต้องการของคุณ
🕹 รับกิจกรรมอินพุตจากอุปกรณ์นี้
ลองฟังเหตุการณ์แป้นพิมพ์และตัวชี้ หากอุปกรณ์นี้เป็นเกม ให้ใช้ Gamepad API เพื่อดูว่ากำลังกดปุ่มไหนอยู่และ แกนที่ย้าย
หากไม่มีตัวเลือกใดตรงใจคุณ API ระดับต่ำอาจช่วยแก้ปัญหาได้ โปรดดูสำรวจวิธีสื่อสารกับอุปกรณ์เพื่อเริ่มต้นการใช้งาน
📸 เข้าถึงเสียงและวิดีโอจากอุปกรณ์เครื่องนี้
ใช้ MediaDevices.getUserMedia() เพื่อสตรีมเสียงและวิดีโอแบบสด ในอุปกรณ์และดูข้อมูลเกี่ยวกับการบันทึกเสียงและวิดีโอ นอกจากนี้ คุณยังสามารถควบคุม การเลื่อน เอียง และซูมของกล้อง รวมถึงการตั้งค่าอื่นๆ ของกล้อง เช่น ความสว่างและ คอนทราสต์ หรือแม้แต่ถ่ายภาพนิ่ง ใช้เสียงบนเว็บเพื่อเพิ่มเอฟเฟกต์ได้ ต่อเสียง สร้างภาพจากเสียง หรือใช้เอฟเฟกต์เชิงพื้นที่ (เช่น การแพนกล้อง) ดูวิธีสร้างโปรไฟล์ประสิทธิภาพของแอป Web Audio ใน Chrome ได้เป็นอย่างดี
หากไม่มีตัวเลือกใดตรงใจคุณ API ระดับต่ำอาจช่วยแก้ปัญหาได้ โปรดดูสำรวจวิธีสื่อสารกับอุปกรณ์เพื่อเริ่มต้นการใช้งาน
🖨 พิมพ์ไปยังอุปกรณ์นี้
ใช้ window.print() เพื่อเปิดกล่องโต้ตอบของเบราว์เซอร์ที่ผู้ใช้จะเลือกตัวเลือกนี้ อุปกรณ์เป็นปลายทางในการพิมพ์เอกสารปัจจุบัน
หากวิธีนี้ไม่ได้ผลสำหรับคุณ API ระดับต่ำอาจเป็นทางออก เช็คเอาต์ สำรวจวิธีสื่อสารกับอุปกรณ์เพื่อเริ่มต้นการใช้งาน
🔐 ตรวจสอบสิทธิ์ด้วยอุปกรณ์นี้
ใช้ WebAuthn เพื่อสร้างคีย์สาธารณะที่รัดกุม ผ่านการรับรอง และกำหนดขอบเขตระดับต้นทาง ข้อมูลเข้าสู่ระบบด้วยอุปกรณ์การรักษาความปลอดภัยด้วยฮาร์ดแวร์นี้ เพื่อตรวจสอบสิทธิ์ผู้ใช้ รองรับ การใช้ตัวตรวจสอบสิทธิ์บลูทูธ, NFC และ U2F หรือ FIDO2 แบบโรมมิ่งผ่าน USB หรือที่เรียกกันว่าคีย์ความปลอดภัย และ Authenticator แพลตฟอร์มซึ่งจะช่วยให้ผู้ใช้ ตรวจสอบสิทธิ์ด้วยลายนิ้วมือหรือการล็อกหน้าจอ ลองดูสร้าง แอป WebAuthn แรก
หากอุปกรณ์นี้เป็นอุปกรณ์รักษาความปลอดภัยด้วยฮาร์ดแวร์ประเภทอื่น (เช่น กระเป๋าเงินคริปโตเคอเรนซี) API ระดับต่ำอาจเป็นทางออก ลองดูสำรวจ วิธีสื่อสารกับอุปกรณ์เพื่อเริ่มต้นการใช้งาน
🗄 เข้าถึงไฟล์ในอุปกรณ์นี้
ใช้ File System Access API เพื่ออ่านและบันทึกการเปลี่ยนแปลงลงในไฟล์โดยตรง และโฟลเดอร์ในอุปกรณ์ของผู้ใช้ หากใช้ไม่ได้ ให้ใช้ File API เพื่อขอ ให้ผู้ใช้เลือกไฟล์ในเครื่องจากกล่องโต้ตอบของเบราว์เซอร์ แล้วอ่านเนื้อหา จากไฟล์เหล่านั้น
หากไม่มีตัวเลือกใดตรงใจคุณ API ระดับต่ำอาจช่วยแก้ปัญหาได้ โปรดดูสำรวจวิธีสื่อสารกับอุปกรณ์เพื่อเริ่มต้นการใช้งาน
🧲 เข้าถึงเซ็นเซอร์ในอุปกรณ์นี้
ใช้ General Sensor API เพื่ออ่านค่าเซ็นเซอร์ดิบจากเซ็นเซอร์ตรวจจับการเคลื่อนไหว (เช่น ตัวตรวจวัดความเร่งหรือเครื่องวัดการหมุน) และเซ็นเซอร์ตรวจจับสภาพแวดล้อม (เช่น แสงแวดล้อม Magnetometer) หากไม่มี ให้ใช้ DeviceMotion และ DeviceOrientation เหตุการณ์ที่ได้รับสิทธิ์เข้าถึงตัวตรวจวัดความเร่ง เครื่องวัดการหมุน และเข็มทิศในตัว อุปกรณ์เคลื่อนที่
หากไม่ได้ผลสำหรับคุณ API ระดับต่ำอาจเป็นทางออก เช็คเอาต์ สำรวจวิธีสื่อสารกับอุปกรณ์เพื่อเริ่มต้นการใช้งาน
🛰 เข้าถึงพิกัด GPS ในอุปกรณ์นี้
ใช้ Geolocation API เพื่อดูละติจูดและลองจิจูดของ ตำแหน่งปัจจุบันบนอุปกรณ์นี้
หากไม่ได้ผลสำหรับคุณ API ระดับต่ำอาจเป็นทางออก เช็คเอาต์ สำรวจวิธีสื่อสารกับอุปกรณ์เพื่อเริ่มต้นการใช้งาน
🔋 ตรวจสอบแบตเตอรี่ในอุปกรณ์นี้
ใช้ Battery API เพื่อดูข้อมูลของโฮสต์เกี่ยวกับระดับการชาร์จแบตเตอรี่และ รับการแจ้งเตือนเมื่อระดับแบตเตอรี่หรือสถานะการชาร์จมีการเปลี่ยนแปลง
หากไม่ได้ผลสำหรับคุณ API ระดับต่ำอาจเป็นทางออก เช็คเอาต์ สำรวจวิธีสื่อสารกับอุปกรณ์เพื่อเริ่มต้นการใช้งาน
💌 สื่อสารกับอุปกรณ์นี้ผ่านเครือข่าย
ในเครือข่ายภายใน ให้ใช้ API การเล่นระยะไกลเพื่อออกอากาศเสียงและ/หรือ ในอุปกรณ์การเล่นระยะไกล (เช่น สมาร์ททีวีหรือลำโพงไร้สาย) หรือใช้ งานนำเสนอ API เพื่อแสดงหน้าเว็บในหน้าจอที่ 2 (เช่น หน้าเว็บรอง จอแสดงผลที่เชื่อมต่อด้วยสาย HDMI หรือสมาร์ททีวีที่เชื่อมต่อแบบไร้สาย)
หากอุปกรณ์นี้เปิดเผยเว็บเซิร์ฟเวอร์ ให้ใช้ Fetch API และ/หรือ WebSockets เพื่อ ดึงข้อมูลบางส่วนจากอุปกรณ์นี้โดยเข้าถึงปลายทางที่เหมาะสม ขณะที่ TCP และ ซ็อกเก็ต UDP ไม่พร้อมใช้งานบนเว็บ โปรดใช้ WebTransport เพื่อจัดการ การเชื่อมต่อเครือข่ายแบบอินเทอร์แอกทีฟ แบบ 2 ทิศทาง และ Multiplex โปรดทราบว่า นอกจากนี้ยังใช้ WebRTC เพื่อสื่อสารข้อมูลแบบเรียลไทม์กับเบราว์เซอร์อื่นได้ด้วย โดยใช้โปรโตคอลระหว่างเครื่อง
🧱 ดูวิธีสื่อสารกับอุปกรณ์
การตัดสินใจว่าจะใช้ API ระดับต่ำใดนั้นจะขึ้นอยู่กับลักษณะ การเชื่อมต่อทางกายภาพกับอุปกรณ์ หากเป็นระบบไร้สาย โปรดดู Web NFC สำหรับ การเชื่อมต่อไร้สายในระยะใกล้มากและเว็บบลูทูธสำหรับระบบไร้สายใกล้เคียง อุปกรณ์
เมื่อใช้เว็บ 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 ต่อไปนี้ตามลำดับต่อไปนี้
ใช้ WebHID ทำความเข้าใจรายงาน HID และข้อบ่งชี้รายงานผ่าน คอลเล็กชันเป็นกุญแจสำคัญในการทำความเข้าใจอุปกรณ์นี้ ประเภท เป็นเรื่องที่ท้าทายหากไม่มีเอกสารประกอบของผู้ให้บริการสำหรับอุปกรณ์นี้ เครื่องมือเช่น Wireshark สามารถช่วยคุณทำวิศวกรรมย้อนกลับได้ คุณยังสามารถใช้แท็ก HID เว็บแอป Explorer เพื่อใส่ข้อมูลอุปกรณ์ HID ลงในรูปแบบที่มนุษย์อ่านได้
ใช้ Web Serial โดยไม่ต้องมีเอกสารประกอบจากผู้ให้บริการสำหรับอุปกรณ์นี้และอะไรบ้าง ที่อุปกรณ์นี้รองรับ ถึงจะยากแต่ก็ยังเป็นไปได้ด้วยโชคดี เดาได้ การทำวิศวกรรมย้อนกลับกับอุปกรณ์นี้ทำได้โดยการบันทึกข้อมูลดิบของ USB การเข้าชมด้วยเครื่องมืออย่าง Wireshark ได้ นอกจากนี้ คุณยังสามารถใช้เทอร์มินัล เว็บแอปเพื่อทดสอบกับอุปกรณ์นี้หากอุปกรณ์ใช้โปรโตคอลที่มนุษย์อ่านได้
ใช้ WebUSB โดยไม่มีเอกสารประกอบที่ชัดเจนสำหรับอุปกรณ์นี้และ USB ใด ที่อุปกรณ์นี้รองรับ ถึงจะยากแต่ก็ยังเป็นไปได้ด้วยโชคดี เดาได้ ดูวิดีโอ Exploring WebUSB และศักยภาพที่น่าตื่นเต้นจาก Suz Hinton คุณยังทำวิศวกรรมย้อนกลับกับอุปกรณ์นี้ได้โดยการจับภาพ USB ดิบ การจราจรและตรวจสอบข้อบ่งชี้ USB ด้วยเครื่องมือภายนอก เช่น Wireshark และเครื่องมือเบราว์เซอร์ในตัว เช่น หน้าภายใน
about://usb-internalsในเบราว์เซอร์แบบ Chromium
กิตติกรรมประกาศ
ขอขอบคุณ Reilly Grant, Thomas Steiner และ Kayce Basques สำหรับการอ่านบทความนี้
รูปภาพโดย Darya Tryfanava ใน Unsplash