👫 🍍 🚴🏻 डिवाइस और ओरिएंटेशन इवेंट तत्वों का पहला कार्यान्वयन 👃 🍤 🖼️

दूसरे दिन हमने एंड्रॉइड सिस्टम के लिए दो html एलिमेंट्स, डिवाइस और ओरिएंटेशन इवेंट्स के लिए समर्थन के साथ एक प्रोटोटाइप ओपरा मोबाइल दिखाया, जो कि 3C द्वारा प्रस्तावित है।

हमारे पहले आंतरिक निर्माण में, वेब डेवलपर देशी html टूल का उपयोग करके उपयोगकर्ता कैमरा के साथ प्रदर्शन और इंटरैक्शन तक पहुंच सकते हैं।

उपकरण तत्व

डेवलपर्स वास्तविक समय में उपयोगकर्ता के कैमरे से वीडियो स्ट्रीम का अनुरोध कर सकते हैं। परिणामस्वरूप, यह वीडियो स्ट्रीम HTML वीडियो तत्व में डिवाइस तत्व की डेटा विशेषता का उपयोग करके किसी भी वेब पेज पर प्रदर्शित की जा सकती है।

निम्नलिखित सरल उदाहरण एक HTML डिवाइस तत्व के हमारे कार्यान्वयन को प्रदर्शित करता है जिसका उपयोग वेब पेज पर वेब कैमरा वीडियो स्ट्रीम प्रदर्शित करने के लिए किया जा सकता है:

<!DOCTYPE html> <h1>Simple web camera display demo</h1> <device type="media"/> <video autoplay></video> <script type="text/javascript"> var device = document.getElementsByTagName('device')[0], video = document.getElementsByTagName('video')[0]; device.addEventListener('change', function() { video.src = device.data; }, true); </script>

यह कोड निम्नलिखित प्रदर्शित करेगा

हमारा कार्यान्वयन।

फिलहाल, पेज लोड होने पर या जब स्क्रिप्ट में डायनेमिक HTML डिवाइस एलिमेंट बनाया जाता है और पेज पर उपयोग किया जाता है, तो एलिमेंट का चेंज ईवेंट चालू हो जाता है। भविष्य में हम उपयोगकर्ता के साथ बातचीत करने के लिए विभिन्न विकल्पों पर विचार करना चाहते हैं, यह आवश्यक है ताकि उपयोगकर्ता सेटिंग्स में अपने वेबकैम वेब पेज तक पहुंच की अनुमति दे या अस्वीकार कर सके। इस कार्यक्षमता की कमी के कारण, हमने html कैनवास तत्व के माध्यम से किसी भी पिक्सेल डेटा स्ट्रीम तक पहुंच को अक्षम करने का निर्णय लिया।

ऊपर वर्णित सीमाओं के अलावा, यह ध्यान दिया जाना चाहिए कि हमने स्ट्रीम इंटरफ़ेस को सरल किया है कि हमने उन सभी तरीकों और विशेषताओं को लागू नहीं किया है जो इसे पेश किया था। ऐसा करने से, हम अभी भी यूआरआई खोलने की आवश्यकता के बिना डिवाइस तत्व की बुनियादी कार्यक्षमता प्रदान करने में सक्षम थे। जैसा कि ऊपर दिखाया गया है, स्ट्रीम ऑब्जेक्ट को वीडियो तत्व के src विशेषता में सीधे निर्दिष्ट किया जाना चाहिए। जब वीडियो तत्व का src विशेषता असाइन किया जाता है, तो स्ट्रीम ऑब्जेक्ट और इसके गुण असमर्थ होने के बावजूद, रिज़र्व के लिए अनुरोध करेंगे: streaml URI।

जब हम डिवाइस के साथ प्रयोग कर रहे थे , हमने इस HTML तत्व का उपयोग करके कई समस्याओं की पहचान की। यद्यपि इस असेंबली में हमारे पहले कार्यान्वयन में डिवाइस तत्व का अपना इंटरफ़ेस नहीं है, फिर भी तत्व डिज़ाइन के लिए उपयोगकर्ता इंटरफ़ेस घटकों की आवश्यकता होती है जिसे वेब पेज में डाला जाएगा ताकि उपयोगकर्ता अपने उपकरणों तक पहुंच की अनुमति दे सके या अस्वीकार कर सके। फार्म तत्वों के साथ अनुभव से, हम जानते हैं कि यह डिजाइनरों के लिए सबसे अच्छा विकल्प नहीं होगा, क्योंकि वे नियंत्रण के डिजाइन में सीमित होंगे। हमारा मानना है कि सबसे अच्छा विकल्प यह होगा कि उपयोगकर्ताओं को स्वयं उपयोगकर्ता इंटरफेस बनाने और समान कार्यक्षमता के साथ आवश्यक एपीआई प्रदान करने की अनुमति दी जाए। इसलिए, हम स्वागत करते हैं और WHATWG के HTML प्रोजेक्ट में प्रस्तुत नवीनतम परिवर्तनों के साथ प्रयोग करना जारी रखेंगे।

ओरिएंटेशन इवेंट

यह कम्पास बनाने के लिए अभिविन्यास घटनाओं का उपयोग करने का एक सरल उदाहरण है।

 <!DOCTYPE html> <h1>Simple compass demo</h1> <canvas id="arrow" width="480" height="480"></canvas> <p id='orient'></p> <script type="text/javascript"> window.addEventListener('deviceorientation', function(evt) { var arrow = document.getElementById('arrow'); var ctx = arrow.getContext('2d'); ctx.clearRect(0,0,480,480); alpha = -Math.PI *(evt.alpha/180.0); var x1 = 240 + Math.round(240.0 * Math.sin(alpha)); var y1 = 240 - Math.round(240.0 * Math.cos(alpha)); var x2 = 240 + Math.round(10.0 * Math.sin(alpha - Math.PI/2)); var y2 = 240 - Math.round(10.0 * Math.cos(alpha - Math.PI/2)); var x3 = 240 + Math.round(10.0 * Math.sin(alpha + Math.PI/2)); var y3 = 240 - Math.round(10.0 * Math.cos(alpha + Math.PI/2)); ctx.beginPath(); ctx.moveTo(x1,y1); ctx.lineTo(x2,y2); ctx.lineTo(x3,y3); ctx.closePath(); ctx.fill(); var orient = document.getElementById('orient'); orient.innerHTML = "(" + evt.alpha + ", " + evt.beta + ", " + evt.gamma + ")"; }, true); </script>

यह कोड निम्नलिखित प्रदर्शित करेगा

योजनाओं

हम ब्राउज़र से उपयोगकर्ता के कैमरा और माइक्रोफ़ोन तक पहुंच के लिए वेब मानकों के व्यापक समर्थन से जुड़ी लंबी यात्रा की शुरुआत में हैं। निकट भविष्य में, हम इन तकनीकों से संबंधित अपडेट विकसित और कार्यान्वित करना जारी रखने की योजना बना रहे हैं।

हम योजना बना रहे हैं :

डेवलपर्स के लिए सार्वजनिक एंड्रॉइड बिल्ड रिलीज़ करें।
अन्य प्रमुख मोबाइल और डेस्कटॉप सिस्टम के लिए समर्थन जोड़ें।
मानकों से संबंधित हर चीज में सक्रिय रूप से भाग लेते रहें ताकि यह कार्यक्षमता पूरे वेब और सभी ब्राउज़रों में प्रदान की जा सके।
माइक्रोफ़ोन का समर्थन करें और ऑडियो तत्व में ध्वनि प्रवाह के उपयोग की अनुमति दें।
मोबाइल और डेस्कटॉप दोनों प्रणालियों के लिए एक उपयोगकर्ता इंटरफ़ेस बनाएँ, जो वैकल्पिक रूप से आपके वेबकैम वेब पेज तक पहुंच को सक्षम या अक्षम करेगा।
खुली जावास्क्रिप्ट एपीआई या एक HTML डिवाइस के एक तत्व के रूप में एक कस्टम वेब कैमरा के लिए अधिकृत पहुँच के साथ प्रयोग।
वेब पर वेब कैमरा और माइक्रोफ़ोन स्ट्रीमिंग डेटा प्रदान करने के लिए W3C RTC-Web गतिविधि में सक्रिय रूप से भाग लें।
अंत उपयोगकर्ताओं के लिए सुरक्षित तरीके से (उदाहरण के लिए, फ़ाइल सिस्टम बढ़ते) स्थानीय उपकरणों तक अन्य प्रकार की पहुंच खोलने के साथ प्रयोग करने के लिए।

हमारा वर्तमान प्रोटोटाइप वेबकेम एक्सेस करने की एक उत्कृष्ट विधि को प्रदर्शित करता है, हालांकि निश्चित रूप से उपकरण के फ़ंक्शंस (कम से कम ओरिएंटेशन इवेंट्स) तक पहुंचने के लिए उपयोग किए जाने वाले तरीके अभी भी वेब मानकों द्वारा अनुमोदित होने से पहले बदल जाएंगे।

जल्द ही विधानसभा बाहर होने वाली है।
कृपया अपनी राय व्यक्त करने और टिप्पणी छोड़ने के लिए मत भूलना!

डिवाइस और ओरिएंटेशन इवेंट तत्वों का पहला कार्यान्वयन

More articles: