# Web inference-sdk

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

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

* **Workflows निष्पादित करें** - जटिल बहु-चरण कंप्यूटर विज़न पाइपलाइनों को चलाएँ
* **सभी मॉडलों तक पहुँच** - किसी भी 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 का उपयोग करें
// ⚠️ उत्पादन में इसका उपयोग न करें, क्योंकि यह आपकी 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 कुंजी ब्राउज़र में उजागर करती है। **उत्पादन के लिए, हमेशा एक बैकएंड प्रॉक्सी का उपयोग करें:**

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

**Frontend:**

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

// सीधे API कुंजी के बजाय प्रॉक्सी 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 कुंजी सर्वर पर सुरक्षित रहती है
  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);
});
```

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

#### डाइनैमिक आउटपुट पुन:कॉन्फ़िगरेशन

रिस्टार्ट किए बिना रनटाइम पर स्ट्रीम और डेटा आउटपुट बदलें:

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

// सभी डेटा आउटपुट सक्षम करें
connection.reconfigureOutputs({
  dataOutput: ["*"]
});

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

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

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

* API कुंजी सुरक्षा के लिए सही बैकएंड प्रॉक्सी सेटअप
* कैमरा स्ट्रीमिंग एकीकरण
* त्रुटि हैंडलिंग और कनेक्शन प्रबंधन
* उत्पादन-तैयार पैटर्न

### संसाधन

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