<usermedia> एचटीएमएल एलिमेंट के बारे में जानकारी

Mari Viana

Minh Le

पब्लिश होने की तारीख: 29 जून, 2026

Chrome 144 में <geolocation> एलिमेंट लॉन्च होने के बाद, Capability Elements सुइट में अगला फ़ंक्शनल कंट्रोल, <usermedia> एचटीएमएल एलिमेंट है. यह एलिमेंट, Chrome 151 से उपलब्ध है. यह कैमरे और माइक्रोफ़ोन की स्ट्रीम को ऐक्सेस करने के लिए, अनुमति के सामान्य अनुरोधों से लेकर टारगेट किए गए और फ़ंक्शनल कंट्रोल तक ट्रांज़िशन के अगले चरण को दिखाता है. स्क्रिप्ट से ट्रिगर होने वाले प्रॉम्प्ट के बजाय, एलान करने और उपयोगकर्ता की ओर से चालू की जाने वाली सुविधा का इस्तेमाल करने से, <usermedia> बॉयलरप्लेट कोड कम हो जाता है, सुरक्षा बेहतर होती है, और जिन उपयोगकर्ताओं ने पहले ऐक्सेस से इनकार कर दिया था उनके लिए, डेटा वापस पाने का आसान तरीका उपलब्ध होता है. इससे अनुमति से जुड़ी समस्या को असरदार तरीके से हल किया जा सकता है.

अनुमति मैनेज करने से लेकर सुविधाओं को कंट्रोल करने तक

<usermedia> एलिमेंट, कैपेबिलिटी एलिमेंट सुइट में लॉन्च होने वाला अगला खास कंट्रोल है. इससे पहले, <geolocation> को लॉन्च किया गया था. ओरिजनल और सामान्य <permission> प्रस्ताव से इस ट्रांज़िशन को PEPC पहल का हिस्सा बनाया गया है. इससे ब्राउज़र, अलग-अलग हार्डवेयर की क्षमताओं की खास जटिलताओं और व्यवहारों को ज़्यादा असरदार तरीके से मैनेज कर पाता है. शुरुआती प्रस्ताव में, अनुमति की स्थितियों को मैनेज करने पर मुख्य रूप से फ़ोकस किया गया था. जैसे, अनुमति देना बनाम अनुमति न देना. वहीं, क्षमता से जुड़े एलिमेंट, डेटा मीडिएटर के तौर पर काम करते हैं.

<geolocation> एलिमेंट, आपकी साइट को जगह की जानकारी वाला ऑब्जेक्ट उपलब्ध कराता है. साथ ही, <usermedia> कैमरा और माइक्रोफ़ोन के ऐक्सेस के पूरे फ़्लो को मैनेज करता है. यह उपयोगकर्ता के मकसद को कैप्चर करती है, ब्राउज़र प्रॉम्प्ट को मैनेज करती है, और ऐप्लिकेशन को MediaStream ऑब्जेक्ट डिलीवर करती है. इस बदलाव से, अलग-अलग getUserMedia() कॉल करने की ज़रूरत नहीं पड़ती. साथ ही, इसे लागू करना आसान हो जाता है. इससे यह भी पक्का होता है कि ब्राउज़र के पास, उपयोगकर्ता के इरादे का भरोसेमंद सिग्नल है.

कॉन्सेप्ट की पुष्टि करना

ओरिजनल ट्रायल से मिले असल डेटा से पता चला है कि कॉन्टेक्स्ट के हिसाब से और उपयोगकर्ता की ओर से शुरू किए गए अनुमति कंट्रोल से, उपयोगकर्ता के टास्क पूरे होने की दर में काफ़ी सुधार होता है.

• Cisco ने पाया कि जिन उपयोगकर्ताओं ने शुरुआत में अनुमतियां अस्वीकार की थीं उनमें से सिर्फ़ 10% उपयोगकर्ताओं ने लेगसी प्रॉम्प्ट का इस्तेमाल करके अनुमतियां दीं. हालांकि, नए एलिमेंट के साथ यह दर 65% से ज़्यादा हो गई.
• Zoom ने बताया कि एलिमेंट का इस्तेमाल करके, कैमरा या माइक्रोफ़ोन कैप्चर करने से जुड़ी गड़बड़ियों में 46.9% की कमी आई है. जैसे, सिस्टम लेवल पर ब्लॉक करने से जुड़ी गड़बड़ियां. इस एलिमेंट का इस्तेमाल, उपयोगकर्ताओं को गड़बड़ी ठीक करने के तरीके के बारे में बताने के लिए किया जाता है;
• Google Meet में, "माइक काम नहीं कर रहा है" के बारे में मिलने वाली शिकायतों में 17% की कमी आई. साथ ही, जिन उपयोगकर्ताओं ने शुरुआत में ऐक्सेस देने से मना कर दिया था उनके लिए, अनुमति वापस पाने की सुविधा का इस्तेमाल करने वाले लोगों की संख्या में 131% की बढ़ोतरी हुई.

<usermedia> एलिमेंट का इस्तेमाल क्यों करें?

<geolocation> ने जो पैटर्न तय किए हैं उनके आधार पर, <usermedia> एलिमेंट, एआई की बेहतरीन सुविधाओं का अनुरोध करने से जुड़ी मुख्य चुनौतियों को हल करता है. मीडिया अनुरोध, ज़रूरी JavaScript कॉल पर निर्भर करते हैं. ये कॉल अक्सर कॉन्टेक्स्ट से बाहर के प्रॉम्प्ट ट्रिगर करते हैं. अगर आपने गलती से अपनी साइट को ब्लॉक कर दिया है, तो इस फ़ैसले को वापस लेने के लिए आपको ब्राउज़र सेटिंग में जाकर, "अनुमति से जुड़ी समस्या" को ठीक करना होगा. इससे अक्सर सुविधाओं का इस्तेमाल बंद हो जाता है.

<usermedia> एलिमेंट इन समस्याओं को हल करता है. इसके लिए, यह एलिमेंट ये सुविधाएं देता है:

• साफ़ तौर पर मकसद और समय बताना: यह प्रॉम्प्ट सिर्फ़ तब दिखता है, जब ब्राउज़र कंट्रोल किए गए किसी एलिमेंट पर टैप किया जाता है. इसलिए, इससे मकसद का भरोसेमंद सिग्नल मिलता है. इससे ब्राउज़र, अपने-आप लागू होने वाले साइलेंट ब्लॉक को बायपास कर पाता है. इनकी वजह से, स्क्रिप्ट से ट्रिगर होने वाले अनुरोध अक्सर पूरे नहीं हो पाते.
• आसानी से ऐक्सेस वापस पाना: अगर पहले ऐक्सेस नहीं दिया गया था, तो एलिमेंट पर टैप करने से, ऐक्सेस वापस पाने की प्रोसेस शुरू हो जाती है. इससे आपको ब्राउज़र की जटिल सेटिंग में जाए बिना, पेज पर तुरंत कैमरे या माइक्रोफ़ोन का ऐक्सेस वापस मिल जाता है.
• स्ट्रीम को सीधे ऐक्सेस करना: डेटा मीडिएटर के तौर पर, यह एलिमेंट मीडिया स्ट्रीम को सीधे तौर पर दिखाता है. इससे आपके ऐप्लिकेशन में, कॉल बैक और गड़बड़ी की स्थितियों को मैनेज करने के लिए ज़रूरी छोटे-मोटे बदलाव वाले कोड कम हो जाते हैं.

लागू करना

इस एलिमेंट को इंटिग्रेट करने के लिए, लेगसी JavaScript API की तुलना में बहुत कम बॉयलरप्लेट की ज़रूरत होती है. <geolocation> एलिमेंट से तय किए गए डिक्लेरेटिव पैटर्न के हिसाब से, अपने एचटीएमएल में <usermedia> टैग जोड़ा जा सकता है. साथ ही, setConstraints() तरीके का इस्तेमाल करके, हार्डवेयर से जुड़ी ज़रूरी शर्तें कॉन्फ़िगर की जा सकती हैं.

<usermedia id="media-ctrl">
  <button>Enable camera and microphone</button>
</usermedia>

const el = document.getElementById('media-ctrl');

// Specify hardware preferences before user interaction:
el.setConstraints({
    video: { width: 1280, height: 720 },
    audio: { echoCancellation: true }
});

// Handle successful stream acquisition:
el.addEventListener('stream', () => {
  videoPreview.srcObject = el.stream;
});

// Handle stream acquisition failure:
el.addEventListener('error', () => {
  console.error(`Access failed: ${el.error?.name}`);
});

// Handle prompt cancellation or dismissal:
el.addEventListener('cancel', () => {
  console.log('Permission prompt was dismissed by the user.');
});

मुख्य एट्रिब्यूट और प्रॉपर्टी

• stream: यह सिर्फ़ पढ़ने के लिए उपलब्ध प्रॉपर्टी है. इससे उपयोगकर्ता के ऐक्सेस देने के बाद, MediaStream ऑब्जेक्ट मिलता है.
• setConstraints(): यह एक ऐसा तरीका है जिससे डेवलपर, उपयोगकर्ता के इंटरैक्शन से पहले हार्डवेयर की सेटिंग अपडेट कर सकते हैं. जैसे, deviceId या रिज़ॉल्यूशन.
• error: यह सिर्फ़ पढ़ने के लिए उपलब्ध प्रॉपर्टी है. अगर अनुरोध पूरा नहीं होता है या उसे खारिज कर दिया जाता है, तो यह DOMException (उदाहरण के लिए, NotAllowedError) दिखाता है.
• onstream: यह एक इवेंट हैंडलर है. मीडिया ट्रैक हासिल करने के तुरंत बाद यह ट्रिगर होता है.
• onerror: यह एक इवेंट हैंडलर है. यह तब ट्रिगर होता है, जब स्ट्रीम हासिल करने की कोशिश पूरी नहीं हो पाती.
• oncancel: यह एक इवेंट हैंडलर है. यह तब ट्रिगर होता है, जब उपयोगकर्ता ऐक्विज़िशन के दौरान अनुमति मांगने वाले प्रॉम्प्ट को रद्द कर देता है या खारिज कर देता है.

स्टाइलिंग से जुड़ी शर्तें

लोगों का भरोसा बनाए रखने और गुमराह करने वाले डिज़ाइन पैटर्न को रोकने के लिए, <usermedia> एलिमेंट पर स्टाइल से जुड़ी वही पाबंदियां लागू होती हैं जो अन्य क्षमता वाले एलिमेंट पर लागू होती हैं:

• पढ़ने में आसानी: ब्राउज़र, टेक्स्ट और बैकग्राउंड के रंगों के बीच कंट्रास्ट की जांच करता है. यह कंट्रास्ट कम से कम 3:1 होना चाहिए, ताकि अनुरोध को हमेशा पढ़ा जा सके. आपको ऐल्फ़ा चैनल (opacity) को 1 पर सेट करना होगा, ताकि एलिमेंट को धोखेबाज़ी से पारदर्शी होने से रोका जा सके.
• साइज़ और स्पेसिंग: ब्राउज़र, width, height, और font-size के लिए कम से कम और ज़्यादा से ज़्यादा सीमाएं लागू करता है. यह नेगेटिव मार्जिन या आउटलाइन ऑफ़सेट को बंद कर देता है, ताकि एलिमेंट को विज़ुअल तौर पर छिपाने से रोका जा सके.
• विज़ुअल इंटिग्रिटी: ब्राउज़र, इमेज को खराब करने वाले इफ़ेक्ट को सीमित करता है. उदाहरण के लिए, transform सिर्फ़ 2D ट्रांसफ़ॉर्मेशन और प्रोपोर्शनल स्केलिंग के साथ काम करता है.
• सीएसएस स्यूडो-क्लास: एलिमेंट, स्थिति के आधार पर स्टाइलिंग की सुविधा के साथ काम करता है. जैसे, :granted (यह अनुमति मिलने और स्ट्रीम हासिल होने के बाद चालू होता है). साथ ही, यह स्टैंडर्ड इंटरैक्शन की स्थितियों के साथ भी काम करता है. जैसे, :hover और :active.

परतदार वृद्धि और माइग्रेशन की रणनीति

<geolocation> के तय किए गए डिज़ाइन पैटर्न के मुताबिक, <geolocation> एलिमेंट को इस तरह बनाया गया है कि यह धीरे-धीरे काम करना बंद कर दे.<usermedia> जो ब्राउज़र एलिमेंट के साथ काम नहीं करते वे इसे HTMLUnknownElement के तौर पर इस्तेमाल करेंगे और इसके चाइल्ड एलिमेंट को रेंडर करेंगे. इससे सभी उपयोगकर्ताओं को फ़ॉलबैक अनुभव दिया जा सकता है.

कस्टम फ़ॉलबैक पैटर्न

JavaScript में <usermedia> एलिमेंट के साथ काम करने की सुविधा का प्रोग्राम के हिसाब से पता लगाएं:

if ('HTMLUserMediaElement' in window) {
  // Use modern <usermedia> element logic
} else {
  // Fallback to legacy getUserMedia() API
}

getUserMedia() एपीआई को ट्रिगर करने के लिए, <usermedia> एलिमेंट में स्टैंडर्ड बटन जोड़ने के लिए, इस लॉजिक का इस्तेमाल करें:

<usermedia id="stream-handler">
    <button id="fallback-stream-handler">
        Enable Camera and Mic
    </button>
</usermedia>

// Function for handling video/audio streams:
function handleStream (event) {
  /* ... */
}

if ('HTMLUserMediaElement' in window) {
  // In this case, we have <usermedia> element support:
  const streamHandler = document.getElementById('stream-handler');

  streamHandler.addEventListener('stream', event => {
    handleStream(event);
  });
} else {
  // <usermedia> element support is missing, so fall back instead:
  const fallbackStreamHandler = document.getElementById('fallback-stream-handler');

  fallbackStreamHandler.addEventListener('click', event => {
    navigator.mediaDevices.getUserMedia({video: true, audio: true}).then(handleStream);
  });
}

ऑरिजिन ट्रायल में हिस्सा लेने वाले लोगों के लिए माइग्रेशन

ऑरिजिन ट्रायल के दौरान, एक्सपेरिमेंट के तौर पर उपलब्ध और सामान्य <permission> एलिमेंट को इंटिग्रेट करने वाले डेवलपर के लिए, <usermedia> पर ट्रांज़िशन करने की प्रोसेस को आसान बनाया गया है.

1. टैग अपडेट: <permission type="camera microphone"> को <usermedia> से बदलें, ताकि यह पक्का किया जा सके कि <permission> एलिमेंट को टारगेट करने वाले सभी सिलेक्टर, <usermedia> एलिमेंट का इस्तेमाल करने के लिए अपडेट किए गए हैं.
2. सुविधा का पता लगाना: अपडेट की जांच HTMLPermissionElement से HTMLUserMediaElement तक

आगे का रोडमैप

<usermedia> एलिमेंट, ऑडियो और वीडियो के मिले-जुले अनुरोधों को मैनेज करता है. हालांकि, आने वाले समय में उपलब्ध होने वाले क्षमता वाले एलिमेंट के लिए रोडमैप में ये शामिल हैं:

• <camera>: यह सिर्फ़ वीडियो वाले कॉन्टेंट पर फ़ोकस करता है.
• <microphone>: यह सिर्फ़ ऑडियो वाले विज्ञापनों पर फ़ोकस करता है.

यहां देखें कि ये केपबिलिटी-खास एलिमेंट, डेवलपर को ज़्यादा सहज और भरोसेमंद मीडिया अनुभव देने में कैसे मदद करते हैं. ज़्यादा जानकारी के लिए, क्षमता से जुड़े एलिमेंट की तकनीकी गाइड देखें.

इसी विषय से जुड़े कुछ लिंक

• क्षमता वाले एलिमेंट: <usermedia> एलिमेंट के बारे में जानकारी
• खास जानकारी
• <geolocation> एचटीएमएल एलिमेंट के बारे में जानकारी