2016-06-29 14 views
7

से एक तस्वीर लें I html5 पृष्ठ से एक छवि प्राप्त करने के कई तरीके पढ़ते हैं। मैं अपने जरूरतों के लिए अभी भी अनिश्चित क्या सबसे अच्छा है कर रहा हूँ:एचटीएमएल 5

  • ब्राउज़र और ओएस के लिए व्यापक समर्थन: कम से कम: क्रोम, फ़ायरफ़ॉक्स, एंड्रॉयड डिफ़ॉल्ट, सफारी
  • मैं वास्तविक समय अधिग्रहण की जरूरत नहीं है। उपयोगकर्ता प्रणाली कैमरा अनुप्रयोग का अनुरोध, एक तस्वीर लेने के लिए एक बटन दबाएँ चाहिए

कम से कम तीन समाधान हैं:

  • <input type="file" accept="image/*;capture=camera">
  • Navigator.getUserMedia() (यह पदावनत लगता है)
  • MediaDevices.getUserMedia() (यह प्रयोगात्मक लगता है)

वैसे भी, मुझे बहुत सारे एक्सपैम्प दिखाई देते हैं कैमरे को (w/ getUserMedia) में कैमरे को एम्बेड करने के लिए, इसलिए मुझे नहीं पता कि मैं केवल पहली विधि पर भरोसा कर सकता हूं या नहीं।

+2

getUserMedia को बहिष्कृत नहीं किया गया है, यह अभी नाम बदलकर 'navigator.mediaDevices.getUserMedia' में बदल गया है। यदि आप किसी फोन पर उच्च-रिज़ॉल्यूशन वाली फ़ोटो लेना चाहते हैं, तो # get के साथ जाएं, क्योंकि 'getUserMedia' वीडियो रिज़ॉल्यूशन एटीएम तक ही सीमित है। – jib

+0

ठीक है, धन्यवाद। मैं इस लिंक से उलझन में था: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getUserMedia मुझे समझ में नहीं आया कि यह सिर्फ नाम बदल गया है लेकिन यह वही कक्षा है! – Mark

+0

यह सफलता और विफलता कॉलबैक लेने के बजाए एक वादा करता है, लेकिन अन्यथा वही है। – jib

उत्तर

8

WebRTC getUserMedia API का उपयोग करते हुए सफारी से अलग सभी आधुनिक ब्राउज़रों कवर करने के लिए जा रहा है: http://caniuse.com/#feat=stream

Here एक उदाहरण पृष्ठ getUserMedia का उपयोग करता है (कोड का वर्णन एक page के लिंक के साथ) एक अभी भी तस्वीर लेने के लिए है। अधिकांश getUserMedia डेमो एक दृश्य कैनवास क्षेत्र में वीडियो स्ट्रीम दिखाते हैं, लेकिन इसकी आवश्यकता नहीं है। आप दृश्यमान कैनवास में वीडियो स्ट्रीम प्रदर्शित किए बिना getUserMedia का उपयोग कर एक छवि कैप्चर कर सकते हैं।

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

Media Capture API एक उम्मीदवार की सिफारिश है जिसका अर्थ यह है कि यह मानक बनने के अपने रास्ते पर है, हालांकि, मुझे वर्तमान डब्ल्यू 3 सी सिफारिश को लागू करने वाले किसी भी ब्राउज़र के बारे में पता नहीं है (इनपुट टैग में एक नंगे कैप्चर विशेषता का उपयोग करके)। वर्तमान में <input type="file" accept="image/*"> शैली केवल मोबाइल ब्राउज़र द्वारा समर्थित है।

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

+0

जहां तक ​​मैं समझता हूं getUserMedia API वेबपृष्ठ में कैमरा आउटपुट एम्बेड करने की अनुमति देता है। क्योंकि मुझे कुछ भी एम्बेड करने की आवश्यकता नहीं है, लेकिन अभी भी एक छवि के अधिग्रहण और प्रक्रिया (पृष्ठभूमि में), मुझे लगता है कि पहली विधि अभी भी बेहतर है। – Mark

+0

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

+0

ठीक है, हालांकि मेरा उपयोग केवल मोबाइल के लिए है, यह जानने के लायक है कि GetUserMedia को लाइव वीडियो दिखाने की आवश्यकता नहीं है। – Mark