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

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

François Beaufort
François Beaufort
GitHub

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

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

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

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

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

कैमरे के PTZ का ऐक्सेस मांगें

किसी वेबसाइट को कैमरे के पीटीज़ेड कंट्रोल को सिर्फ़ तब कंट्रोल करने की अनुमति है, जब उपयोगकर्ता ने साफ़ तौर पर ऐसा किया हो ने प्रॉम्प्ट के ज़रिए PTZ की अनुमति वाले कैमरे को दिया.

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

macOS के लिए Chrome में, कैमरे के PTZ उपयोगकर्ता के अनुरोध का स्क्रीनशॉट.
कैमरा 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 के साथ काम करता हो. अनुमति का अनुरोध करना ज़रूरी है फिर से. अच्छी बात यह है कि आप 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 पेज और "पैन-टिल्ट-ज़ूम करें" देखें कॉलम "वीडियो कैप्चर" में टैब; "पैन टिल्ट करें" और "ज़ूम करें" का मतलब है कि कैमरा "PanTilt (समूह)" और "ज़ूम (ऐब्सलूट)" यूवीसी कंट्रोल. "PanTilt (रिलेटिव)" और "ज़ूम (रिलेटिव)" यूवीसी कंट्रोल, Chromium पर आधारित ब्राउज़र में काम नहीं करते.

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

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

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

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

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

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

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

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

खेल का मैदान

Glitch पर डेमो चलाया जा सकता है और एपीआई का इस्तेमाल किया जा सकता है. चेक आउट करना न भूलें सोर्स कोड.

सुरक्षा के बारे में ध्यान देने वाली बातें

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

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

MediaStream API

ब्राउज़र सहायता

  • Chrome: 55. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 12. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 15. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 11. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

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

ब्राउज़र सहायता

  • Chrome: 43. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 79. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 46. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 16. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

पेज दृश्यता एपीआई

ब्राउज़र सहायता

  • Chrome: 33. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 12. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 18. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 7. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

MediaDevices.getUserMedia()

ब्राउज़र सहायता

  • Chrome: 53. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 12. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 36. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 11. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

MediaDevices.getSupportedConstraints()

ब्राउज़र सहायता

  • Chrome: 53. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 12. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 44. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 11. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

MediaStreamTrack.applyConstraints()

ब्राउज़र सहायता

  • Chrome: 59. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 12. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 43. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 11. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

MediaStreamTrack.getCapabilities()

ब्राउज़र सहायता

  • Chrome: 59. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 12. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: समर्थित नहीं. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 11. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

MediaStreamTrack.getSettings()

ब्राउज़र सहायता

  • Chrome: 59. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 12. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 50. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 11. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

मददगार लिंक

स्वीकार की गई

इस लेख की समीक्षा जो मेडली और थॉमस स्टाइनर ने की है. Intel में रिजुब्राता भौमिक और ईरो हकीनन को उनके काम के लिए धन्यवाद और लागू करने के बारे में खास जानकारी देता है. Unस्प्लैश पर क्रिस्टिना @ wocintechchat.com की हीरो इमेज.