> For the complete documentation index, see [llms.txt](https://docs.roboflow.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.roboflow.com/roboflow/roboflow-jp/deploy/sdks/web-browser/web-inference-sdk.md).

# Web inference-sdk

### WebRTC Streamingとは何ですか？

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

* **Workflows を実行** - 複雑な複数ステップのコンピュータビジョンパイプラインを実行
* **すべてのモデルにアクセス** - どの Roboflow モデルタイプでも使用可能
* **サーバー側処理** - 高性能 GPU を活用
* **低レイテンシ** - WebRTC によりほぼリアルタイムの結果を取得
* **双方向通信** - ストリーミング中にデータを送受信

### インストール

```bash
npm install @roboflow/inference-sdk
```

### クイックスタート

始めるには、以下の動画/サンプルコードをご覧ください:

{% embed url="<https://www.loom.com/share/48b7c442a69c49e081d0dbec49e1ab57>" %}

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

// ⚠️ useApiKey は開発用途のみに使用してください
// ⚠️ これを本番環境で使用しないでください。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 キーを絶対に公開しないでください。**

その `connectors.withApiKey()` メソッドはデモには便利ですが、ブラウザ内で API キーが公開されます。 **本番環境では、必ずバックエンドプロキシを使用してください:**

#### 安全な本番パターン

**フロントエンド:**

```typescript
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）:**

```typescript
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);
});
```

### 主な機能

#### 動的な出力再構成

再起動せずに、実行時に stream と data の出力を変更できます:

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

// すべての data 出力を有効化
connection.reconfigureOutputs({
  dataOutput: ["*"]
});

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

### 完全な動作例

フロントエンドとバックエンドの両方のコードを含む完全な動作例については、 [サンプルアプリケーションのリポジトリ](https://github.com/roboflow/inferenceSampleApp)をご覧ください。サンプルアプリでは次の内容を示しています:

* API キー保護のための適切なバックエンドプロキシ設定
* カメラストリーミング統合
* エラーハンドリングと接続管理
* 本番対応のパターン

### リソース

* [サンプルアプリケーション](https://github.com/roboflow/inferenceSampleApp)
* [NPM のパッケージ](https://www.npmjs.com/package/@roboflow/inference-sdk)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.roboflow.com/roboflow/roboflow-jp/deploy/sdks/web-browser/web-inference-sdk.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.