Web inference-sdk

inference-sdk を使ってブラウザから Roboflow クラウド上でリアルタイムビデオ推論を実行します。

WebRTCストリーミングとは何ですか？

@roboflow/inference-sdk はWebRTCを使用してブラウザからRoboflowの推論サーバーへリアルタイムのビデオストリーミングを可能にします。これにより次のことができます：

• ワークフローを実行 - 複雑なマルチステップのコンピュータビジョンパイプラインを実行する

• すべてのモデルにアクセス - 任意のRoboflowモデルタイプを使用する

• サーバーサイド処理 - 強力なGPUを活用する

• 低レイテンシ - WebRTCはほぼリアルタイムの結果を提供します

• 双方向通信 - ストリーミング中にデータを送受信する

インストール

npm install @roboflow/inference-sdk

クイックスタート

開始するには下のビデオ／サンプルコードを参照してください：

import { connectors, webrtc, streams } from '@roboflow/inference-sdk';

// ⚠️ 開発時のみ withApiKey を使用してください
// ⚠️ 本番環境でこれを使用しないでください。APIキーが漏洩します
// 本番ではバックエンドプロキシを使用してください（次のセクション参照）
const connector = connectors.withApiKey("your-api-key");

// カメラストリームを取得
const stream = await streams.useCamera({
  video: {
    facingMode: { ideal: "environment" },
    width: { ideal: 640 },
    height: { ideal: 480 }
  }
});

// WebRTC接続を開始
const connection = await webrtc.useStream({
  source: stream,
  connector,
  wrtcParams: {
    workspaceName: "your-workspace",
    workflowId: "your-workflow",
    imageInputName: "image",
    streamOutputNames: ["output"],
    dataOutputNames: ["predictions"]
  },
  onData: (data) => {
    console.log("Inference results:", data);
  }
});

// 処理済みビデオを表示
const videoElement = document.getElementById('video');
videoElement.srcObject = await connection.remoteStream();

// 対応が終わったらクリーンアップ
await connection.cleanup();

🔐 セキュリティのベストプラクティス

本番アプリケーションのフロントエンドコードにAPIキーを決して公開しないでください。

The connectors.withApiKey() メソッドはデモでは便利ですが、ブラウザ内でAPIキーを公開してしまいます。 本番では常にバックエンドプロキシを使用してください：

安全な本番パターン

フロントエンド：

import { connectors, webrtc, streams } from '@roboflow/inference-sdk';

// 直接APIキーを使う代わりにプロキシエンドポイントを使用
const connector = connectors.withProxyUrl('/api/init-webrtc');

const stream = await streams.useCamera({ video: true });
const connection = await webrtc.useStream({
  source: stream,
  connector,
  wrtcParams: { /* ... */ }
});

バックエンド（Express）：

import { InferenceHTTPClient } from '@roboflow/inference-sdk/api';

app.post('/api/init-webrtc', async (req, res) => {
  const { offer, wrtcparams } = req.body;

  // APIキーはサーバー上で安全に保たれます
  const client = InferenceHTTPClient.init({
    apiKey: process.env.ROBOFLOW_API_KEY
  });

  const answer = await client.initializeWebrtcWorker({
    offer,
    workspaceName: wrtcparams.workspaceName,
    workflowId: wrtcparams.workflowId,
    config: {
      imageInputName: wrtcparams.imageInputName,
      streamOutputNames: wrtcparams.streamOutputNames,
      dataOutputNames: wrtcparams.dataOutputNames
    }
  });

  res.json(answer);
});

主な機能

動的な出力再構成

再起動せずに実行時にストリームおよびデータ出力を変更できます：

// 別の可視化に切り替え
connection.reconfigureOutputs({
  streamOutput: ["blur_visualization"]
});

// すべてのデータ出力を有効にする
connection.reconfigureOutputs({
  dataOutput: ["*"]
});

// 両方を同時に変更
connection.reconfigureOutputs({
  streamOutput: ["annotated_image"],
  dataOutput: ["predictions", "counts"]
});

完全な動作例

フロントエンドとバックエンドの両方のコードを含む完全な動作例については、以下を参照してください： サンプルアプリケーションリポジトリ. サンプルアプリは以下を示します：

• APIキーのセキュリティのための適切なバックエンドプロキシ設定

• カメラストリーミングの統合

• エラーハンドリングと接続管理

• 本番対応のパターン

リソース

• 例示アプリケーション

• NPMのパッケージ