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

# वेब inference-sdk

### WebRTC स्ट्रीमिंग क्या है?

`@roboflow/inference-sdk` WebRTC का उपयोग करके आपके ब्राउज़र से Roboflow के inference servers तक real-time वीडियो स्ट्रीमिंग सक्षम करता है। इससे आप यह कर सकते हैं:

* **वर्कफ़्लो निष्पादित करें** - जटिल बहु-चरणीय कंप्यूटर विज़न पाइपलाइन चलाएँ
* **सभी मॉडल एक्सेस करें** - किसी भी Roboflow मॉडल प्रकार का उपयोग करें
* **सर्वर-साइड प्रोसेसिंग** - शक्तिशाली GPUs का लाभ उठाएँ
* **कम विलंबता** - 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 का उपयोग करें
// ⚠️ इसे production में उपयोग न करें, क्योंकि इससे आपका API key उजागर हो जाएगा
// production के लिए, backend proxy का उपयोग करें (अगला अनुभाग देखें)
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("अनुमान परिणाम:", data);
  }
});

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

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

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

**उत्पादन अनुप्रयोगों के लिए अपने API key को कभी भी frontend code में प्रकट न करें।**

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

#### सुरक्षित उत्पादन पैटर्न

**फ्रंटएंड:**

```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: { /* ... */ }
});
```

**बैकएंड (Express):**

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

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

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

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

#### गतिशील आउटपुट पुनःकॉन्फ़िगरेशन

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

```typescript
// अलग विज़ुअलाइज़ेशन पर स्विच करें
connection.reconfigureOutputs({
  streamOutput: ["blur_visualization"]
});

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

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

### पूर्ण कार्यशील उदाहरण

फ्रंटएंड और बैकएंड दोनों कोड के साथ पूर्ण कार्यशील उदाहरण के लिए, देखें [नमूना एप्लिकेशन रिपॉज़िटरी](https://github.com/roboflow/inferenceSampleApp). नमूना ऐप प्रदर्शित करता है:

* API key सुरक्षा के लिए उचित backend proxy सेटअप
* कैमरा स्ट्रीमिंग एकीकरण
* त्रुटि प्रबंधन और कनेक्शन प्रबंधन
* production-ready पैटर्न

### संसाधन

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