> 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/deployment/ja/self-hosted/sdks/web-browser/web-inference-sdk.md).

# Web inference-sdk

既存の Serverless Video Streaming 連携向けの JavaScript WebRTC リファレンス。新しい管理されたライブカメラのデプロイには Cloud Streaming を使用してください。

{% hint style="info" %}
以下のホスト型 WebRTC 統合では、非推奨の [Serverless Video Streaming API](/deployment/ja/roboflow-cloud/serverless-api/serverless-video-streaming-api.md)。新しいマネージドライブカメラのデプロイには、 [Cloud Streaming](/deployment/ja/roboflow-cloud/cloud-streaming.md)。その source、job、result インターフェースは、このページの WebRTC メソッドとは別です。
{% endhint %}

### WebRTC ストリーミングとは？

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

* **ワークフローを実行** - 複雑な複数ステップのコンピュータビジョンパイプラインを実行
* **すべてのモデルにアクセス** - どの 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';

// ⚠️ 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 キーを絶対に公開しないでください。**

この `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)