इस पेज का अनुवाद Cloud Translation API से किया गया है.

कैमरा पैन, टिल्ट, और ज़ूम को कंट्रोल करें

अब कैमरे की पैन, झुकाने, और ज़ूम करने की सुविधाओं को वेब पर कंट्रोल किया जा सकता है.

François Beaufort

रूम-स्केल वीडियो कॉन्फ़्रेंसिंग सलूशन में, पैन, झुकाएं, और ज़ूम (पीटीज़) की सुविधा वाले कैमरे इस्तेमाल किए जाते हैं, ताकि सॉफ़्टवेयर मीटिंग में हिस्सा लेने वाले लोगों पर कैमरा फ़ोकस कर सके. Chrome 87 से, कैमरे पर पैन करने, झुकाने, और ज़ूम करने की सुविधाएं MediaDevices.getUserMedia() और MediaStreamTrack.applyConstraints() में मीडिया ट्रैक कंस्ट्रेंट का इस्तेमाल करने वाली वेबसाइटों के लिए उपलब्ध हैं.

एपीआई का इस्तेमाल करना

फ़ीचर का पता लगाना

हार्डवेयर के लिए फ़ीचर डिटेक्शन की सुविधा, आम तौर पर इस्तेमाल की जाने वाली सुविधाओं से अलग होती है. navigator.mediaDevices.getSupportedConstraints() में "pan", "tilt", और "zoom" की पाबंदी के नाम होने का मतलब है कि ब्राउज़र, कैमरे के पीटीज़ी को कंट्रोल करने के लिए एपीआई के साथ काम करता है. हालांकि, इससे यह पता नहीं चलता कि कैमरे का हार्डवेयर इसके साथ काम करता है या नहीं. Chrome के 87 वर्शन से, डेस्कटॉप पर कैमरे के PTZ कंट्रोल की सुविधा काम करती है. हालांकि, Android पर अब भी सिर्फ़ ज़ूम की सुविधा काम करती है.

const supports = navigator.mediaDevices.getSupportedConstraints();
if (supports.pan && supports.tilt && supports.zoom) {
  // Browser supports camera PTZ.
}

कैमरे के पीटीज़ (ज़ूम इन/आउट, पैन, और झुकाव) ऐक्सेस का अनुरोध करना

किसी वेबसाइट को कैमरे के पीटीज़ (ज़ूम इन/आउट, पैन, और झुकाव) को कंट्रोल करने की अनुमति सिर्फ़ तब मिलती है, जब उपयोगकर्ता ने प्रॉम्प्ट के ज़रिए कैमरे को पीटीज़ की अनुमति दी हो.

कैमरे के PTZ के ऐक्सेस का अनुरोध करने के लिए, यहां बताए गए पीटीज़ेड कंस्ट्रेंट के साथ navigator.mediaDevices.getUserMedia() को कॉल करें. इससे, उपयोगकर्ता को सामान्य कैमरे और PTZ कैमरे, दोनों के लिए अनुमतियां देने के लिए कहा जाएगा.

macOS के लिए Chrome में, कैमरे के PTZ (ज़ूम इन/आउट) के लिए उपयोगकर्ता को मिलने वाले प्रॉम्प्ट का स्क्रीनशॉट. — कैमरे के पीटीज़ (Pan-Tilt-Zoom) के लिए उपयोगकर्ता प्रॉम्प्ट.

दिखाए गए प्रॉमिस को MediaStream ऑब्जेक्ट के साथ ठीक किया जाएगा. इसका इस्तेमाल, उपयोगकर्ता को कैमरे की वीडियो स्ट्रीम दिखाने के लिए किया जाएगा. अगर कैमरे में PTZ की सुविधा नहीं है, तो उपयोगकर्ता को कैमरे से जुड़ा सामान्य प्रॉम्प्ट दिखेगा.

try {
  // User is prompted to grant both camera and PTZ access in a single call.
  // If camera doesn't support PTZ, it falls back to a regular camera prompt.
  const stream = await navigator.mediaDevices.getUserMedia({
    // Website asks to control camera PTZ as well without altering the
    // current pan, tilt, and zoom settings.
    video: { pan: true, tilt: true, zoom: true }
  });

  // Show camera video stream to user.
  document.querySelector("video").srcObject = stream;
} catch (error) {
  // User denies prompt or matching media is not available.
  console.log(error);
}

अगर PTZ ऐक्सेस उपलब्ध हो जाता है, तो पहले से दी गई कैमरे की अनुमति, अपने-आप PTZ ऐक्सेस नहीं पाती. खास तौर पर, वह अनुमति जिसे PTZ ऐक्सेस के बिना दिया गया हो. यह तब भी लागू होता है, जब कैमरे में PTZ की सुविधा हो. अनुमति का फिर से अनुरोध करना होगा. हालांकि, Permissions API का इस्तेमाल करके, PTZ की अनुमति की स्थिति के बारे में क्वेरी की जा सकती है और उसे मॉनिटर किया जा सकता है.

try {
  const panTiltZoomPermissionStatus = await navigator.permissions.query({
    name: "camera",
    panTiltZoom: true
  });

  if (panTiltZoomPermissionStatus.state == "granted") {
    // User has granted access to the website to control camera PTZ.
  }

  panTiltZoomPermissionStatus.addEventListener("change", () => {
    // User has changed PTZ permission status.
  });
} catch (error) {
  console.log(error);
}

यह जानने के लिए कि Chromium पर चलने वाला ब्राउज़र, कैमरे के लिए PTZ की सुविधा देता है या नहीं, इंटरनल about://media-internals पेज पर जाकर "वीडियो कैप्चर" टैब में "पैन-टिल्ट-ज़ूम" कॉलम देखें. इसके हिसाब से, कैमरा "पैन टिल्ट (ऐब्सलूट)" और "ज़ूम (ऐब्सलूट)" यूवीसी कंट्रोल का इस्तेमाल करता है. Chromium पर आधारित ब्राउज़र में, "पैन-टिल्ट (रिलेटिव)" और "ज़ूम (रिलेटिव)" यूवीसी कंट्रोल काम नहीं करते.

PTZ कैमरा सपोर्ट को डीबग करने के लिए, ChromeOS में इंटरनल पेज का स्क्रीनशॉट. — पीटीज़ी कैमरे के साथ काम करने की सुविधा को डीबग करने के लिए इंटरनल पेज.

कैमरे के पीटीज़ को कंट्रोल करना

पहले से चुने गए stream ऑब्जेक्ट की झलक MediaStreamTrack का इस्तेमाल करके, कैमरे की PTZ सुविधाओं और सेटिंग में बदलाव करें. MediaStreamTrack.getCapabilities(), इस्तेमाल की जा सकने वाली सुविधाओं और रेंज या अनुमति वाली वैल्यू वाली डिक्शनरी दिखाता है. इसी तरह, MediaStreamTrack.getSettings() मौजूदा सेटिंग दिखाता है.

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

कैमरे के पीटीज़ी को कंट्रोल करना.

कैमरे को पैन, झुकाने, और ज़ूम करने के लिए, PTZ की बेहतर पाबंदियों के साथ videoTrack.applyConstraints() को कॉल करें. इसका उदाहरण नीचे दिया गया है. अगर फ़ंक्शन सही तरीके से काम करता है, तो रिटर्न किया गया प्रॉमिस पूरा हो जाएगा. अगर ऐसा नहीं किया जाता है, तो इनमें से किसी एक वजह से अनुरोध अस्वीकार कर दिया जाएगा:

PTZ की अनुमति वाला कैमरा उपलब्ध नहीं है.
कैमरे का हार्डवेयर, पीटीज़ी कंस्ट्रेंट के साथ काम नहीं करता.
पेज उपयोगकर्ता को नहीं दिख रहा है. पेज के दिखने की सेटिंग में हुए बदलावों का पता लगाने के लिए, पेज विज़िबिलिटी एपीआई का इस्तेमाल करें.

// Get video track capabilities and settings.
const [videoTrack] = stream.getVideoTracks();
const capabilities = videoTrack.getCapabilities();
const settings = videoTrack.getSettings();

// Let the user control the camera pan motion if the camera supports it
// and PTZ access is granted.
if ("pan" in settings) {
  const input = document.querySelector("input[type=range]");
  input.min = capabilities.pan.min;
  input.max = capabilities.pan.max;
  input.step = capabilities.pan.step;
  input.value = settings.pan;

  input.addEventListener("input", async () => {
    await videoTrack.applyConstraints({ advanced: [{ pan: input.value }] });
  });
}

if ("tilt" in settings) {
  // similar for tilt...
}
if ("zoom" in settings) {
  // similar for zoom...
}

कुछ कैमरा PTZ आदर्श कंस्ट्रेंट वैल्यू के साथ navigator.mediaDevices.getUserMedia() को कॉल करके, कैमरा पैन, टिल्ट, और ज़ूम को कॉन्फ़िगर किया जा सकता है. यह सुविधा तब काम आती है, जब कैमरे के पीटीज़ेड फ़ीचर के बारे में पहले से पता हो. ध्यान दें कि यहां ज़रूरी शर्तों (कम से कम, ज़्यादा से ज़्यादा, सटीक) की अनुमति नहीं है.

const stream = await navigator.mediaDevices.getUserMedia({
  // Website asks to reset known camera pan.
  video: { pan: 0, deviceId: { exact: "myCameraDeviceId" } }
});

खेल का मैदान

Glitch पर डेमो चलाकर, एपीआई को आज़माया जा सकता है. सोर्स कोड देखना न भूलें.

सुरक्षा से जुड़ी बातें

स्पेसिफ़िकेशन के लेखकों ने इस एपीआई को डिज़ाइन और लागू किया है. इसमें उपयोगकर्ता कंट्रोल, पारदर्शिता, और काम करने के तरीके को ध्यान में रखा गया है. इस एपीआई का इस्तेमाल करने के लिए, मुख्य रूप से उसी अनुमति मॉडल से तय किया गया है जिससे Media Capture और Streams API को इस्तेमाल किया गया है. उपयोगकर्ता के प्रॉम्प्ट के जवाब में, वेबसाइट को कैमरे के PTZ को सिर्फ़ तब कंट्रोल करने की अनुमति है, जब उपयोगकर्ता को पेज दिख रहा हो.

ब्राउज़र के साथ काम करना