Web inference-sdk

inference-sdk के साथ Roboflow cloud पर चलाते हुए, अपने browser से realtime video inference चलाएँ

WebRTC स्ट्रीमिंग क्या है?

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

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

• सभी मॉडल एक्सेस करें - किसी भी Roboflow मॉडल प्रकार का उपयोग करें

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

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

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

इंस्टॉलेशन

npm install @roboflow/inference-sdk

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

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

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

// ⚠️ विकास के लिए केवल withApiKey का उपयोग करें
// ⚠️ इसे production में उपयोग न करें, क्योंकि इससे आपका API key उजागर हो जाएगा
// production के लिए, 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("अनुमान परिणाम:", data);
  }
});

// प्रोसेस किया गया वीडियो प्रदर्शित करें
const videoElement = document.getElementById('video');
videoElement.srcObject = await connection.remoteStream();

// काम पूरा होने पर साफ़ करें
await connection.cleanup();

🔐 सुरक्षा के सर्वोत्तम अभ्यास

उत्पादन अनुप्रयोगों के लिए अपने API key को कभी भी frontend code में प्रकट न करें।

यह connectors.withApiKey() यह method डेमो के लिए सुविधाजनक है, लेकिन ब्राउज़र में आपका API key उजागर करती है। उत्पादन के लिए, हमेशा backend proxy का उपयोग करें:

सुरक्षित उत्पादन पैटर्न

फ्रंटएंड:

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: { /* ... */ }
});

बैकएंड (Express):

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

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

गतिशील आउटपुट पुनःकॉन्फ़िगरेशन

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

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

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

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

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

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

• API key सुरक्षा के लिए उचित backend proxy सेटअप

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

• त्रुटि प्रबंधन और कनेक्शन प्रबंधन

• production-ready पैटर्न

संसाधन

• उदाहरण एप्लिकेशन

• NPM पर पैकेज