ウェブ上のハードウェア デバイスへのアクセス

選択したハードウェア デバイスと通信するための適切な API を選択します。

François Beaufort
François Beaufort

このガイドの目標は、Google Cloud で使用する API との通信に最適な API を ウェブ上のハードウェア デバイス(ウェブカメラ、マイクなど)「ベスト」で並べ替えそうだね 最小限の作業で必要なものがすべて提供されます。つまり 解決したい一般的なユースケース(動画へのアクセスなど)は把握しているが、 どの API を使うべきかわからない、あるいは別の方法で実現できるのかと疑問に思う人もいるでしょう。

私がよく目にするウェブ デベロッパーの問題は、 簡単に実装できる高レベル API について学ぶことなく、簡単にローレベル API を より優れた UX を提供できますそのためこのガイドでは、まず より高レベルの API について簡単に説明しますが、必要に応じて下位レベルの API についても言及します。 は高いレベルの API がニーズを満たさないと判断しました。

🕹? このデバイスから入力イベントを受信する

キーボード イベントとポインタ イベントのリッスンを試します。このデバイスがゲームの場合 Gamepad API を使用して、押されているボタンと 確認しました

上記のいずれの方法でも解決しない場合は、低レベル API が解決策となることがあります。 デバイスの通信方法を確認するを確認して、利用を開始してください。

📸? このデバイスから音声と動画にアクセスする

MediaDevices.getUserMedia() を使用して、ここからライブ音声ストリームと動画ストリームを取得します。 音声と動画のキャプチャについての説明をご覧ください。また、 カメラのパン、傾斜、ズーム、その他のカメラ設定(明るさとズーム) コントラストや、静止画撮影も可能です。ウェブ オーディオを使用してエフェクトを追加できます。 音声の可視化の作成、空間効果( 。Chrome でウェブ オーディオ アプリのパフォーマンスをプロファイリングする方法をご覧ください できます。

上記のいずれの方法でも解決しない場合は、低レベル API が解決策となることがあります。 デバイスの通信方法を確認するを確認して、利用を開始してください。

🖨? このデバイスで印刷

window.print() を使用して、ユーザーがこの要素を選択できるブラウザ ダイアログを開きます。 現在のドキュメントの印刷先として選択します。

この方法がうまくいかない場合は、低レベル API で解決できる可能性があります。チェックアウト デバイスとの通信方法をご確認ください

⚈ このデバイスで認証する

WebAuthn を使用して、強力で証明済みのオリジン スコープの公開鍵を作成する 認証情報を使用して、ユーザーを認証します。サポート対象 Bluetooth、NFC、USB ローミングの U2F または FIDO2 認証システムの使用 セキュリティ キー)とプラットフォーム認証システムを使用して、ユーザーが 指紋または画面ロックで認証します。詳細については、 作成しました

このデバイスが他の種類のハードウェア セキュリティ デバイス( 暗号通貨ウォレットなど)、低レベル API で解決できる可能性があります。Discover をご確認ください 通信する方法を確認して、旅を始めましょう。

🗄? このデバイスのファイルにアクセスする

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 インチ)に装着します。NFC TagInfo などのツール NXP を使用すると、このデバイスのコンテンツを閲覧してリバース エンジニアリングできます あります。

  • ウェブ Bluetooth を使用して、Bluetooth Low Energy 経由でこのデバイスに接続します 接続します外部 IP アドレスを使用すると、 標準化された Bluetooth GATT サービス(バッテリー サービスなど)を、 詳細に文書化されている。まだの場合は リバースエンジニアリングもできますGoogle Chat では nRF Connect for Mobile などの外部ツールや組み込みのブラウザツールを使用する 例: Chromium ベースの内部ページ about://bluetooth-internals など 対応しています。Bluetooth 電球のリバース エンジニアリングをご覧ください。 URI シェイク。Bluetooth デバイスも HID やシリアル 通信できます。

有線接続の場合は、これらの API を次の順序で確認します。

  1. WebHID を使用すると、HID レポートとレポート記述子を このデバイスを理解するには、collections をご覧ください。これは次のいずれかです。 ベンダーのドキュメントがないと、解決は困難です。次のようなツール Wireshark がリバース エンジニアリングに役立ちます。HID を使用することもできます。 エクスプローラ ウェブアプリ: HID デバイス情報を人が読める形式でダンプします。

  2. ウェブのシリアル付き(このデバイスに関するベンダーのドキュメントなし) 簡単に言うと、難しいことですが、 考えてみましょう。未加工の USB をキャプチャすることで、このデバイスのリバース エンジニアリングを実施可能 Wireshark などのツールを使用して、トラフィックを保護します。シリアル ターミナルを使用することもできます。 ウェブアプリを使用して、人が読める形式のプロトコルを使用しているデバイスをテストします。

  3. WebUSB あり、このデバイスと USB ポートについての明確な説明なし 簡単に言うと、難しいことですが、 考えてみましょう。Suz による WebUSB とその優れた可能性の探求(英語)を見る ヒントン。未加工の USB をキャプチャして、このデバイスをリバース エンジニアリングすることもできます。 Wireshark などの外部ツールで USB 記述子を検査する および組み込みのブラウザツール(内部ページ about://usb-internals など) 。

謝辞

この記事の執筆にご協力いただいた Reilly GrantThomas SteinerKayce Basques に感謝します。

写真撮影: Darya TryfanavaUnsplash