Web Inference SDK

What is WebRTC Streaming?

@roboflow/inference-sdk enables real-time video streaming from your browser to Roboflow's inference servers using WebRTC. This allows you to:

  • Execute Workflows — Run complex multi-step computer vision pipelines
  • Access All Models — Use any Roboflow model type
  • Server-Side Processing — Leverage powerful GPUs
  • Low Latency — WebRTC provides near-real-time results
  • Bidirectional Communication — Send and receive data during streaming

Installation

npm install @roboflow/inference-sdk

Quick Start

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

// Use withApiKey for development only
// Do not use this in production, because it will expose your API key
// For production, use a backend proxy (see next section)
const connector = connectors.withApiKey("your-api-key");

// Get camera stream
const stream = await streams.useCamera({
  video: {
    facingMode: { ideal: "environment" },
    width: { ideal: 640 },
    height: { ideal: 480 }
  }
});

// Start 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);
  }
});

// Display processed video
const videoElement = document.getElementById('video');
videoElement.srcObject = await connection.remoteStream();

// Clean up when done
await connection.cleanup();

Security Best Practices

NEVER expose your API key in frontend code for production applications.

The connectors.withApiKey() method is convenient for demos but exposes your API key in the browser. For production, always use a backend proxy:

Secure Production Pattern

Frontend:

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

// Use proxy endpoint instead of direct API key
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):

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

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

  // API key stays secure on the 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);
});

Key Features

Dynamic Output Reconfiguration

Change stream and data outputs at runtime without restarting:

// Switch to different visualization
connection.reconfigureOutputs({
  streamOutput: ["blur_visualization"]
});

// Enable all data outputs
connection.reconfigureOutputs({
  dataOutput: ["*"]
});

// Change both at once
connection.reconfigureOutputs({
  streamOutput: ["annotated_image"],
  dataOutput: ["predictions", "counts"]
});

Complete Working Example

For a full working example with both frontend and backend code, see the sample application repository. The sample app demonstrates:

  • Proper backend proxy setup for API key security
  • Camera streaming integration
  • Error handling and connection management
  • Production-ready patterns

Resources