これを想像してください: ゲームコントローラーは、Web カメラとブラウザータブで実行されている JavaScript だけによってガイドされ、独自の充電ドックを見つけます。 Python バックエンドはありません。 ROSはありません。専用のマイクロコントローラーはありません。リアルタイムのオプティカルフロートラッキングを実行し、USB HID 接続を通じて触覚パルスを発射する単なる Web アプリです。そのプロジェクトは存在しており、それはブラウザベースのハードウェア制御で何かもっと大きなことが起こる兆しです。

開発者はブラウザを表示層として扱うことに何年も費やしてきました。 2026 年の現実は大きく異なります。WebHID、WebUSB、WebBluetooth、WebSerialは、物理コンピューティングのための本格的なツールキットへと静かに成熟しました。これらの API をブラウザー内のコンピュータービジョンライブラリと組み合わせると、まったく新しいもの、つまりサーバーへの依存性を持たずに完全にクライアント側で実行されるハードウェアオートメーションが得られます。

この記事では、コンピュータービジョンを使用したブラウザーベースのハードウェア制御への 5 つの実際のアプローチについて説明します。それぞれが異なる問題を解決します。一部は本番環境に対応しています。その他は初期段階の実験です。それらはすべて同じ変化を示しています。つまり、ブラウザーが物理世界との対話のための正当なプラットフォームになりつつあります。

1. デバイスナビゲーションのためのオプティカルフロートラッキング

Lucas-Kanade アルゴリズムは、数十年にわたってコンピュータービジョン研究の定番となってきました。特定のポイントがビデオフレーム間でどのように移動するかを追跡します。新しいのは、ブラウザタブ内で実行することです。OpenCV.js、有名な OpenCV ライブラリの JavaScript ポートです。

開発者が目指すコア機能は次のとおりです。calcOpticalFlowPyrLK。 2 つの連続するフレームと一連の追跡ポイントを取得し、各ポイントの更新された位置を返します。「PyrLK」部分はピラミッドアプローチを指します。アルゴリズムは複数のスケールで動きをチェックするため、高速で移動するオブジェクトに対して堅牢になります。

以下は、追跡ループが実際にどのようなものかを示す簡素化された例です。

// OpenCV.js がロードされ、カメラ ストリームがアクティブであると仮定します
const prevGray = new cv.Mat();
const nextGray = 新しい cv.Mat();
const prevPts = 新しい cv.Mat();
const nextPts = 新しい cv.Mat();
const status = new cv.Mat();
const err = 新しい cv.Mat();

// フレームをグレースケールに変換します
cv.cvtColor(prevFrame, prevGray, cv.COLOR_RGBA2GRAY);
cv.cvtColor(nextFrame, nextGray, cv.COLOR_RGBA2GRAY);

// Lucas-Kanade オプティカル フローを実行します
cv.calcOpticalFlowPyrLK(
  前のグレー、次のグレー、
  前のポイント、次のポイント、
  ステータス、エラー
);

// ステータス === 1 (追跡に成功) のポイントをフィルターします。

実際的な課題は遅延です。 OpenCV.js はネイティブコードほど高速ではありません。メインスレッドで完全な追跡ループを実行すると、UI の更新がブロックされ、ジッターが発生します。より賢いパターンは、負荷の高い計算をオフロードすることです。ウェブワーカー、メインスレッドをレンダリングとユーザー入力のために解放したままにします。多くの開発者は、この分割スレッドアプローチにより、ブラウザ CV アプリが非常に軽快に動作すると感じています。

オプティカルフローデータを使用して実際に何を操作できるのでしょうか?位置コマンドを受け入れるもの。 WebSerial インターフェイスを備えたロボットアーム、電動カメラスライダー、さらには WebUSB 経由のカスタム USB 周辺機器も備えています。視覚システムは空間センサーになります。ブラウザが制御ループになります。驚くほどすっきりとした建築です。

WebHID: ほとんどの開発者がまだ試したことのない API

寝るのをやめるウェブHID。これにより、ブラウザは USB ヒューマンインターフェイスデバイス (ゲームパッド、描画タブレット、特殊コントローラー、および幅広い産業用入力デバイス) と直接通信できるようになります。この API はしばらく前から Chromium ベースのブラウザーに組み込まれていますが、ゲーム分野以外の開発者の間での採用は依然として低いままです。

メンタルモデルはシンプルです。すべての HID デバイスは、番号付きレポートを通じて通信します。レポートは、特定の ID を持つ単なるバイト配列です。イベントリスナーを使用して受信レポートを読み取り、送信レポートを作成します。device.sendReport(レポートID, データ)。それは本当にそうです。

// HID デバイスへのアクセスをリクエストします
const [デバイス] = await navigator.hid.requestDevice({
  filters: [{ VendorId: 0x28DE }] // バルブのベンダー ID
});

device.open(); を待ちます。

// 受信レポートをリッスンします
device.addEventListener('inputreport', (イベント) => {
  const {レポートID, データ} = イベント;
  if (reportId === 0x43) { // レポート 67: テレメトリ
    const バッテリーパーセント = data.getUint8(0);
    console.log('バッテリー:', バッテリーパーセント, '%');
  }
});

// コマンドを送信します (例: 触覚パルスをトリガーする)
const ペイロード = new Uint8Array([0x00, 0x46, /* ... */]);
await device.sendReport(0x8F, ペイロード);

ここでの興味深い角度は、haptic feedback as a navigation primitive。最新のコントローラー内のリニア共振アクチュエーター (LRA) は、本質的には小さなモーターです。非対称パルスでそれらを発射することにより、表面に正味の方向性の力を生み出すことができます。これは、マイクロロボット工学における振動ベースの移動の背後にある物理学と同じです。違いは、ブラウザから制御され、Web カメラによってガイドされる消費者向けデバイスを使用して実行していることです。

アクセシビリティツールを検討している開発者も、WebHID が役立つことに気づいています。カスタムスイッチコントローラー、視線デバイス、特殊な入力ハードウェアは、HID インターフェイスを公開することがよくあります。ブラウザベースの設定アプリが、ネイティブインストーラーを必要とせずに突然実用的になります。

ブラウザ内ビジョン用の OpenCV.js の 3 つの代替案

OpenCV.js は明白な選択ですが、常に正しいとは限りません。 WASM バイナリは大きいです。初期ロード時間は、接続が遅い場合にユーザーをイライラさせる可能性があります。また、API はオリジナルの C++ を反映しています。つまり、JavaScript チームにとって開発者にとって使いやすいものではありません。

Diagram showing browser APIs connecting to physical hardware devices via WebHID and WebUSB

評価に値する 3 つの代替案を次に示します。

ブラウザベースのハードウェア制御の主な利点

100%

サーバー依存性ゼロ

即時フィードバック

リアルタイム処理

フルコントロール

クライアント側の自動化

4つの主要なAPI

成熟した API が利用可能

TensorFlow.js:従来の CV アルゴリズムではなく、事前トレーニングされたモデルが必要な場合に最適です。物体検出、姿勢推定、手の追跡はすべて、適切なモデルを使用してブラウザ内で機能します。 WebGL による GPU アクセラレーションにより、リアルタイムのユースケースに十分な高速推論が可能になります。
Tracking.js (アーカイブされていますが、まだ機能します):カラートラッキングとオブジェクト検出に焦点を当てた軽量ライブラリ。 OpenCV.js よりもはるかに小さい。環境を制御し、カラーマーカーを使用できる単純な追跡タスクに適しています。
face-api.js:顔のランドマークと認識に限定的に焦点を当てます。ほとんどのハードウェア制御シナリオでは過剰ですが、インターフェースが視線の方向や顔のジェスチャーに反応する場合には本当に便利です。

本当の質問は、古典的なアルゴリズムが必要か、それとも学習済みモデルが必要か、ということです。オプティカルフローは古典的なアルゴリズムです。追跡しているものについては何も仮定しません。ピクセルの動きを測定するだけです。これにより、柔軟性がありながらも照明の変化に敏感になります。 TensorFlow.js のようなモデルベースのアプローチは、環境の変動に対してより堅牢ですが、トレーニングデータとオブジェクトクラスの固定セットが必要です。

環境 (きれいな机、一貫した照明、既知のオブジェクト) を制御するハードウェアナビゲーションタスクの場合、多くの場合、シンプルさとパフォーマンスの点で従来の CV が優れています。現実のあらゆるものにおいて、学習されたモデルはエッジケースをより適切に処理します。

Rust と WebAssembly: JavaScript の速度が十分でない場合

Webアセンブリ (WASM)ブラウザのパフォーマンスが頭打ちになった場合の頼りになるソリューションとなっています。考え方は簡単です。パフォーマンスが重要なコードを次のようなコンパイル言語で記述します。さび、それを WASM にコンパイルし、JavaScript から呼び出します。結果は、ブラウザーのサンドボックス内でネイティブに近い速度で実行されます。

コンピュータービジョンのタスクでは、これは非常に重要です。畳み込みニューラルネットワーク (CNN) には、フレームごとに何百万もの積和演算が含まれます。純粋な JavaScript でそれを行うのは面倒です。 SIMD 命令を有効にして WASM で実行すると、劇的に高速になります。

Rust から WASM へのツールチェーンはかなり成熟しました。wasmパックコンパイルを処理し、JavaScript バインディングを自動的に生成します。一般的なセットアップは次のようになります。

# wasm-pack をインストールする
カーゴインストール wasm-pack

# Rust クレートから WASM モジュールをビルドします
wasm-pack build --target Web

# 出力は、以下を含む pkg/ ディレクトリです。
# - your_module_bg.wasm (バイナリ)
# - your_module.js (JS グルー コード)
# - your_module.d.ts (TypeScript タイプ)

WASM モジュールと通信する Web ワーカーに CNN をオフロードするのは、最もクリーンなアーキテクチャです。メインスレッドは、カメラのキャプチャ、UI の更新、デバイスの通信を処理します。ワーカーは重い推論を処理します。結果は構造化されたメッセージとして返されます。このパターンを使用しているチームは、複雑なビジョンパイプラインであってもエンドユーザーに対して応答性が高いと感じることがよくあります。

ブラウザのパフォーマンスパターンについてさらに詳しく知りたいですか?スマッシングマガジンは、ブックマークに値する Web Worker アーキテクチャと WASM 統合に関する詳細な詳細情報を公開しています。

PID コントローラー: ブラウザーロボティクスに欠けている部分

カメラから位置データを取得することは 1 つのことです。そのデータをスムーズで安定した動きに変えることは別の問題です。ここがPID制御PID は Proportional-Integral-Derivative の略です。これは、産業オートメーションからドローンの安定化まで、あらゆる場所で使用されるフィードバックアルゴリズムです。

基本的な考え方: 現在の値 (デバイスがある場所) と目標値 (必要な場所) があります。誤差が違いです。 P コントローラーは誤差に定数を乗算し、それを制御出力として使用します。それだけでも発振の原因となります。 I 項は、定常状態のオフセットを補正するために時間の経過とともに誤差を蓄積します。 D タームは、オーバーシュートを防ぐために急激な変化を抑制します。

ブラウザーのコンテキストでは、PID ループはすべてのアニメーションフレームで実行されます。ビジョンシステムは現在位置を提供します。 PID コントローラーが補正を計算します。 WebHID レイヤーはその修正をデバイスに送信します。最小限の実装は次のとおりです。

クラス PIDController {
  コンストラクター(kp, ki, kd) {
    this.kp = kp;
    this.ki = ki;
    this.kd = kd;
    this.integral = 0;
    this.prevError = 0;
  }

  update(エラー、dt) {
    this.integral += エラー * dt;
    const 導関数 = (エラー - this.prevError) / dt;
    this.prevError = エラー;
    return (this.kp * エラー) + (this.ki * this.integral) + (this.kd * 導関数);
  }
}

// アニメーションループ内での使用
const pid = 新しい PIDController(0.8, 0.01, 0.2);
const 出力 = pid.update(targetX, currentX, 0.016); // 16msフレーム

3 つの定数 (kp、ki、kd) の調整は難しい部分です。 P が多すぎるとシステムが発振します。 Dが多すぎると動作が鈍くなります。一部のハードウェアナビゲーションプロジェクトで見られる「近接クリープ」動作 (デバイスがターゲットに近づくとパルス周波数をカットする) は、基本的に、基本的な P コントローラーの上に重ねられた手動調整されたゲインスケジュールです。実際には、短距離のドッキング作業に適しています。

より複雑なモーションシステムを構築する開発者は、次の点を確認する必要があります。ニールセン・ノーマン・グループフィードバックの遅延とユーザーの認識に関する研究。 UI の応答性を制御する同じ原則が物理的な制御ループにも当てはまります。人間は約 100 ミリ秒を超える遅延に気づき、物理システムは目に見えてオーバーシュートすると「壊れている」と感じます。

ゲームコントローラーを超えた現実世界のユースケース

ゲームコントローラーの充電プロジェクトは賢いデモです。ただし、同じスタック (Web カメラ、オプティカルフロー、WebHID、WASM) が、本当に役立つ問題に適用されます。それを使って何を構築できますか?

Browser DevTools showing WebHID device connection and incoming report data from a USB controller

予算内でラボの自動化を実現します。多くの研究室では、顕微鏡検査に電動ステージを使用しています。市販の制御ソフトウェアは高価であり、特定のハードウェアに限定されています。 WebSerial または WebUSB を使用するブラウザベースのコントローラーは、カメラのフィードバックによって導かれ、単純な位置決めタスクの代わりに使用できます。オープンソースの性質は、チーム全体が修正に貢献できることを意味します。

オプティカルフロートラッキングの手順

フレームのキャプチャ

Use webcam to get video feed.

グレースケールに変換

処理用のフレームを準備します。

トラックポイント

Lucas-Kanade アルゴリズムを適用します。

ポジションを更新する

新しい点の座標を計算します。

アクセシビリティ入力デバイス。運動障害のあるユーザー向けのカスタム HID コントローラーには、多くの場合、構成ツールが必要です。カメラを使用して、観察された動きに基づいてスイッチの感度を調整する Web アプリは、IT インストールが必要なネイティブデスクトップアプリよりもはるかにアクセスしやすいです。

メーカーとプロトタイピングのワークフロー。カスタム CNC ルーター、ピックアンドプレイスマシン、またはカメラスライダーを構築している場合、ブラウザベースの制御は、インターフェースが Chrome を備えたどのマシンでも動作することを意味します。ドライバーのインストールはありません。プラットフォーム固有のビルドはありません。チームは近くにあるデバイスを何でも使用します。

このようなプロジェクトにまたがって作業するチームを管理している場合、組織化された状態を維持することが重要です。アンチーム向けの運用管理プラットフォーム特にハードウェアの構築に複数のサプライヤーやスケジュールが関係する場合、リソースを調整し、全員の調整を保つのに役立ちます。これとは別に、プロジェクトのコスト (コンポーネントの購入、クラウドサービス、ホスティング) を追跡することは、無料の予算トラッカースプレッドシートを使用せずにカスタムカテゴリを処理します。

ハードウェア開発ワークフローを補完するツールをさらに見つけたいですか?このまとめをチェックしてください最高の生産性ツール開発者が実際に使用しているもの、または探索しているもの人生を変えるAIツールビルドプロセスの繰り返し部分を自動化できます。

はじめに: 実践的なチェックリスト

実験する準備はできましたか?参入障壁は思っているよりも低いです。ロボット工学の経験は必要ありません。 Chromium ベースのブラウザ、Web カメラ、および非同期 JavaScript に対するある程度の忍耐力が必要です。

デバイスのインターフェースを選択してください:USB HID デバイスの場合は WebHID、Arduino またはシリアル周辺機器の場合は WebSerial、BLE デバイスの場合は WebBluetooth。チェックMDN ウェブドキュメントコミットする前に、現在のブラウザーのサポート表を確認してください。
手動制御から始めます。ビジョンを持たずに、まずデバイス通信層を構築します。複雑さを加える前に、コマンドを送信し、応答を確実に読み取ることができることを確認してください。
カメラ入力を追加します。を使用します。ユーザーメディアの取得WebカメラにアクセスするためのAPI。 Canvas 要素にフレームを描画します。これはビジョンシステムの入力です。
オプティカルフローまたはモデルを統合します。OpenCV.js または TensorFlow.js を読み込みます。簡単なテストから始めます。色付きのマーカーを追跡します。完全なオブジェクト検出を試みる前に、それが機能するようにしてください。
制御ループを実装します。ビジョン出力をデバイスコマンドに接続します。単純な比例コントローラーから始めます。基本的なナビゲーションが機能したら、PID チューニングを追加します。
Web ワーカーへのオフロード:パフォーマンスが問題になったら、ビジョン処理をメインスレッドから外します。これは、スムーズなリアルタイム制御のためにほぼ常に必要です。

途中での UI デザインの決定については、Figma のデザイン学習リソース開発者向けのツールであっても本当に役立ちます。ストレス下（何かが高速で動いていて介入する必要がある場合）で読みにくい制御インターフェイスは、大きな問題です。適切な視覚的階層が重要です。

のPostman API プラットフォームハードウェアプロジェクトにクラウド同期またはテレメトリエンドポイントが含まれているかどうかを知ることも重要です。これらのエンドポイントをリアルタイム制御ループに統合する前に個別にテストすると、デバッグ時間を大幅に節約できます。

この傾向が実際に意味するもの

ブラウザベースのハードウェア制御は、組み込みシステムや産業用 PLC に取って代わるものではありません。それは問題ではありません。重要なのは、Web プラットフォームが、以前はネイティブコード、特殊な SDK、または専用ハードウェアを必要としていたクラスの問題を処理できる十分な能力を備えているということです。

それは 3 つのグループにとって重要です。まず、まったく新しいプラットフォームを学習せずに便利なものを構築したいと考えているメーカーや愛好家です。 2 つ目は、展開に悩まされることなく複数のオペレーティングシステムで動作する内部ツールを必要とする小規模チームです。 3 番目は、使い慣れた言語スタックを使用してラピッドプロトタイピングをしたい研究者です。

の組み合わせWebHID、WebAssembly、およびブラウザ内コンピュータービジョンまさに新しい領域です。この分野の興味深いプロジェクトのほとんどは、現時点ではオープンソースの実験です。パターンはまだ検討中です。正直なところ、今は参加して良いものとは何かを定義するのに最適な時期です。

今週末、何か小さなものを作ってみてください。 WebHID 経由でデバイスに接続します。カメラを追加します。ループを閉じると何が起こるか見てみましょう。ブラウザにすでに組み込まれているツールを使用して、どこまでできるか驚かれるかもしれません。