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

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

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

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

सुविधा की पहचान करने की सुविधा

हार्डवेयर की सुविधा की पहचान करने की सुविधा, पहले से इस्तेमाल की जा रही सुविधा से अलग है. navigator.mediaDevices.getSupportedConstraints() में "pan", "tilt", और "zoom" कंस्ट्रेंट के नामों से आपको पता चलता है कि ब्राउज़र, कैमरा PTZ को कंट्रोल करने के लिए एपीआई की सुविधा देता है, लेकिन कैमरा हार्डवेयर के साथ काम नहीं करता है. 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 की अनुमतियों के साथ सामान्य कैमरा और कैमरा, दोनों देने का प्रॉम्प्ट मिलेगा.

वापस किया गया प्रॉमिस, उपयोगकर्ता को कैमरे की वीडियो स्ट्रीम दिखाने के लिए इस्तेमाल किए गए 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 पर काम करता हो. हालांकि, उनके लिए फिर से अनुमति अनुरोध करना होगा. अच्छी बात यह है कि पीटीज़ेड अनुमति की स्थिति के बारे में क्वेरी करने और उसे मॉनिटर करने के लिए, Permissions API का इस्तेमाल किया जा सकता है.

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 पेज पर जाएं और "वीडियो कैप्चर" टैब में "पैन-टिल्ट-ज़ूम" कॉलम देखें; "पैन टिल्ट" और "ज़ूम" का मतलब है कि कैमरा "पैनटिल्ट (ऐबसलूट)" और "ज़ूम (ऐबसलूट)" यूवीसी कंट्रोल के साथ काम करता है. "Pantill (सापेक्ष)" और "ज़ूम (सापेक्ष)" यूवीसी नियंत्रण Chromium-आधारित ब्राउज़र में काम नहीं करते.

कैमरा PTZ कंट्रोल करें

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

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

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

• PTZ अनुमति वाले कैमरे को अनुमति नहीं दी गई है.
• कैमरा हार्डवेयर, 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 आदर्श कंस्ट्रेंट वैल्यू के साथ भी कॉन्फ़िगर किया जा सकता है. यह तब काम आता है, जब कैमरे की PTZ क्षमताओं का पहले से पता चल जाता है. ध्यान दें कि यहां ज़रूरी सीमाएं (कम से कम, ज़्यादा से ज़्यादा, सटीक) की अनुमति नहीं है.

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

खेल का मैदान

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

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

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

वेबसाइट का अलग-अलग ब्राउज़र पर चलना

MediaStream API

अनुमतियों का एपीआई

पेज विज़िबिलिटी एपीआई

MediaDevices.getUserMedia()

MediaDevices.getSupportedConstraints()

MediaStreamTrack.applyConstraints()

MediaStreamTrack.getCapabilities()

MediaStreamTrack.getSettings()

मददगार लिंक

• पीटीज़ेड का एक्सप्लेनर वीडियो
• खास जानकारी का ड्राफ़्ट
• GitHub रिपॉज़िटरी
• ChromeStatus एंट्री
• Chrome को ट्रैक करने में गड़बड़ी

स्वीकार हैं

इस लेख की समीक्षा जो मेडली और थॉमस स्टेनर ने की है. Intel के रिजुब्राता बॉमिक और Eero Häkkinen को, स्पेसिफ़िकेशन और लागू करने की प्रक्रिया पर काम करने के लिए धन्यवाद. Unsplash पर क्रिस्टिना @ wocintechchat.com की हीरो इमेज.