> 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-hi/deploy/sdks/web-browser/web-inference-sdk.md).

# Web inference-sdk

### WebRTC Streaming क्या है?

`@roboflow/inference-sdk` यह WebRTC का उपयोग करके आपके browser से Roboflow के inference servers तक real-time video streaming सक्षम करता है। इससे आप यह कर सकते हैं:

* **Workflows चलाएँ** - जटिल multi-step computer vision pipelines चलाएँ
* **सभी Models तक पहुंचें** - किसी भी Roboflow model type का उपयोग करें
* **सर्वर-साइड प्रोसेसिंग** - शक्तिशाली GPUs का लाभ उठाएँ
* **कम Latency** - WebRTC लगभग real-time परिणाम प्रदान करता है
* **द्विदिश संचार** - streaming के दौरान डेटा भेजें और प्राप्त करें

### Installation

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

### त्वरित शुरुआत

शुरू करने के लिए नीचे दिए गए video/sample code पर एक नज़र डालें:

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

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

// ⚠️ विकास के लिए केवल withApiKey का उपयोग करें
// ⚠️ production में इसका उपयोग न करें, क्योंकि इससे आपका API key उजागर हो जाएगा
// production के लिए, एक backend proxy का उपयोग करें (अगला section देखें)
const connector = connectors.withApiKey("your-api-key");

// कैमरा stream प्राप्त करें
const stream = await streams.useCamera({
  video: {
    facingMode: { ideal: "environment" },
    width: { ideal: 640 },
    height: { ideal: 480 }
  }
});

// WebRTC connection शुरू करें
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 परिणाम:", data);
  }
});

// प्रोसेस किया गया video प्रदर्शित करें
const videoElement = document.getElementById('video');
videoElement.srcObject = await connection.remoteStream();

// काम पूरा होने पर साफ़ करें
await connection.cleanup();
```

### 🔐 Security के सर्वोत्तम अभ्यास

**production applications के लिए frontend code में अपनी API key कभी उजागर न करें।**

यह `connectors.withApiKey()` method demos के लिए सुविधाजनक है, लेकिन browser में आपकी API key उजागर कर देता है। **production के लिए, हमेशा backend proxy का उपयोग करें:**

#### सुरक्षित Production Pattern

**Frontend:**

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

// सीधे API key के बजाय proxy endpoint का उपयोग करें
const connector = connectors.withProxyUrl('/api/init-webrtc');

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

**Backend (Express):**

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

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

  // API key server पर सुरक्षित रहती है
  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);
});
```

### मुख्य विशेषताएँ

#### Dynamic Output Reconfiguration

बिना restart किए runtime पर stream और data outputs बदलें:

```typescript
// किसी अलग visualization पर स्विच करें
connection.reconfigureOutputs({
  streamOutput: ["blur_visualization"]
});

// सभी data outputs सक्षम करें
connection.reconfigureOutputs({
  dataOutput: ["*"]
});

// दोनों को एक साथ बदलें
connection.reconfigureOutputs({
  streamOutput: ["annotated_image"],
  dataOutput: ["predictions", "counts"]
});
```

### पूरा Working Example

frontend और backend code दोनों के साथ पूर्ण working example के लिए देखें the [sample application repository](https://github.com/roboflow/inferenceSampleApp). sample app यह दिखाता है:

* API key security के लिए उचित backend proxy setup
* Camera streaming integration
* Error handling और connection management
* production-ready patterns

### संसाधन

* [उदाहरण Application](https://github.com/roboflow/inferenceSampleApp)
* [NPM पर पैकेज](https://www.npmjs.com/package/@roboflow/inference-sdk)