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. Yang saya maksud dengan "terbaik" adalah memberikan semua yang Anda butuhkan dengan waktu kerja yang tersingkat. Dengan kata lain, Anda mengetahui kasus penggunaan umum yang ingin diselesaikan (misalnya, mengakses video), tetapi tidak tahu API apa yang harus digunakan atau ingin tahu apakah ada cara lain untuk mencapainya.
Satu masalah yang sering dihadapi oleh developer web adalah beralih ke API tingkat rendah tanpa mempelajari API tingkat lebih tinggi yang lebih mudah diterapkan 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 yang 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 yang ditekan dan sumbu mana yang dipindahkan.
Jika tidak ada satu pun opsi ini yang berhasil, API tingkat rendah mungkin adalah solusinya. Lihat Temukan cara berkomunikasi dengan perangkat Anda untuk memulai perjalanan Anda.
📸 Akses audio dan video dari perangkat ini
Gunakan MediaDevices.getUserMedia() untuk mendapatkan streaming audio dan video live dari perangkat ini dan pelajari 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.
Jika tidak ada satu pun opsi ini yang berhasil, API tingkat rendah mungkin adalah solusinya. Lihat Temukan 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 tingkat rendah mungkin adalah solusinya. Lihat Temukan cara berkomunikasi dengan perangkat Anda untuk memulai perjalanan Anda.
🔐 Autentikasi dengan perangkat ini
Gunakan WebAuthn untuk membuat kredensial kunci publik yang kuat, disahkan, dan cakupan origin dengan perangkat keamanan hardware ini untuk mengautentikasi pengguna. Google Play Protect mendukung penggunaan pengautentikasi U2F atau FIDO2 roaming Bluetooth, NFC, dan USB-roaming —juga dikenal sebagai kunci keamanan—serta pengautentikasi platform, yang memungkinkan pengguna melakukan autentikasi dengan sidik jari atau kunci layar mereka. Lihat Membangun aplikasi WebAuthn pertama Anda.
Jika perangkat ini adalah jenis perangkat keamanan hardware lainnya (mis. dompet mata uang kripto), API tingkat rendah mungkin bisa 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 satu pun opsi ini yang berhasil, API tingkat rendah mungkin adalah solusinya. Lihat Temukan 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 tingkat rendah mungkin adalah solusinya. Lihat Temukan 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 tingkat rendah mungkin adalah solusinya. Lihat 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 menerima notifikasi saat level baterai atau status pengisian daya berubah.
Jika tidak berhasil, API tingkat rendah mungkin adalah solusinya. Lihat Temukan cara berkomunikasi dengan perangkat Anda untuk memulai perjalanan Anda.
Momen 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 pada layar kedua (misalnya, tampilan 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 membuka endpoint yang sesuai. Meskipun soket TCP dan UDP tidak tersedia di web, lihat WebTransport untuk menangani koneksi jaringan interaktif, dua arah, dan multipleks. Perlu diperhatikan 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 terkait API tingkat rendah yang harus Anda gunakan ditentukan oleh sifat koneksi fisik ke perangkat. Jika nirkabel, periksa Web NFC untuk koneksi nirkabel jarak yang sangat pendek dan Bluetooth Web untuk perangkat nirkabel di sekitar.
Dengan Web NFC, baca dan tulis ke perangkat ini saat berada dekat dengan 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 Low Energy. Seharusnya cukup mudah untuk berkomunikasi saat menggunakan layanan GATT Bluetooth standar (seperti layanan baterai) karena perilakunya terdokumentasi dengan baik. Jika tidak, pada tahap ini, Anda harus menemukan beberapa dokumentasi hardware untuk perangkat ini atau merekayasa baliknya. Untuk melakukannya, Anda dapat menggunakan alat eksternal seperti nRF Connect for Mobile dan fitur browser bawaan seperti halaman internal
about://bluetooth-internalsdi browser berbasis Chromium. Lihat Reverse-Engineering a Bluetooth Lightbohlam dari Uri Shaked. Perhatikan bahwa perangkat Bluetooth juga dapat menggunakan protokol serial atau HID.
Jika menggunakan kabel, lihat API berikut dalam urutan tertentu:
Dengan WebHID, memahami laporan HID dan deskripsi laporan melalui koleksi adalah kunci pemahaman Anda tentang perangkat ini. Tindakan ini bisa menantang tanpa dokumentasi vendor untuk perangkat ini. Alat seperti Wireshark dapat membantu Anda merekayasa baliknya. Anda juga dapat menggunakan aplikasi web HID Explorer untuk membuang info perangkat HID ke dalam format yang dapat dibaca manusia.
Dengan Serial Web, tanpa dokumentasi vendor untuk perangkat ini dan perintah yang didukung perangkat ini, akan sulit tetapi masih dapat dilakukan dengan menebak keberuntungan. Rekayasa balik perangkat ini dapat dilakukan dengan mengambil traffic USB mentah menggunakan alat seperti Wireshark. Anda juga dapat menggunakan aplikasi web Terminal Serial 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, akan sulit tetapi masih dapat dilakukan dengan menebak keberuntungan. Tonton Exploring WebUSB dan potensinya yang menarik dari Suz Hinton. Anda juga dapat merekayasa balik perangkat ini dengan mengambil traffic USB mentah dan memeriksa deskripsi 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 telah meninjau artikel ini.
Foto oleh Darya tryfanava di Unsplash.