इस पेज का अनुवाद 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.
}

कैमरे के पीटीज़ (Pan-Tilt-Zoom) ऐक्सेस का अनुरोध करना

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

कैमरे के पीटीज़ (ज़ूम इन/आउट, पैन, और झुकाव) ऐक्सेस का अनुरोध करने के लिए, 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 पर आधारित ब्राउज़र, कैमरे के लिए पीटीज़ी के साथ काम करता है या नहीं, इंटरनल 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...
}

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

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

खेल का मैदान

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

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

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