परिचय
ऑडियो/वीडियो कैप्चर "होली ग्रेल" रहा है लंबे समय से काम कर रहे हैं. कई सालों से हमें ब्राउज़र प्लगिन (फ़्लैश या Silverlight) कोई काम आसानी से नहीं किया जा सकता. चलिए, शुरू करें!
HTML5 बचाकर रखता है. यह स्पष्ट नहीं हो सकता है, लेकिन HTML5 के बढ़ने की वजह से इस वजह से, डिवाइस के हार्डवेयर की पहुंच बढ़ जाती है. जियोलोकेशन (जीपीएस), Orientation API (एक्सलरोमीटर), WebGL (GPU), Web Audio API (ऑडियो हार्डवेयर) इसके बेहतर उदाहरण हैं. ये सुविधाएं बेहद असरदार हैं. ये हाई लेवल के JavaScript API को दिखाते हैं, जो हार्डवेयर क्षमताओं के बारे में बात करते हैं.
इस ट्यूटोरियल में एक नए एपीआई, GetUserMedia के बारे में बताया गया है, जो वेब ऐप्लिकेशन इस्तेमाल करते हैं.
getUserMedia() का रास्ता
अगर आपको इसके इतिहास के बारे में नहीं पता है, तो हम getUserMedia() API तक पहुंचे हैं. यह एक दिलचस्प कहानी है.
"मीडिया कैप्चर API" के कई वैरिएंट हमारा सिस्टम लगातार बेहतर हो रहा है. कई लोगों ने वेब पर खास डिवाइसों को ऐक्सेस करने की ज़रूरत महसूस की थी, लेकिन जिसने सभी को और उनकी मां को एक साथ एक नई विशेषता बनाई. चीज़ें मिल गई इतना जटिल कि W3C ने आखिरकार एक कामकाजी ग्रुप बनाने का फ़ैसला लिया. उनका मकसद क्या है? पागलपन का एहसास जगाएं! डिवाइस एपीआई पॉलिसी (डीएपी) वर्किंग ग्रुप को कई प्रस्तावों को एक साथ लाने और इनके लिए स्टैंडर्ड तय करने का काम किया गया है.
मैं 2011 में जो कुछ हुआ उसके बारे में बताने की कोशिश करूंगा...
पहला राउंड: एचटीएमएल मीडिया कैप्चर
HTML मीडिया कैप्चर DAP का पहला
वेब पर मीडिया कैप्चर के लिए मानक तय करना. यह <input type="file"> को ओवरलोड करने पर काम करता है
और accept पैरामीटर के लिए नई वैल्यू जोड़ रहा है.
अगर आपको उपयोगकर्ताओं को वेबकैम से अपना स्नैपशॉट लेने की सुविधा देनी है,
capture=camera की मदद से ऐसा किया जा सकता है:
<input type="file" accept="image/*;capture=camera">
वीडियो या ऑडियो रिकॉर्ड करना मिलता-जुलता है:
<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">
अच्छा है न? मुझे खास तौर पर यह पसंद है कि यह फ़ाइल इनपुट का फिर से इस्तेमाल करता है. मतलब के हिसाब से,
तो यह समझना बहुत ज़रूरी है. जहां यह खास "एपीआई" कम समय में गिरने पर, रीयलटाइम इफ़ेक्ट इस्तेमाल किए जा सकते हैं
(उदाहरण के लिए, किसी <canvas> पर लाइव वेबकैम डेटा रेंडर करना और WebGL फ़िल्टर लागू करना).
HTML मीडिया कैप्चर आपको सिर्फ़ मीडिया फ़ाइल रिकॉर्ड करने या समय पर स्नैपशॉट लेने की अनुमति देता है.
सहायता:
- Android 3.0 ब्राउज़र - इसे सबसे पहले लागू किया जाता है. यह कैसे काम करता है, इसका तरीका जानने के लिए यह वीडियो देखें.
- Android के लिए Chrome (0.16)
- Firefox मोबाइल 10.0
- iOS6 Safari और Chrome (आंशिक समर्थन)
दूसरा राउंड: डिवाइस एलिमेंट
कई लोगों को लगा कि HTML मीडिया कैप्चर बहुत सीमित था, इसलिए एक नया
जो किसी भी तरह के (आने वाले समय में) डिवाइस पर काम करता है. इसमें कोई हैरानी की बात नहीं कि इस डिज़ाइन को
नए एलिमेंट के लिए, <device> एलिमेंट,
जो getUserMedia() का CANNOT TRANSLATE
Opera, शुरुआत में इसे लागू करने वाले शुरुआती ब्राउज़र में से एक था
वीडियो कैप्चर करने की प्रोसेस <device> एलिमेंट के हिसाब से होती है. इसके तुरंत बाद
(उसी दिन सटीक जानकारी दें),
WhatWG ने इस <device> टैग को अप-टू-डेट रखने के लिए रद्द करने का फ़ैसला किया. इस बार JavaScript API को
navigator.getUserMedia(). एक हफ़्ते बाद, Opera ने ऐसे नए बिल्ड रिलीज़ किए जिनमें
अपडेट की गई getUserMedia() स्पेसिफ़िकेशन के लिए सहायता. उस साल के आखिर में,
Microsoft ने IE9 के लिए लैब रिलीज़ करके, पार्टी में शामिल हुआ
नई खासियतों के साथ काम करता है.
<device> कुछ ऐसा दिखेगा:
<device type="media" onchange="update(this.data)"></device>
<video autoplay></video>
<script>
function update(stream) {
document.querySelector('video').src = stream.url;
}
</script>
सहायता:
माफ़ करें, रिलीज़ किए गए किसी भी ब्राउज़र में <device> शामिल नहीं है.
मेरे अनुमान के बारे में चिंता करने के लिए एक कम API :) <device> ने दो बेहतरीन काम किए
हालांकि, इसके लिए: 1.) यह सिमैंटिक था और 2.) सहायता
ऑडियो/वीडियो डिवाइसों के अलावा भी बहुत कुछ है.
साँस लें. यह कॉन्टेंट बहुत तेज़ी से काम करता है!
चरण 3: WebRTC
<device> एलिमेंट ने आखिरकार डोडो की जगह ले ली.
WebRTC (वेब रीयल टाइम कम्यूनिकेशन) की कोशिशों की वजह से, सही कैप्चर एपीआई को खोजने में तेज़ी आई. यह खास जानकारी W3C WebRTC वर्किंग ग्रुप की निगरानी में है. Google, Opera, Mozilla, और कुछ अन्य प्लैटफ़ॉर्म पर लागू किए गए हैं.
getUserMedia(), WebRTC से जुड़ा हुआ है, क्योंकि यह एपीआई के उस सेट का गेटवे है.
यह उपयोगकर्ता के कैमरे/माइक्रोफ़ोन की स्थानीय स्ट्रीम को ऐक्सेस करने के तरीके उपलब्ध कराता है.
सहायता:
getUserMedia(), Chrome 21, Opera 18, और Firefox 17 से काम कर रहा है.
शुरू करना
navigator.mediaDevices.getUserMedia() की मदद से, अब हम बिना किसी प्लगिन के वेबकैम और माइक्रोफ़ोन इनपुट का इस्तेमाल कर सकते हैं.
कैमरा ऐक्सेस करने के लिए, अब आपको कॉल करने की ज़रूरत है. ऐप्लिकेशन इंस्टॉल करने की ज़रूरत नहीं है. यह सीधे ब्राउज़र में चुनी जाती है. क्या आप अभी तक उत्साहित हैं?
सुविधा की पहचान
सुविधा का पता लगाने की सुविधा, navigator.mediaDevices.getUserMedia की मौजूदगी की सामान्य जांच है:
if (navigator.mediaDevices?.getUserMedia) {
// Good to go!
} else {
alert("navigator.mediaDevices.getUserMedia() is not supported");
}
इनपुट डिवाइस का ऐक्सेस पाना
वेबकैम या माइक्रोफ़ोन का इस्तेमाल करने के लिए, हमें अनुमति लेनी होगी.
navigator.mediaDevices.getUserMedia() का पहला पैरामीटर एक ऑब्जेक्ट है, जो जानकारी और
हर तरह के मीडिया के लिए ज़रूरी शर्तें. उदाहरण के लिए, अगर आपको वेबकैम का ऐक्सेस चाहिए, तो पहला पैरामीटर {video: true} होना चाहिए. माइक्रोफ़ोन और कैमरा, दोनों का इस्तेमाल करने के लिए,
पास {video: true, audio: true}:
<video autoplay></video>
<script>
navigator.mediaDevices
.getUserMedia({ video: true, audio: true })
.then((localMediaStream) => {
const video = document.querySelector("video");
video.srcObject = localMediaStream;
})
.catch((error) => {
console.log("Rejected!", error);
});
</script>
ठीक है। तो यहां क्या चल रहा है? मीडिया कैप्चर, नए HTML5 API का बेहतरीन उदाहरण है
काम करते हैं. यह हमारे अन्य HTML5 मित्रों, <audio> और <video> के साथ मिलकर काम करता है.
ध्यान दें कि हम src एट्रिब्यूट या <source> एलिमेंट शामिल नहीं कर रहे हैं
<video> एलिमेंट पर क्लिक करें. वीडियो का यूआरएल मीडिया फ़ाइल में फ़ीड करने के बजाय, हम सेटिंग कर रहे हैं
वेबकैम की जानकारी देने वाले LocalMediaStream ऑब्जेक्ट के लिए srcObject.
मैं <video> को भी autoplay बता रहा हूं, नहीं तो यह इस पर फ़्रीज़ हो जाएगा
पहला फ़्रेम. controls जोड़ने से आपकी उम्मीद के मुताबिक काम हो जाता है.
मीडिया कंस्ट्रेंट (रिज़ॉल्यूशन, ऊंचाई, चौड़ाई) सेट करना
getUserMedia() का पहला पैरामीटर, दिखाई जाने वाली मीडिया स्ट्रीम पर ज़्यादा ज़रूरी शर्तें (या कंस्ट्रेंट) बताने के लिए भी इस्तेमाल किया जा सकता है. उदाहरण के लिए, आपको वीडियो का सामान्य ऐक्सेस चाहिए (जैसे, {video: true}), यह बताने के बजाय कि आपको स्ट्रीम का ऐक्सेस देना है
एचडी होने में:
const hdConstraints = {
video: { width: { exact: 1280} , height: { exact: 720 } },
};
const stream = await navigator.mediaDevices.getUserMedia(hdConstraints);
const vgaConstraints = {
video: { width: { exact: 640} , height: { exact: 360 } },
};
const stream = await navigator.mediaDevices.getUserMedia(hdConstraints);
ज़्यादा कॉन्फ़िगरेशन के लिए, Constraints API देखें.
कोई मीडिया सोर्स चुनना
MediaDevices इंटरफ़ेस की enumerateDevices() तरीका, उपलब्ध मीडिया इनपुट और आउटपुट डिवाइसों की सूची का अनुरोध करता है. जैसे, माइक्रोफ़ोन, कैमरा, हेडसेट वगैरह. लौटाए गए प्रॉमिस को MediaDeviceInfo ऑब्जेक्ट के कलेक्शन की मदद से हल किया जाता है. इन ऑब्जेक्ट के बारे में डिवाइसों के बारे में जानकारी होती है.
इस उदाहरण में, पाए गए अंतिम माइक्रोफ़ोन और कैमरे को मीडिया स्ट्रीम का सोर्स:
if (!navigator.mediaDevices?.enumerateDevices) {
console.log("enumerateDevices() not supported.");
} else {
// List cameras and microphones.
navigator.mediaDevices
.enumerateDevices()
.then((devices) => {
let audioSource = null;
let videoSource = null;
devices.forEach((device) => {
if (device.kind === "audioinput") {
audioSource = device.deviceId;
} else if (device.kind === "videoinput") {
videoSource = device.deviceId;
}
});
sourceSelected(audioSource, videoSource);
})
.catch((err) => {
console.error(`${err.name}: ${err.message}`);
});
}
async function sourceSelected(audioSource, videoSource) {
const constraints = {
audio: { deviceId: audioSource },
video: { deviceId: videoSource },
};
const stream = await navigator.mediaDevices.getUserMedia(constraints);
}
सैम डटन का शानदार डेमो देखें ताकि उपयोगकर्ता मीडिया का सोर्स चुन सकें.
सुरक्षा
navigator.mediaDevices.getUserMedia() को कॉल करने पर, ब्राउज़र अनुमति वाला डायलॉग दिखाते हैं,
इससे उपयोगकर्ताओं को अपने कैमरे/माइक का ऐक्सेस देने या न देने का विकल्प मिलता है. उदाहरण के लिए, यहां
Chrome का अनुमति संवाद है:
फ़ॉलबैक उपलब्ध कराना
जिन उपयोगकर्ताओं के पास navigator.mediaDevices.getUserMedia() के लिए सहायता उपलब्ध नहीं है उनके लिए फ़ॉलबैक एक विकल्प है
मौजूदा वीडियो फ़ाइल में जोड़ें, अगर एपीआई काम नहीं करता है और/या किसी वजह से कॉल नहीं हो पाता है:
if (!navigator.mediaDevices?.getUserMedia) {
video.src = "fallbackvideo.webm";
} else {
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
video.srcObject = stream;
}