> 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 का उपयोग करें
* **Server-Side Processing** - शक्तिशाली GPUs का लाभ उठाएँ
* **कम Latency** - WebRTC near-real-time परिणाम प्रदान करता है
* **Bidirectional Communication** - 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 में NEVER उजागर करें।**

यह `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

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 के लिए, देखें [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

### Resources

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.