Pilih API yang sesuai untuk berkomunikasi dengan perangkat hardware pilihan Anda.
Tujuan panduan ini adalah untuk membantu Anda memilih API terbaik untuk berkomunikasi dengan perangkat hardware (misalnya webcam, mikrofon, dll.) di web. Yang dimaksud dengan "terbaik" adalah memberi Anda semua yang Anda butuhkan dengan jumlah pekerjaan yang paling singkat. Dengan kata lain, Anda mengetahui kasus penggunaan umum yang ingin dipecahkan (misalnya, mengakses video), tetapi Anda tidak tahu API apa yang akan digunakan atau ingin tahu apakah ada cara lain untuk melakukannya.
Salah satu masalah yang sering saya lihat terjadi pada developer web adalah langsung menggunakan API level rendah tanpa mempelajari API level yang lebih tinggi yang lebih mudah diimplementasikan dan memberikan UX yang lebih baik. Oleh karena itu, panduan ini dimulai dengan merekomendasikan API tingkat tinggi terlebih dahulu, tetapi juga menyebutkan API tingkat rendah jika Anda telah menentukan bahwa API tingkat 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 tingkat rendah mungkin menjadi solusinya. Lihat Menemukan cara berkomunikasi dengan perangkat 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 merekaman audio dan video. Anda juga dapat mengontrol penggeseran, kemiringan, 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 Audio Web di Chrome.
Jika tidak ada opsi yang 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 yang memungkinkan pengguna memilih perangkat ini sebagai tujuan untuk mencetak dokumen saat ini.
Jika tidak berhasil, API tingkat rendah mungkin menjadi solusinya. Lihat Menemukan cara berkomunikasi dengan perangkat untuk memulai perjalanan Anda.
🔐 Lakukan autentikasi dengan perangkat ini
Gunakan WebAuthn untuk membuat kredensial kunci publik yang kuat, terverifikasi, dan cakupan asal dengan perangkat keamanan hardware ini untuk mengautentikasi pengguna. API ini mendukung penggunaan pengautentikasi Bluetooth, NFC, dan U2F atau FIDO2 roaming USB —juga disebut kunci keamanan— serta pengautentikasi platform, yang memungkinkan pengguna melakukan autentikasi dengan sidik jari atau kunci layar mereka. Lihat Mem-build aplikasi WebAuthn pertama Anda.
Jika perangkat ini adalah jenis perangkat keamanan hardware lainnya (misalnya wallet mata uang kripto), API tingkat rendah mungkin menjadi solusinya. Lihat Menemukan cara berkomunikasi dengan perangkat untuk memulai perjalanan Anda.
🗄 Mengakses file di perangkat ini
Gunakan File System Access API untuk membaca dan menyimpan perubahan secara 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 berhasil, API tingkat rendah mungkin menjadi solusinya. Lihat Menemukan cara berkomunikasi dengan perangkat 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 lampu ruangan, 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 menjadi solusinya. Lihat Menemukan cara berkomunikasi dengan perangkat 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 menjadi solusinya. Lihat Menemukan cara berkomunikasi dengan perangkat untuk memulai perjalanan Anda.
🔋 Periksa baterai di perangkat ini
Gunakan Battery API untuk mendapatkan informasi host tentang tingkat pengisian daya baterai dan mendapatkan notifikasi saat tingkat baterai atau status pengisian daya berubah.
Jika tidak berhasil, API tingkat rendah mungkin menjadi solusinya. Lihat Menemukan cara berkomunikasi dengan perangkat 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 membuka 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 API tingkat 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 NFC Web, 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. Komunikasi dengan layanan ini akan cukup mudah jika 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 melakukan rekayasa balik. 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 over Bluetooth, berkomunikasi dengan layanan RFCOMM di perangkat Bluetooth Klasik yang disambungkan seperti Profil Port Serial (SPP) standar. Namun, untuk layanan berbasis RFCOMM kustom, Anda harus melihat dokumentasi vendor perangkat untuk UUID layanan yang akan diteruskan ke
requestPort().
Jika terhubung dengan kabel, lihat API ini dalam urutan tertentu ini:
Dengan WebHID, memahami laporan HID dan deskripsi laporan melalui koleksi adalah kunci untuk memahami perangkat ini. Hal ini dapat menjadi sulit tanpa dokumentasi vendor untuk perangkat ini. Alat seperti Wireshark dapat membantu Anda melakukan reverse engineering. 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 yang didukung perangkat ini, hal ini sulit dilakukan, tetapi masih mungkin dengan menebak-nebak yang beruntung. Reverse engineering perangkat ini dapat dilakukan dengan merekam traffic USB mentah dengan 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, hal ini sulit dilakukan, tetapi masih mungkin dengan menebak-nebak beruntung. Tonton Menjelajahi WebUSB dan potensi menariknya dari Suz Hinton. Anda juga dapat melakukan rekayasa balik perangkat ini dengan merekam 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 yang telah meninjau artikel ini.
Foto oleh Darya Tryfanava di Unsplash.