選択したハードウェア デバイスと通信するための適切な API を選択します。
このガイドの目的は、ウェブ上のハードウェア デバイス(ウェブカメラ、マイクなど)と通信するための最適な API を選択できるようにすることです。「最適」とは、最小限の作業で必要なものをすべて得られることを意味します。つまり、解決したい一般的なユースケース(動画へのアクセスなど)はわかっているものの、どの API を使用すればよいかわからない場合や、別の方法で実現できるかどうか疑問に思っている場合です。
ウェブ デベロッパーがよく陥る問題の一つは、実装が簡単で優れた UX を提供する高レベルの API について学習せずに、低レベルの API に飛びつくことです。そのため、このガイドでは、まず高レベル API を推奨することから始めますが、高レベル API がニーズを満たしていないと判断した場合に備えて、低レベル API についても説明します。
🕹 このデバイスから入力イベントを受信する
キーボード イベントとポインタ イベントをリッスンしてみてください。このデバイスがゲーム コントローラの場合は、Gamepad API を使用して、どのボタンが押され、どの軸が移動したかを把握します。
これらのオプションのいずれも機能しない場合は、低レベル API が解決策となる可能性があります。デバイスとの通信方法を確認するをご覧ください。
📸 このデバイスの音声と動画にアクセスする
MediaDevices.getUserMedia() を使用して、このデバイスからライブ音声ストリームとライブ動画ストリームを取得し、音声と動画のキャプチャについて学習します。また、カメラのパン、チルト、ズーム、明るさやコントラストなどのカメラ設定を制御したり、静止画を撮影したりすることもできます。Web Audio を使用すると、音声にエフェクトを追加したり、音声の可視化を作成したり、空間エフェクト(パンなど)を適用したりできます。Chrome で Web Audio アプリのパフォーマンスをプロファイリングする方法もご覧ください。
これらのオプションのいずれも機能しない場合は、低レベル API が解決策となる可能性があります。デバイスとの通信方法を確認するをご覧ください。
🖨 このデバイスに印刷する
window.print() を使用して、ユーザーがこのデバイスを現在のドキュメントの印刷先として選択できるブラウザ ダイアログを開きます。
この方法でうまくいかない場合は、低レベル API が解決策になる可能性があります。デバイスとの通信方法を確認するをご覧ください。
🔐 このデバイスで認証する
WebAuthn を使用して、このハードウェア セキュリティ デバイスで、強力で、証明された、オリジンをスコープとした公開鍵ベースの認証情報を作成し、ユーザーを認証します。この API は、Bluetooth、NFC、USB を経由する U2F または FIDO2 のローミング認証器(セキュリティ キー)と、指紋または画面ロックを使った認証を実現するプラットフォーム認証器に対応しています。初めての WebAuthn アプリを作成するをご覧ください。
このデバイスが別のタイプのハードウェア セキュリティ デバイス(暗号通貨ウォレットなど)である場合は、低レベルの API が解決策になる可能性があります。デバイスとの通信方法を確認するをご覧ください。
🗄 このデバイス上のファイルにアクセスする
File System Access API を使用して、ユーザーのデバイス上のファイルやフォルダから直接読み取り、変更をファイル システムに保存します。利用できない場合は、File API を使用して、ブラウザ ダイアログからローカル ファイルを選択するようユーザーに求め、それらのファイルの内容を読み取ります。
これらのオプションのいずれも機能しない場合は、低レベル API が解決策となる可能性があります。デバイスとの通信方法を確認するをご覧ください。
🧲 このデバイスのセンサーにアクセスする
Generic Sensor API を使用して、モーション センサー(加速度計やジャイロスコープなど)や環境センサー(周囲光、磁力計など)から未加工のセンサー値を読み取ります。利用できない場合は、DeviceMotion イベントと DeviceOrientation イベントを使用して、モバイル デバイスに組み込まれている加速度計、ジャイロスコープ、コンパスにアクセスします。
この方法でうまくいかない場合は、低レベル API が解決策になる可能性があります。デバイスとの通信方法を確認するをご覧ください。
🛰 このデバイスの GPS 座標にアクセスする
Geolocation API を使用して、このデバイス上のユーザーの現在地の緯度と経度を取得します。
この方法でうまくいかない場合は、低レベル API が解決策になる可能性があります。デバイスとの通信方法を確認するをご覧ください。
🔋 このデバイスのバッテリーを確認する
Battery API を使用して、バッテリーの充電レベルに関するホスト情報を取得し、バッテリー残量または充電ステータスが変更されたときに通知を受け取ります。
この方法でうまくいかない場合は、低レベル API が解決策になる可能性があります。デバイスとの通信方法を確認するをご覧ください。
📞 ネットワーク経由でこのデバイスと通信する
ローカル ネットワークでは、Remote Playback API を使用して、リモート再生デバイス(スマートテレビやワイヤレス スピーカーなど)で音声や動画をブロードキャストするか、Presentation API を使用して、セカンド スクリーン(HDMI ケーブルで接続されたセカンダリ ディスプレイや、ワイヤレスで接続されたスマートテレビなど)でウェブページをレンダリングします。
このデバイスがウェブサーバーを公開している場合は、Fetch API や WebSockets を使用して、適切なエンドポイントにアクセスしてこのデバイスからデータを取得します。TCP ソケットと UDP ソケットはウェブでは使用できませんが、WebTransport を確認して、インタラクティブな双方向の多重化されたネットワーク接続を処理してください。WebRTC を使用して、ピアツーピア プロトコルで他のブラウザとリアルタイムでデータを通信することもできます。
🧱 デバイスと通信する方法を確認する
どの低レベル API を使用するかは、デバイスへの物理的な接続の性質によって決まります。ワイヤレスの場合は、非常に短距離のワイヤレス接続には Web NFC、近くのワイヤレス デバイスには Web Bluetooth または Web Serial を確認してください。
Web NFC を使用すると、ユーザーのデバイスに近接している(通常は 5 ~ 10 cm、2 ~ 4 インチ)ときに、このデバイスの読み取りと書き込みを行うことができます。NXP の NFC TagInfo などのツールを使用すると、リバース エンジニアリングを目的として、このデバイスのコンテンツを閲覧できます。
Web Bluetooth を使用して、Bluetooth Low Energy 接続でこのデバイスに接続します。標準化された Bluetooth GATT サービス(バッテリー サービスなど)を使用している場合は、その動作が十分に文書化されているため、通信は非常に簡単です。そうでない場合は、この時点で、このデバイスのハードウェア ドキュメントを見つけるか、リバース エンジニアリングする必要があります。そのためには、nRF Connect for Mobile などの外部ツールや、Chromium ベースのブラウザの内部ページ
about://bluetooth-internalsなどの組み込みブラウザツールを使用できます。Uri Shaked 氏の Reverse-Engineering a Bluetooth Lightbulb をご覧ください。Bluetooth デバイスは、HID プロトコルまたはシリアル プロトコルを使用する場合もあります。Serial over Bluetooth を使用すると、標準化されたシリアルポート プロファイル(SPP)など、ペア設定された Bluetooth クラシック デバイスの RFCOMM サービスと通信できます。ただし、カスタム RFCOMM ベースのサービスの場合は、
requestPort()に渡すサービス UUID について、デバイスのベンダー ドキュメントを参照する必要があります。
有線接続の場合は、次の API をこの順序で確認します。
WebHID では、コレクションを介して HID レポートとレポート記述子を理解することが、このデバイスを理解する鍵となります。このデバイスのベンダー ドキュメントがないと、この作業は困難な場合があります。Wireshark などのツールを使用すると、リバース エンジニアリングを行うことができます。HID Explorer ウェブアプリを使用して、HID デバイス情報を対人可読形式でダンプすることもできます。
Web Serial を使用すると、このデバイスのベンダー ドキュメントや、このデバイスがサポートするコマンドがなくても、幸運な推測で可能ですが、困難です。このデバイスのリバース エンジニアリングは、Wireshark などのツールを使用して未加工の USB トラフィックをキャプチャすることで行えます。デバイスが人が読めるプロトコルを使用している場合は、シリアル ターミナル ウェブアプリを使用してデバイスをテストすることもできます。
WebUSB の場合、このデバイスに関する明確なドキュメントや、このデバイスがサポートする USB コマンドがなければ、幸運な推測でもない限り、リバース エンジニアリングは困難です。Suz Hinton 氏による WebUSB とそのエキサイティングな可能性を探るをご覧ください。このデバイスをリバース エンジニアリングするには、未加工の USB トラフィックをキャプチャし、Wireshark などの外部ツールや、Chromium ベースのブラウザの内部ページ
about://usb-internalsなどの組み込みブラウザツールを使用して、USB 記述子を検査します。
謝辞
この記事をレビューしてくれた Reilly Grant、Thomas Steiner、Kayce Basques に感謝します。