Web inference-sdk

ब्राउज़र से रीयलटाइम वीडियो inference चलाने के लिए inference-sdk का उपयोग करें, जो Roboflow क्लाउड पर चलता है

WebRTC Streaming क्या है?

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

• Workflows निष्पादित करें - जटिल बहु-चरण कंप्यूटर विज़न पाइपलाइनों को चलाएँ

• सभी मॉडलों तक पहुँच - किसी भी Roboflow मॉडल प्रकार का उपयोग करें

• सर्वर-साइड प्रोसेसिंग - शक्तिशाली GPUs का लाभ उठाएँ

• कम विलंबता - WebRTC निकट-वास्तविक-समय परिणाम प्रदान करता है

• द्वि-दिशात्मक संचार - स्ट्रीमिंग के दौरान डेटा भेजें और प्राप्त करें

स्थापना

npm install @roboflow/inference-sdk

त्वरित शुरूआत

शुरू करने के लिए नीचे वीडियो/नमूना कोड देखें:

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:

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):

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

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

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

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

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

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

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

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

फ्रंटएंड और बैकएंड कोड दोनों के साथ एक पूर्ण कार्यशील उदाहरण के लिए, देखें sample application repository. सैंपल ऐप यह प्रदर्शित करता है:

• API कुंजी सुरक्षा के लिए सही बैकएंड प्रॉक्सी सेटअप

• कैमरा स्ट्रीमिंग एकीकरण

• त्रुटि हैंडलिंग और कनेक्शन प्रबंधन

• उत्पादन-तैयार पैटर्न

संसाधन

• उदाहरण अनुप्रयोग

• NPM पर पैकेज