選択したハードウェア デバイスと通信する適切な API を選択します。
このガイドの目的は、ウェブでハードウェア デバイス(ウェブカメラ、マイクなど)と通信するのに最適な API を選択できるようにすることです。「最適」とは、必要なすべてを最小限の作業で提供することを意味します。つまり、解決する一般的なユースケース(動画へのアクセスなど)はわかっているものの、使用する API がわからないか、別の方法があるかどうかを検討している場合です。
ウェブ デベロッパーがよく陥る問題の一つは、実装が簡単で UX を向上させる上位レベルの API を学習せずに、下位レベルの API に飛び込むことです。そのため、このガイドではまず上位レベルの API をおすすめしますが、上位レベルの API がニーズを満たしていないと判断した場合に備えて、下位レベルの API についても説明します。
🕹 このデバイスから入力イベントを受信する
キーボード イベントとポインタ イベントをリッスンしてみてください。このデバイスがゲーム コントローラの場合は、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 は、デバイスへの物理接続の性質によって決まります。ワイヤレスの場合は、非常に短距離のワイヤレス接続には Web NFC、近くのワイヤレス デバイスには Web Bluetooth または Web Serial を確認してください。
ウェブ 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 の Bluetooth 電球のリバース エンジニアリングをご覧ください。Bluetooth デバイスは HID プロトコルまたはシリアル プロトコルも使用できる場合があります。Bluetooth 経由のシリアルでは、標準化されたシリアルポート プロファイル(SPP)などのペア設定された Bluetooth Classic デバイスの RFCOMM サービスと通信します。ただし、カスタム RFCOMM ベースのサービスの場合は、
requestPort()
に渡すサービス UUID について、デバイスのベンダーのドキュメントを参照する必要があります。
有線の場合は、次の順序で API を確認します。
WebHID では、コレクションを介して HID レポートとレポート記述子を理解することが、このデバイスを理解するうえで重要です。このデバイスのベンダー ドキュメントがない場合、これは困難な作業になる可能性があります。Wireshark などのツールを使用してリバース エンジニアリングできます。HID Explorer ウェブアプリを使用して、HID デバイスの情報を人間が判読できる形式にダンプすることもできます。
Web Serial では、このデバイスとこのデバイスがサポートするコマンドに関するベンダーのドキュメントがない場合、難しいですが、幸運にも推測できる場合があります。このデバイスのリバース エンジニアリングは、Wireshark などのツールを使用して USB の未加工トラフィックをキャプチャすることで行えます。人間が判読できるプロトコルを使用している場合は、シリアル ターミナル ウェブアプリを使用してこのデバイスをテストすることもできます。
WebUSB では、このデバイスと、このデバイスがサポートする USB コマンドに関する明確なドキュメントがないため、難しいですが、幸運にも推測できる場合があります。Suz Hinton の Exploring WebUSB and its exciting potential をご覧ください。また、Wireshark などの外部ツールと、Chromium ベースのブラウザの内部ページ
about://usb-internals
などの組み込みブラウザ ツールを使用して、未加工の USB トラフィックをキャプチャし、USB 記述子を検査することで、このデバイスをリバース エンジニアリングすることもできます。
謝辞
この記事のレビューに協力してくれた Reilly Grant 氏、Thomas Steiner 氏、Kayce Basques 氏に感謝します。
写真: Darya Tryfanava、Unsplash より。