Pilih API yang sesuai untuk berkomunikasi dengan perangkat hardware pilihan Anda.
Tujuan panduan ini adalah membantu Anda memilih API terbaik untuk berkomunikasi dengan perangkat hardware (misalnya, webcam, mikrofon, dll.) di web. Maksud "terbaik" di sini adalah memberikan semua yang Anda butuhkan dengan jumlah pekerjaan paling sedikit. Dengan kata lain, Anda mengetahui kasus penggunaan umum yang ingin Anda selesaikan (misalnya, mengakses video), tetapi Anda tidak tahu API yang harus digunakan atau bertanya-tanya apakah ada cara lain untuk mencapainya.
Satu masalah yang sering saya lihat dialami developer web adalah langsung menggunakan API tingkat rendah tanpa mempelajari API tingkat tinggi yang lebih mudah diimplementasikan dan memberikan UX yang lebih baik. Oleh karena itu, panduan ini dimulai dengan merekomendasikan API tingkat lebih tinggi terlebih dahulu, tetapi juga menyebutkan API tingkat lebih rendah jika Anda telah menentukan bahwa API tingkat lebih tinggi tidak memenuhi kebutuhan Anda.
🕹 Menerima peristiwa input dari perangkat ini
Coba proses peristiwa Keyboard dan Pointer. Jika perangkat ini adalah pengontrol game, gunakan Gamepad API untuk mengetahui tombol mana yang ditekan dan sumbu mana yang dipindahkan.
Jika tidak ada opsi yang sesuai untuk Anda, API level rendah mungkin dapat menjadi solusi. Lihat Pelajari cara berkomunikasi dengan perangkat Anda untuk memulai perjalanan Anda.
📸 Mengakses audio dan video dari perangkat ini
Gunakan MediaDevices.getUserMedia() untuk mendapatkan streaming audio dan video live dari perangkat ini dan pelajari cara merekam audio dan video. Anda juga dapat mengontrol pan, tilt, dan zoom kamera, serta setelan kamera lainnya seperti kecerahan dan kontras, dan bahkan mengambil gambar diam. Web Audio dapat digunakan untuk menambahkan efek ke audio, membuat visualisasi audio, atau menerapkan efek spasial (seperti panning). Lihat juga cara membuat profil performa aplikasi Web Audio di Chrome.
Jika tidak ada opsi yang sesuai untuk Anda, API level rendah mungkin dapat menjadi solusi. Lihat Pelajari cara berkomunikasi dengan perangkat Anda untuk memulai perjalanan Anda.
🖨 Cetak ke perangkat ini
Gunakan window.print() untuk membuka dialog browser yang memungkinkan pengguna memilih perangkat ini sebagai tujuan untuk mencetak dokumen saat ini.
Jika cara ini tidak berhasil, API level rendah mungkin dapat menjadi solusinya. Lihat Pelajari cara berkomunikasi dengan perangkat Anda untuk memulai perjalanan Anda.
🔐 Melakukan autentikasi dengan perangkat ini
Gunakan WebAuthn untuk membuat kredensial kunci publik yang kuat, diuji, dan tercakup dalam origin dengan perangkat keamanan hardware ini untuk mengautentikasi pengguna. API ini mendukung penggunaan pengautentikasi roaming Bluetooth, NFC, dan USB U2F atau FIDO2 (yang juga disebut kunci keamanan) serta pengautentikasi platform, yang memungkinkan pengguna mengautentikasi dengan sidik jari atau kunci layar mereka. Lihat Membangun aplikasi WebAuthn pertama Anda.
Jika perangkat ini adalah jenis perangkat keamanan hardware lain (misalnya, dompet mata uang kripto), API level rendah mungkin menjadi solusinya. Lihat Temukan cara berkomunikasi dengan perangkat Anda untuk memulai perjalanan Anda.
🗄 Mengakses file di perangkat ini
Gunakan File System Access API untuk membaca dan menyimpan perubahan langsung ke file dan folder di perangkat pengguna. Jika tidak tersedia, gunakan File API untuk meminta pengguna memilih file lokal dari dialog browser, lalu membaca konten file tersebut.
Jika tidak ada opsi yang sesuai untuk Anda, API level rendah mungkin dapat menjadi solusi. Lihat Pelajari cara berkomunikasi dengan perangkat Anda untuk memulai perjalanan Anda.
🧲 Mengakses sensor di perangkat ini
Gunakan Generic Sensor API untuk membaca nilai sensor mentah dari sensor gerakan (misalnya, akselerometer atau giroskop) dan sensor lingkungan (misalnya, cahaya sekitar, magnetometer). Jika tidak tersedia, gunakan peristiwa DeviceMotion dan DeviceOrientation untuk mendapatkan akses ke akselerometer, giroskop, dan kompas bawaan di perangkat seluler.
Jika tidak berhasil, API level rendah mungkin menjadi solusinya. Lihat Pelajari cara berkomunikasi dengan perangkat Anda untuk memulai perjalanan Anda.
🛰 Mengakses koordinat GPS di perangkat ini
Gunakan Geolocation API untuk mendapatkan lintang dan bujur posisi pengguna saat ini di perangkat ini.
Jika tidak berhasil, API level rendah mungkin menjadi solusinya. Lihat Pelajari 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 mendapatkan notifikasi saat level baterai atau status pengisian daya berubah.
Jika tidak berhasil, API level rendah mungkin menjadi solusinya. Lihat Pelajari 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 (misalnya, smart TV atau speaker nirkabel) atau gunakan Presentation API untuk merender halaman web di layar kedua (misalnya, layar sekunder 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 mengakses endpoint yang sesuai. Meskipun soket TCP dan UDP tidak tersedia di web, lihat WebTransport untuk menangani koneksi jaringan interaktif, dua arah, dan multipleks. Perhatikan 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 tentang API level rendah yang harus Anda gunakan ditentukan oleh sifat koneksi fisik Anda ke perangkat. Jika nirkabel, lihat Web NFC untuk koneksi nirkabel jarak sangat pendek dan Web Bluetooth atau Web Serial untuk perangkat nirkabel di sekitar.
Dengan Web NFC, baca dan tulis ke perangkat ini saat berada di dekat perangkat pengguna (biasanya 5–10 cm, 2–4 inci). Alat seperti NFC TagInfo dari NXP memungkinkan Anda menjelajahi konten perangkat ini untuk tujuan rekayasa balik.
Dengan Web Bluetooth, hubungkan ke perangkat ini melalui koneksi Bluetooth Hemat Energi. Seharusnya cukup mudah untuk berkomunikasi saat menggunakan layanan GATT Bluetooth standar (seperti layanan baterai) karena perilakunya didokumentasikan dengan baik. Jika tidak, pada tahap ini, Anda harus menemukan beberapa dokumentasi hardware untuk perangkat ini atau merekayasa baliknya. Anda dapat menggunakan alat eksternal seperti nRF Connect for Mobile dan alat browser bawaan seperti halaman internal
about://bluetooth-internalsdi browser berbasis Chromium untuk melakukannya. Lihat Reverse-Engineering a Bluetooth Lightbulb dari Uri Shaked. Perhatikan bahwa perangkat Bluetooth juga dapat menggunakan protokol HID atau serial.Dengan Serial melalui Bluetooth, berkomunikasi dengan layanan RFCOMM di perangkat Bluetooth Klasik yang disambungkan seperti Profil Port Serial (SPP) standar. Namun, untuk layanan kustom berbasis RFCOMM, Anda harus membaca dokumentasi vendor perangkat untuk UUID layanan yang akan diteruskan ke
requestPort().
Jika menggunakan koneksi kabel, periksa API ini dalam urutan berikut:
Dengan WebHID, memahami laporan HID dan deskripsi laporan melalui koleksi adalah kunci untuk memahami perangkat ini. Hal ini dapat menjadi tantangan tanpa dokumentasi vendor untuk perangkat ini. Alat seperti Wireshark dapat membantu Anda merekayasa balik protokol tersebut. Anda juga dapat menggunakan aplikasi web HID Explorer untuk membuang info perangkat HID ke dalam format yang dapat dibaca manusia.
Dengan Web Serial, tanpa dokumentasi vendor untuk perangkat ini dan perintah apa yang didukung perangkat ini, hal ini sulit, tetapi masih mungkin dilakukan dengan tebakan yang beruntung. Rekayasa balik perangkat ini dapat dilakukan dengan menangkap traffic USB mentah menggunakan alat seperti Wireshark. Anda juga dapat menggunakan aplikasi web Serial Terminal untuk bereksperimen dengan perangkat ini jika menggunakan protokol yang dapat dibaca manusia.
Dengan WebUSB, tanpa dokumentasi yang jelas untuk perangkat ini dan perintah USB yang didukung perangkat ini, hal ini sulit, tetapi masih mungkin dilakukan dengan tebakan yang tepat. Tonton Menjelajahi WebUSB dan potensinya yang menarik dari Suz Hinton. Anda juga dapat merekayasa balik perangkat ini dengan menangkap traffic USB mentah dan memeriksa deskriptor USB dengan alat eksternal seperti Wireshark dan 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 karena telah meninjau artikel ini.