अब कई ब्राउज़र, उपयोगकर्ता से वीडियो और ऑडियो इनपुट ऐक्सेस कर सकते हैं. हालांकि, ब्राउज़र के हिसाब से यह पूरी तरह से डाइनैमिक और इनलाइन अनुभव हो सकता है. इसके अलावा, इसे उपयोगकर्ता के डिवाइस पर मौजूद किसी दूसरे ऐप्लिकेशन को भी सौंपा जा सकता है.
आसानी से और धीरे-धीरे शुरू करें
सबसे आसान तरीका यह है कि उपयोगकर्ता से पहले से रिकॉर्ड की गई फ़ाइल मांगी जाए. ऐसा करने के लिए, एक आसान फ़ाइल इनपुट एलिमेंट बनाएं और 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
से अटैच करके, सर्वर पर अपलोड करें - कैनवस में फ़्रेम बनाएं और उन पर फ़िल्टर लागू करें
वीडियो डेटा का ऐक्सेस पाने के लिए, इनपुट एलिमेंट का तरीका हर जगह इस्तेमाल किया जाता है. हालांकि, यह सबसे कम पसंद किया जाने वाला विकल्प है. हम कैमरे का ऐक्सेस पाना चाहते हैं, ताकि सीधे पेज पर लोगों को बेहतर अनुभव दिया जा सके.
कैमरे को इंटरैक्टिव तरीके से ऐक्सेस करना
आधुनिक ब्राउज़र में कैमरे से सीधे तौर पर कनेक्ट करने की सुविधा होती है. इससे हमें वेब पेज के साथ पूरी तरह से इंटिग्रेट किए गए ऐसे अनुभव बनाने में मदद मिलती है जिनसे उपयोगकर्ता कभी ब्राउज़र से बाहर नहीं निकलता.
कैमरे का ऐक्सेस पाना
हम getUserMedia()
नाम के WebRTC स्पेसिफ़िकेशन में एपीआई का इस्तेमाल करके, सीधे कैमरे को ऐक्सेस कर सकते हैं. getUserMedia()
, उपयोगकर्ता से कनेक्ट किए गए माइक्रोफ़ोन और कैमरों को ऐक्सेस करने के लिए कहेगा.
अगर एपीआई काम करता है, तो वह एक Stream
दिखाएगा. इसमें कैमरे या माइक्रोफ़ोन का डेटा होगा. इसके बाद, हम इसे <video>
एलिमेंट से अटैच कर सकते हैं, WebRTC स्ट्रीम से अटैच कर सकते हैं या MediaRecorder
एपीआई का इस्तेमाल करके सेव कर सकते हैं.
कैमरे से डेटा पाने के लिए, हमने getUserMedia()
एपीआई को पास किए गए constraints ऑब्जेक्ट में video: true
सेट किया है
<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
को कॉल करते समय, उस डिवाइस का आईडी पास किया जा सकता है जिसका इस्तेमाल करना है.
navigator.mediaDevices.getUserMedia({
audio: true,
video: {
deviceId: devices[0].deviceId,
},
});
यह अपने-आप इतना काम का नहीं है. हम सिर्फ़ वीडियो का डेटा ले सकते हैं और उसे फिर से चला सकते हैं.
कैमरे से रॉ डेटा ऐक्सेस करना
कैमरे से रॉ वीडियो डेटा ऐक्सेस करने के लिए, हर फ़्रेम को <canvas>
में ड्रॉ किया जा सकता है और पिक्सल में सीधे बदलाव किया जा सकता है.
2D कैनवस के लिए, कैनवस में <video>
एलिमेंट का मौजूदा फ़्रेम खींचने के लिए, कॉन्टेक्स्ट के drawImage
तरीके का इस्तेमाल किया जा सकता है.
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
को कॉल करने के तुरंत बाद, ब्राउज़र उपयोगकर्ता को आपकी साइट को कैमरे का ऐक्सेस देने के लिए कहेगा.
उपयोगकर्ता को अपनी मशीन पर, बेहतर सुविधाओं वाले डिवाइसों का ऐक्सेस पाने के लिए प्रॉम्प्ट नहीं चाहिए. इसलिए, वे अक्सर इस अनुरोध को ब्लॉक कर देंगे. इसके अलावा, अगर उन्हें प्रॉम्प्ट का मतलब नहीं समझ आता है, तो वे उसे अनदेखा कर देंगे. सबसे सही तरीका यह है कि जब पहली बार ज़रूरत हो, तब ही कैमरे का ऐक्सेस मांगा जाए. उपयोगकर्ता से ऐक्सेस मिलने के बाद, आपसे फिर से ऐक्सेस मांगा नहीं जाएगा. हालांकि, अगर उपयोगकर्ता ऐक्सेस देने से मना कर देता है, तो आपके पास उपयोगकर्ता से अनुमति मांगने के लिए, फिर से ऐक्सेस पाने का विकल्प नहीं होगा.
आपके पास पहले से ऐक्सेस है या नहीं, यह देखने के लिए अनुमतियां एपीआई का इस्तेमाल करना
getUserMedia
एपीआई से आपको यह जानकारी नहीं मिलती कि आपके पास पहले से ही कैमरे का ऐक्सेस है या नहीं. इससे आपको एक समस्या का सामना करना पड़ता है. उपयोगकर्ता को कैमरे का ऐक्सेस देने के लिए, आपको एक अच्छा यूज़र इंटरफ़ेस (यूआई) उपलब्ध कराना होता है. इसके लिए, आपको कैमरे का ऐक्सेस मांगना पड़ता है.
कुछ ब्राउज़र में, Permission API का इस्तेमाल करके इस समस्या को हल किया जा सकता है. navigator.permission
एपीआई की मदद से, किसी खास एपीआई को ऐक्सेस करने की स्थिति के बारे में क्वेरी की जा सकती है. इसके लिए, आपको फिर से अनुरोध करने की ज़रूरत नहीं पड़ती.
यह जानने के लिए कि आपके पास उपयोगकर्ता के कैमरे का ऐक्सेस है या नहीं, क्वेरी के तरीके में {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 () {};
});