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

# 웹 inference-sdk

### WebRTC Streaming이란?

`@roboflow/inference-sdk` WebRTC를 사용하여 브라우저에서 Roboflow의 inference server로 실시간 비디오 스트리밍을 가능하게 합니다. 이를 통해 다음을 할 수 있습니다:

* **Workflows 실행** - 복잡한 다단계 computer vision pipeline 실행
* **모든 모델에 접근** - 모든 Roboflow model type 사용
* **서버 측 처리** - 강력한 GPU 활용
* **낮은 지연 시간** - 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 key가 노출되므로 프로덕션에서는 사용하지 마세요
// 프로덕션에서는 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("Inference results:", data);
  }
});

// 처리된 비디오 표시
const videoElement = document.getElementById('video');
videoElement.srcObject = await connection.remoteStream();

// 완료되면 정리
await connection.cleanup();
```

### 🔐 보안 모범 사례

**프로덕션 애플리케이션의 frontend code에서 API key를 절대 노출하지 마세요.**

해당 `connectors.withApiKey()` 메서드는 데모에는 편리하지만 브라우저에 API key를 노출합니다. **프로덕션에서는 항상 backend proxy를 사용하세요:**

#### 보안이 적용된 프로덕션 패턴

**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는 서버에서 안전하게 유지됩니다
  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);
});
```

### 주요 기능

#### 동적 출력 재구성

재시작 없이 런타임에 stream 및 data 출력을 변경하세요:

```typescript
// 다른 시각화로 전환
connection.reconfigureOutputs({
  streamOutput: ["blur_visualization"]
});

// 모든 data output 활성화
connection.reconfigureOutputs({
  dataOutput: ["*"]
});

// 둘 다 한 번에 변경
connection.reconfigureOutputs({
  streamOutput: ["annotated_image"],
  dataOutput: ["predictions", "counts"]
});
```

### 완전한 작동 예제

frontend와 backend code를 모두 포함한 전체 작동 예제를 보려면 [샘플 애플리케이션 저장소](https://github.com/roboflow/inferenceSampleApp)를 참조하세요. 샘플 앱은 다음을 보여줍니다:

* API key 보안을 위한 올바른 backend proxy 설정
* 카메라 스트리밍 통합
* 오류 처리 및 연결 관리
* 프로덕션에 바로 사용할 수 있는 패턴

### 리소스

* [예제 애플리케이션](https://github.com/roboflow/inferenceSampleApp)
* [NPM의 패키지](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-ko/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.