Pilih API yang sesuai untuk berkomunikasi dengan perangkat hardware pilihan Anda.
Tujuan dari panduan ini adalah membantu Anda memilih API terbaik untuk berkomunikasi dengan perangkat keras (mis. webcam, mikrofon, dll.) di web. Menurut "terbaik" Maksudku menyediakan semua yang Anda butuhkan dengan upaya yang paling singkat. Dengan kata lain, {i>SUMIF<i} memiliki daftar sel Anda tahu kasus penggunaan umum yang ingin Anda selesaikan (mis. mengakses video) tetapi Anda tidak tahu API apa yang harus digunakan, atau bertanya-tanya apakah ada cara lain untuk mencapainya.
Satu masalah yang sering dihadapi pengembang web adalah serangan API tingkat rendah tanpa mempelajari API tingkat tinggi yang lebih mudah terapkan dan berikan pengalaman UX yang lebih baik. Oleh karena itu, panduan ini dimulai dengan merekomendasikan dengan tingkat yang lebih tinggi terlebih dahulu, tetapi juga menyebutkan API tingkat lebih rendah memutuskan bahwa API dengan tingkat yang lebih tinggi tidak memenuhi kebutuhan Anda.
🕹 Terima peristiwa input dari perangkat ini
Coba proses peristiwa Keyboard dan Pointer. Jika perangkat ini adalah game pengontrol, gunakan Gamepad API untuk mengetahui tombol mana yang ditekan dan sumbu mana yang digerakkan.
Jika tidak satu pun dari opsi ini berhasil, API tingkat rendah mungkin menjadi solusinya. Lihat Menemukan cara berkomunikasi dengan perangkat untuk memulai perjalanan Anda.
📸 Akses audio dan video dari perangkat ini
Gunakan MediaDevices.getUserMedia() untuk mendapatkan streaming audio dan video live dari ini perangkat Anda dan mempelajari cara menangkap audio dan video. Anda juga dapat mengontrol geser, kemiringan, dan zoom kamera, serta setelan kamera lainnya seperti kecerahan dan kontras, dan bahkan mengambil gambar diam. Audio Web dapat digunakan untuk menambahkan efek ke audio, membuat visualisasi audio, atau menerapkan efek spasial (seperti menggeser). Lihat cara membuat profil performa aplikasi Audio Web di Chrome juga.
Jika tidak satu pun dari opsi ini berhasil, API tingkat rendah mungkin menjadi solusinya. Lihat Menemukan cara berkomunikasi dengan perangkat untuk memulai perjalanan Anda.
🖨 Cetak ke perangkat ini
Gunakan window.print() untuk membuka dialog browser agar pengguna dapat memilih opsi ini perangkat Anda sebagai tujuan untuk mencetak dokumen saat ini.
Jika tidak berhasil, API tingkat rendah mungkin menjadi solusinya. Periksa Temukan cara berkomunikasi dengan perangkat Anda untuk memulai perjalanan Anda.
🔐 Autentikasi dengan perangkat ini
Gunakan WebAuthn untuk membuat kunci publik yang kuat, disahkan, dan cakupan origin kredensial dengan perangkat keamanan perangkat keras ini untuk mengotentikasi pengguna. Mendukung penggunaan Bluetooth, NFC, dan otentikator U2F atau FIDO2 yang dikenal sebagai kunci keamanan—serta otentikator platform, yang memungkinkan pengguna melakukan otentikasi dengan sidik jari atau kunci layar mereka. Lihat Membangun aplikasi WebAuthn pertama.
Jika perangkat ini adalah jenis perangkat keamanan hardware lainnya (mis. wallet mata uang kripto), API level rendah mungkin bisa menjadi solusinya. Lihat Discover cara berkomunikasi dengan perangkat Anda untuk memulai perjalanan.
🗄 Akses file di perangkat ini
Gunakan File System Access API untuk membaca dan menyimpan perubahan secara langsung pada file dan folder di perangkat pengguna. Jika tidak tersedia, gunakan File API untuk bertanya pengguna memilih file lokal dari dialog browser, lalu membaca kontennya file tersebut.
Jika tidak satu pun dari opsi ini berhasil, API tingkat rendah mungkin menjadi solusinya. Lihat Menemukan cara berkomunikasi dengan perangkat untuk memulai perjalanan Anda.
🧲 Akses sensor di perangkat ini
Gunakan Generic Sensor API untuk membaca nilai sensor mentah dari sensor gerakan (misalnya, akselerometer atau giroskop) dan sensor lingkungan (mis. cahaya sekitar, magnetometer). Jika tidak tersedia, gunakan DeviceMotion dan DeviceOrientation peristiwa untuk mendapatkan akses ke akselerometer, giroskop, dan kompas bawaan di perangkat seluler.
Jika tidak berhasil untuk Anda, API tingkat rendah mungkin menjadi solusinya. Periksa Temukan cara berkomunikasi dengan perangkat Anda untuk memulai perjalanan Anda.
🛰 Akses koordinat GPS di perangkat ini
Gunakan Geolocation API untuk mendapatkan lintang dan bujur lokasi pengguna posisi saat ini di perangkat ini.
Jika tidak berhasil untuk Anda, API tingkat rendah mungkin menjadi solusinya. Periksa Temukan cara berkomunikasi dengan perangkat Anda untuk memulai perjalanan Anda.
🔋 Periksa baterai di perangkat ini
Gunakan Battery API untuk mendapatkan informasi host tentang level pengisian daya baterai dan diberi tahu saat level baterai atau status pengisian daya berubah.
Jika tidak berhasil untuk Anda, API tingkat rendah mungkin menjadi solusinya. Periksa Temukan cara berkomunikasi dengan perangkat Anda untuk memulai perjalanan Anda.
📲 Berkomunikasi dengan perangkat ini melalui jaringan
Di jaringan lokal, gunakan Remote Playback API untuk menyiarkan audio dan/atau video di perangkat pemutaran jarak jauh (mis. smart TV atau speaker nirkabel) atau menggunakan Presentation API untuk merender halaman web di layar kedua (mis. layar yang terhubung dengan kabel HDMI atau smart TV yang terhubung secara nirkabel).
Jika perangkat ini mengekspos server web, gunakan Fetch API dan/atau WebSockets untuk mengambil beberapa data dari perangkat ini dengan membuka endpoint yang sesuai. Meskipun TCP dan Soket UDP tidak tersedia di web, lihat WebTransport untuk menangani interaktif, dua arah, dan koneksi jaringan multipleks. Perlu diketahui bahwa WebRTC juga dapat digunakan untuk mengomunikasikan data secara real-time dengan browser lain menggunakan protokol peer-to-peer.
🧱 Temukan cara berkomunikasi dengan perangkat Anda
Keputusan mengenai API tingkat rendah yang harus Anda gunakan ditentukan oleh sifat koneksi fisik Anda ke perangkat. Jika nirkabel, periksa Web NFC untuk koneksi nirkabel jarak sangat pendek dan {i>Web Bluetooth<i} untuk nirkabel terdekat perangkat.
Dengan Web NFC, baca dan tulis ke perangkat ini saat dekat dengan perangkat pengguna (biasanya 5–10 cm, 2–4 inci). Alat seperti NFC TagInfo oleh NXP memungkinkan Anda menjelajahi konten perangkat ini untuk rekayasa balik tujuan.
Dengan Bluetooth Web, hubungkan ke perangkat ini melalui Bluetooth Hemat Energi koneksi jarak jauh. Seharusnya cukup mudah untuk berkomunikasi ketika menggunakan layanan GATT Bluetooth terstandardisasi (seperti layanan baterai) sebagai perilaku ini didokumentasikan dengan baik. Jika tidak, pada tahap ini, Anda harus menemukan beberapa dokumentasi perangkat keras untuk perangkat ini atau merekayasa baliknya. Anda dapat gunakan alat eksternal seperti nRF Connect for Mobile dan alat browser bawaan seperti halaman internal
about://bluetooth-internalsdi aplikasi berbasis Chromium browser untuk itu. Lihat Rekayasa Terbalik sebuah Bohlam Bluetooth dari Uri Digoyangkan. Perlu diketahui bahwa perangkat Bluetooth juga dapat menggunakan format HID atau protokol yang sama.
Jika berkabel, lihat API ini dalam urutan khusus berikut:
Dengan WebHID, pahami laporan HID dan deskripsi laporan melalui koleksi adalah kunci untuk memahami perangkat ini. Dapat berupa sulit tanpa dokumentasi vendor untuk perangkat ini. Alat seperti Wireshark dapat membantu Anda merekayasa baliknya. Anda juga dapat menggunakan HID Aplikasi web Penjelajah untuk membuang info perangkat HID ke dalam format yang dapat dibaca manusia.
Dengan Serial Web, tanpa dokumentasi vendor untuk perangkat ini dan apa perintah yang didukung perangkat ini, sulit tapi masih mungkin dengan keberhasilan dengan menebak-nebak. Merekayasa balik perangkat ini dapat dilakukan dengan merekam data USB mentah traffic dengan alat seperti Wireshark. Anda juga dapat menggunakan Terminal Serial aplikasi web untuk bereksperimen dengan perangkat ini jika menggunakan protokol yang dapat dibaca manusia.
Dengan WebUSB, tanpa dokumentasi yang jelas untuk perangkat ini dan USB apa perintah yang didukung perangkat ini, sulit tapi masih mungkin dengan keberhasilan dengan menebak-nebak. Tonton Menjelajahi WebUSB dan potensi menariknya dari Suz Petunjuk. Anda juga dapat merekayasa balik perangkat ini dengan merekam data USB mentah traffic, dan memeriksa deskripsi USB dengan alat eksternal seperti Wireshark serta alat browser bawaan seperti halaman internal
about://usb-internalsdi browser berbasis Chromium.
Ucapan terima kasih
Terima kasih kepada Reilly Grant, Thomas Steiner, dan Kayce Basques yang telah membaca artikel ini.
Foto oleh Darya Learnfanava di Unsplash.