# Web inference-sdk

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

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

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

### Installation

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

### Quick Start

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

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

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

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

// camera 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 results:", data);
  }
});

// processed video दिखाएँ
const videoElement = document.getElementById('video');
videoElement.srcObject = await connection.remoteStream();

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

### 🔐 Security Best Practices

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

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

#### Secure 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

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

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

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

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

### Complete Working Example

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

* API key सुरक्षा के लिए उचित backend proxy setup
* Camera streaming integration
* Error handling और connection management
* Production-ready patterns

### Resources

* [Example Application](https://github.com/roboflow/inferenceSampleApp)
* [Package on NPM](https://www.npmjs.com/package/@roboflow/inference-sdk)


---

# Agent Instructions: 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:

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

The question should be specific, self-contained, and written in natural language.
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.