任意のハードウェア デバイスと通信するための適切な API を選択します。
このガイドの目的は、ウェブ上のハードウェア デバイス（ウェブカメラ、マイクなど）と通信するための最適な API を選択できるようにすることです。「最高」とは最小限の作業で必要なものをすべて提供しますつまり、解決したい一般的なユースケース（動画へのアクセスなど）はわかっていても、どの API を使用すべきかわからない場合や、別の方法があるかどうかがわからない場合です。
ウェブ デベロッパーが陥りやすい問題の 1 つに、実装が簡単で優れた UX を提供する高レベルの API について学習せずに、低レベルの API を使用するというものがあります。そのため、このガイドではまず、上位レベルの API を推奨しますが、上位レベルの API ではニーズに合わないと判断した場合に備えて、下位レベルの API についても説明します。
🕹? このデバイスから入力イベントを受信する
Keyboard イベントと Pointer イベントをリッスンします。このデバイスがゲーム コントローラの場合は、Gamepad API を使用して、押されているボタンと移動した軸を確認します。
上記のいずれの方法でもうまくいかない場合は、低レベル API を使用することをおすすめします。まずは、デバイスと通信する方法をご確認ください。
📸? このデバイスの音声と動画にアクセス
MediaDevices.getUserMedia() を使用して、このデバイスからライブの音声と動画ストリームを取得し、音声と動画のキャプチャについてご確認ください。また、カメラのパン、チルト、ズーム、その他のカメラ設定（明るさやコントラストなど）を操作できるほか、静止画像の撮影も可能です。ウェブオーディオ: 音声にエフェクトを追加したり、音声を可視化したり、空間効果（パンなど）を適用したりできます。Chrome でウェブ オーディオ アプリのパフォーマンスをプロファイリングする方法もご覧ください。
上記のいずれの方法でもうまくいかない場合は、低レベル API を使用することをおすすめします。まずは、デバイスと通信する方法をご確認ください。
🖨? このデバイスに印刷
window.print() を使用してブラウザ ダイアログを開き、ユーザーが現在のドキュメントを印刷する宛先としてこのデバイスを選択できます。
この方法でうまくいかない場合は、低レベル API が解決策となる可能性があります。まずは、デバイスと通信する方法をご覧ください。
🔐? このデバイスで認証する
WebAuthn を使用して、このハードウェア セキュリティ デバイスで強力な証明済みのオリジン スコープの公開鍵認証情報を作成し、ユーザーを認証します。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 を使用するかは、デバイスへの物理的な接続の性質によって決まります。ワイヤレスの場合は、近距離無線接続にはウェブ NFC を、付近のワイヤレス デバイスについてはウェブ Bluetooth を確認してください。
ウェブ NFC を使用すると、ユーザーのデバイスの近くにある場合（通常は 5 ～ 10 cm、2 ～ 4 インチ）にこのデバイスに対して読み取りと書き込みを行います。NXP の NFC TagInfo などのツールを使用すると、このデバイスのコンテンツを閲覧してリバース エンジニアリングに使用できます。
ウェブ Bluetooth を使用して、Bluetooth Low Energy 接続を介してこのデバイスに接続します。標準化された Bluetooth GATT サービス（バッテリー サービスなど）を使用すると、その動作が詳細に文書化されているため、簡単に通信できるはずです。そうでない場合は、この時点でデバイスのハードウェア ドキュメントを探すか、リバース エンジニアリングを行う必要があります。nRF Connect for Mobile などの外部ツールや、そのためには Chromium ベースのブラウザで内部ページ
about://bluetooth-internalsなどの組み込みのブラウザツールを使用できます。URI Shaked の Reverse-Engineering a Bluetooth Lightbulb をご覧ください。Bluetooth デバイスは、HID プロトコルまたはシリアル プロトコルにも対応しています。
有線接続の場合は、以下の API を次の順序で確認してください。
WebHID では、コレクションを通じて HID レポートとレポート記述子を理解することが、このデバイスを理解する鍵となります。このデバイスのベンダー ドキュメントがないと、難しい場合があります。Wireshark などのツールを使用すると、リバース エンジニアリングを行うことができます。HID Explorer ウェブアプリを使用して、HID デバイス情報を人が読める形式でダンプすることもできます。
ウェブシリアルでは、このデバイスのベンダー ドキュメントとデバイスがサポートするコマンドがないと、簡単ではありませんが、幸運な推測で可能です。このデバイスのリバース エンジニアリングは、Wireshark などのツールを使用して未加工の USB トラフィックをキャプチャすることで実行できます。また、シリアルターミナル ウェブアプリを使用して、人が読める形式のプロトコルを使用している場合、このデバイスを試すこともできます。
WebUSB では、このデバイスについての明確なドキュメントや、このデバイスがサポートする USB コマンドがないと、困難ながらも推測で解決できます。Suz Hinton の Exploring WebUSB and それらの画期的な可能性をご覧ください。また、Wireshark などの外部ツールや、Chromium ベースのブラウザで内部ページ
about://usb-internalsなどの組み込みのブラウザツールを使用して、未加工の USB トラフィックをキャプチャし、USB 記述子を検査することで、このデバイスのリバース エンジニアリングを行うこともできます。
謝辞
この記事をレビューしてくれた Reilly Grant、Thomas Steiner、Kayce Basques に感謝します。
写真撮影: Darya Tryfanava（出典: Unsplash）