उपयोगकर्ता का वीडियो रिकॉर्ड किया जा रहा है

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

आसान और धीरे-धीरे शुरुआत करें

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

<input type="file" accept="video/*" capture />

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

कई फ़ोन या टैबलेट में एक से ज़्यादा कैमरे होते हैं. अगर आपकी कोई प्राथमिकता है, तो capture एट्रिब्यूट को user पर सेट करें. ऐसा तब करें, जब आपको उपयोगकर्ता की तरफ़ वाला कैमरा चाहिए. अगर आपको बाहर की तरफ़ वाला कैमरा चाहिए, तो environment पर सेट करें.

<input type="file" accept="video/*" capture="user" />
<input type="file" accept="video/*" capture="environment" />

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

जब उपयोगकर्ता रिकॉर्डिंग पूरी कर लेता है और वेबसाइट पर वापस आ जाता है, तो आपको किसी तरह फ़ाइल का डेटा हासिल करना होगा. इनपुट एलिमेंट में onchange इवेंट अटैच करके और फिर इवेंट ऑब्जेक्ट की files प्रॉपर्टी को पढ़कर, तुरंत ऐक्सेस पाया जा सकता है.

<input type="file" accept="video/*" capture="camera" id="recorder" />
<video id="player" controls></video>
<script>
  var recorder = document.getElementById('recorder');
  var player = document.getElementById('player');

  recorder.addEventListener('change', function (e) {
    var file = e.target.files[0];
    // Do something with the video file.
    player.src = URL.createObjectURL(file);
  });
</script>

फ़ाइल का ऐक्सेस मिलने के बाद, उसमें अपनी पसंद के मुताबिक बदलाव किए जा सकते हैं. उदाहरण के लिए, आपके पास ये काम करने की सुविधा होती है:

• इसे सीधे <video> एलिमेंट से अटैच करें, ताकि इसे चलाया जा सके
• उपयोगकर्ता के डिवाइस पर डाउनलोड करना
• इसे किसी XMLHttpRequest में अटैच करके, सर्वर पर अपलोड करें
• फ़्रेम को कैनवस में ड्रॉ करना और उस पर फ़िल्टर लागू करना

वीडियो डेटा को ऐक्सेस करने के लिए, इनपुट एलिमेंट वाले तरीके का इस्तेमाल करना आम बात है. हालांकि, यह सबसे कम पसंद किया जाने वाला विकल्प है. हम कैमरे का ऐक्सेस पाना चाहते हैं, ताकि सीधे पेज पर ही बेहतर अनुभव दिया जा सके.

इंटरैक्टिव तरीके से कैमरे को ऐक्सेस करना

मॉडर्न ब्राउज़र, कैमरे को सीधे ऐक्सेस कर सकते हैं. इससे हमें ऐसे अनुभव बनाने में मदद मिलती है जो वेब पेज के साथ पूरी तरह से इंटिग्रेट होते हैं. साथ ही, उपयोगकर्ता को ब्राउज़र छोड़ने की ज़रूरत नहीं पड़ती.

कैमरे का ऐक्सेस पाना

हम WebRTC स्पेसिफ़िकेशन में मौजूद getUserMedia() नाम के एपीआई का इस्तेमाल करके, कैमरे को सीधे ऐक्सेस कर सकते हैं. getUserMedia(), उपयोगकर्ता से कनेक्ट किए गए माइक्रोफ़ोन और कैमरों को ऐक्सेस करने की अनुमति मांगेगा.

अगर एपीआई सही तरीके से काम करता है, तो यह Stream दिखाएगा. इसमें कैमरे या माइक्रोफ़ोन का डेटा शामिल होगा. इसके बाद, हम इसे <video> एलिमेंट या WebRTC स्ट्रीम से अटैच कर सकते हैं. इसके अलावा, हम इसे MediaRecorder एपीआई का इस्तेमाल करके सेव कर सकते हैं.

कैमरे से डेटा पाने के लिए, हमने video: true को constraints ऑब्जेक्ट में सेट किया है. इसे getUserMedia() एपीआई को पास किया जाता है

<video id="player" controls></video>
<script>
  var player = document.getElementById('player');

  var handleSuccess = function (stream) {
    player.srcObject = stream;
  };

  navigator.mediaDevices
    .getUserMedia({audio: true, video: true})
    .then(handleSuccess);
</script>

अगर आपको कोई खास कैमरा चुनना है, तो पहले उपलब्ध कैमरों की सूची देखें.

navigator.mediaDevices.enumerateDevices().then((devices) => {
  devices = devices.filter((d) => d.kind === 'videoinput');
});

इसके बाद, getUserMedia को कॉल करते समय, उस deviceId को पास किया जा सकता है जिसका आपको इस्तेमाल करना है.

navigator.mediaDevices.getUserMedia({
  audio: true,
  video: {
    deviceId: devices[0].deviceId,
  },
});

हालांकि, यह अपने-आप में ज़्यादा काम का नहीं है. हम सिर्फ़ वीडियो का डेटा लेकर उसे चला सकते हैं.

कैमरे से रॉ डेटा ऐक्सेस करना

कैमरे से रॉ वीडियो डेटा ऐक्सेस करने के लिए, हर फ़्रेम को <canvas> में ड्रॉ किया जा सकता है. साथ ही, पिक्सल में सीधे तौर पर बदलाव किया जा सकता है.

2D कैनवस के लिए, कॉन्टेक्स्ट के drawImage तरीके का इस्तेमाल करके, कैनवस में <video> एलिमेंट के मौजूदा फ़्रेम को ड्रॉ किया जा सकता है.

context.drawImage(myVideoElement, 0, 0);

WebGL कैनवस की मदद से, <video> एलिमेंट को टेक्सचर के सोर्स के तौर पर इस्तेमाल किया जा सकता है.

gl.texImage2D(
  gl.TEXTURE_2D,
  0,
  gl.RGBA,
  gl.RGBA,
  gl.UNSIGNED_BYTE,
  myVideoElement,
);

ध्यान दें कि दोनों ही मामलों में, चल रहे वीडियो के मौजूदा फ़्रेम का इस्तेमाल किया जाएगा. कई फ़्रेम प्रोसेस करने के लिए, आपको हर बार कैनवस पर वीडियो को फिर से ड्रॉ करना होगा.

इस बारे में ज़्यादा जानने के लिए, इमेज और वीडियो पर रीयल-टाइम इफ़ेक्ट लागू करने के बारे में हमारा लेख पढ़ें.

कैमरे से डेटा सेव करना

कैमरे से डेटा सेव करने का सबसे आसान तरीका, MediaRecorder एपीआई का इस्तेमाल करना है.

MediaRecorder एपीआई, getUserMedia से बनाई गई स्ट्रीम लेगा. इसके बाद, स्ट्रीम से डेटा को आपकी पसंद के डेस्टिनेशन पर सेव करेगा.

<a id="download">Download</a>
<button id="stop">Stop</button>
<script>
  let shouldStop = false;
  let stopped = false;
  const downloadLink = document.getElementById('download');
  const stopButton = document.getElementById('stop');

  stopButton.addEventListener('click', function() {
    shouldStop = true;
  })

  var handleSuccess = function(stream) {
    const options = {mimeType: 'video/webm'};
    const recordedChunks = [];
    const mediaRecorder = new MediaRecorder(stream, options);

    mediaRecorder.addEventListener('dataavailable', function(e) {
      if (e.data.size > 0) {
        recordedChunks.push(e.data);
      }

      if(shouldStop === true && stopped === false) {
        mediaRecorder.stop();
        stopped = true;
      }
    });

    mediaRecorder.addEventListener('stop', function() {
      downloadLink.href = URL.createObjectURL(new Blob(recordedChunks));
      downloadLink.download = 'acetest.webm';
    });

    mediaRecorder.start();
  };

  navigator.mediaDevices.getUserMedia({ audio: true, video: true })
      .then(handleSuccess);
</script>

हमारे मामले में, हम डेटा को सीधे एक कलेक्शन में सेव कर रहे हैं. इसे बाद में Blob में बदला जा सकता है. इसके बाद, इसका इस्तेमाल हमारे वेब सर्वर में या सीधे उपयोगकर्ता के डिवाइस के स्टोरेज में सेव करने के लिए किया जा सकता है.

कैमरे का इस्तेमाल ज़िम्मेदारी से करने की अनुमति मांगें

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

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

Permissions API का इस्तेमाल करके यह देखना कि आपके पास पहले से ऐक्सेस है या नहीं

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

कुछ ब्राउज़र में, Permission API का इस्तेमाल करके इस समस्या को हल किया जा सकता है. navigator.permission API की मदद से, किसी खास एपीआई को ऐक्सेस करने की सुविधा की स्थिति के बारे में क्वेरी की जा सकती है. इसके लिए, आपको फिर से प्रॉम्प्ट करने की ज़रूरत नहीं पड़ती.

अगर आपको यह पता करना है कि आपके पास उपयोगकर्ता के कैमरे का ऐक्सेस है या नहीं, तो क्वेरी के तरीके में {name: 'camera'} को पास करें. इससे, आपको इनमें से कोई एक जवाब मिलेगा:

• granted — उपयोगकर्ता ने आपको पहले कैमरे का ऐक्सेस दिया है;
• prompt — उपयोगकर्ता ने आपको ऐक्सेस नहीं दिया है. getUserMedia को कॉल करने पर, उसे ऐक्सेस देने के लिए कहा जाएगा;
• denied — सिस्टम या उपयोगकर्ता ने कैमरे का ऐक्सेस साफ़ तौर पर ब्लॉक कर दिया है. इसलिए, आपको इसका ऐक्सेस नहीं मिल पाएगा.

अब आपके पास यह देखने का विकल्प है कि आपको अपने यूज़र इंटरफ़ेस में बदलाव करने की ज़रूरत है या नहीं. इससे उपयोगकर्ता को ज़रूरी कार्रवाइयां करने में मदद मिलती है.

navigator.permissions.query({name: 'camera'}).then(function (result) {
  if (result.state == 'granted') {
  } else if (result.state == 'prompt') {
  } else if (result.state == 'denied') {
  }
  result.onchange = function () {};
});

सुझाव/राय दें या शिकायत करें