वेब ऐप से मोबाइल का कैमरा कैसे एक्सेस करें?

191

मोबाइलों के लिए मेरे वेब ऐप (देशी ऐप नहीं) में, मैं एक फोटो लेना चाहता हूं और इसे अपलोड करना चाहता हूं, लेकिन मैं एडोब फ्लैश का उपयोग नहीं करना चाहता। क्या इसे करने का कोई तरीका है?

html mobile camera

— 夏期劇場
स्रोत

2

"वेबपेज" का अर्थ है, इसे किसी भी प्रकार के क्लाइंट / डिवाइस से आसानी से एक्सेस किया जाना चाहिए। तो, क्या मुझे प्रतिबंध लगाना चाहिए?

— 夏 :

1

मुझे लगता है, आप हार्डवेयर कैमरा का उपयोग करना चाहते हैं, है ना?

— डेनिस ट्रब

हम्म .. वेबपेज से मोबाइल स्मार्ट फोन / आदि का "कैमरा"।

— 05 劇場

नमस्ते, यह एक विषय है जो मैं वर्तमान में अपनी परियोजनाओं के लिए अध्ययन कर रहा हूं।

— PWA आपको

260

IPhone iOS6 और Android ICS के बाद से, HTML5 में निम्नलिखित टैग है जो आपको अपने डिवाइस से चित्र लेने की अनुमति देता है:

 <input type="file" accept="image/*" capture="camera">

Capture कैमरा, कैमकॉर्डर और ऑडियो जैसे मूल्य ले सकते हैं।

मुझे लगता है कि यह टैग निश्चित रूप से iOS5 में काम नहीं करेगा, इसके बारे में निश्चित नहीं है।

— आशीष
स्रोत

32

यहाँ महान ट्यूटोरियल है: html5rocks.com/en/tutorials/getusermedia/intro

— मीका

2

यहाँ GetUserMedia की आवश्यकता नहीं है।

— रे निकोलस

मुझे एक "getUserMedia () इस डिवाइस द्वारा समर्थित नहीं है" - लेकिन मैं सफारी पर हूं और ios7 है - क्यों? - दान अभी संपादित करें

— Dan

10

मुझे लगता है कि शायद कोड <input type="file" accept="image/*;capture=camera">इसके बजाय होना चाहिए । एमडीएन के अनुसार, captureकिसी inputतत्व के लिए कोई विशेषता नहीं है।

— केनी एविट

9

दोनों capture="camera"(स्ट्रिंग) और पुराने accept="image/*;capture=camera"को 2012 में capture="capture"(बूलियन) के साथ बदल दिया गया है । विशेषता का उपयोग लाइब्रेरी से चयन करने के बजाय कैप्चर को बाध्य करने के लिए किया जाता है। HTML मीडिया कैप्चर के लिए युक्ति और सही सिंटैक्स

— ऑक्टेवियन नाइकू

36

आजकल कम से कम Android के साथ यह अपेक्षाकृत आसान है। बस सामान्य फ़ाइल इनपुट टैग का उपयोग करें और जब उपयोगकर्ता इसे क्लिक करता है तो फोन पूछेगा कि क्या उपयोगकर्ता फ़ाइल अपलोड करने के लिए कैमरा (या फ़ाइल प्रबंधक आदि) का उपयोग करना चाहता है। बस कैमरे के साथ एक तस्वीर ले लो और यह स्वचालित रूप से जोड़ा और अपलोड किया जाएगा।

IPhone के बारे में कोई विचार नहीं है। हो सकता है कि कोई उस पर प्रकाश डाल सके। EDIT: Iphone इसी तरह काम करता है।

इनपुट टैग का नमूना:

<input type="file" accept="image/*" capture="camera">

— Tuxie
स्रोत

क्या आप कई फ़ाइलों के लिए ऐसा कर सकते हैं: एकाधिक = "एकाधिक"

— parseguy

उदाहरण: <इनपुट प्रकार = "फ़ाइल" स्वीकार = "छवि / *" कई = "कई" पर कब्जा = "कैमरा">

— छद्म

multipleएंड्रॉइड और आईओएस दोनों पर काम करता है, एचटीएमएल मीडिया कैप्चर के लिए सही सिंटैक्स

— ऑक्टेवियन नाइकू

अन्य ऐप्पल डिवाइस के लिए निश्चित नहीं है, कम से कम यह समाधान अब आईपैड पर भी काम करता है।

— साइबरसनी

29

बस इसे अद्यतन करने के लिए, मानक अब है:

<input type="file" name="image" accept="image/*" capture="environment">

पर्यावरण-सामना (रियर) कैमरे का उपयोग करने के लिए, और

<input type="file" name="image" accept="image/*" capture="user">

उपयोगकर्ता के सामने (सामने) कैमरे के लिए। वीडियो का उपयोग करने के लिए, नाम में "छवि" के लिए "वीडियो" स्थानापन्न करें।

IOS 5.3, फर्मवेयर 760 पर चलने वाले iPhone 5c पर परीक्षण ठीक काम करता है।

https://www.w3.org/TR/html-media-capture/

— user3204365
स्रोत

23

आईओएस 6+ और एंड्रॉइड 2.2 पर सफारी और क्रोम HTML मीडिया कैप्चर का समर्थन करते हैं जो आपको अपने डिवाइस के कैमरे के साथ तस्वीरें लेने या मौजूदा डिवाइस का चयन करने की अनुमति देता है:

<input type="file" accept="image/*">

यहां बताया गया है कि यह iOS 10 पर कैसे काम करता है:

IOS10.3 पर Android 3.0+ और Safari भी उस captureविशेषता का समर्थन करता है, जिसका उपयोग सीधे कैमरे पर कूदने के लिए किया जाता है।

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

capture="camera"(स्ट्रिंग) और accept="image/*;capture=camera"(पैरामीटर) पुराने चश्मे का हिस्सा थे और उन्हें capture(बूलियन) W3C कैंडिडेट की सिफारिश से बदल दिया गया था ।

समर्थन प्रलेखन: यह 2013 ओ'रिली पुस्तक और मेरा परीक्षण

— ऑक्टेवियन नाइकू
स्रोत

एंड्रॉइड पर मेरा सिर्फ फोटो का चयन करने के लिए सीधे कूदता है, लेकिन मुझे कैमरे के लिए विकल्प नहीं देने पर भी जब मैंने कैप्चर = "कैमरा" सेट किया है .... पूरी तरह से अटक गया

— बेन्यामैन

@Benyaman captureइसके बजाय प्रयास करें capture="camera"। जिज्ञासु क्या डिवाइस और Android संस्करण।

— ऑक्टेवियन नाइकू

मैंने एंड्रॉइड 5.0 पर जाहिरा तौर पर फोनगैप को एचटीएमएल कैप्चर में बनाया है। इसलिए यह चीजों को कैप्चर नहीं कर सकता, कोई कैमकॉर्ड नहीं, कोई ऑडियो नहीं, कोई कैमरा नहीं। मुझे चारों ओर एक काम का निर्माण करना था।

— बेनीमान

5

ठीक है, देशी डिवाइस कैमरे तक पहुँचने के लिए एक नई HTML5 सुविधाएँ हैं - "getUserMedia API"

नोट: एचटीएमएल 5 एंड्रॉइड डिवाइस पर वेब पेज से फोटो कैप्चर को संभाल सकता है (कम से कम नवीनतम संस्करणों पर, हनीकॉम्ब ओएस द्वारा चलाया जाता है; लेकिन यह इसे आईफ़ोन पर नहीं बल्कि आईओएस 6 से संभाल सकता है)।

— लुई
स्रोत

ओह सॉरी कॉल सेट यूसरमीडिया एपीआई

— लुई

4

आप WEBRTC का उपयोग कर सकते हैं लेकिन दुर्भाग्य से यह सभी वेब ब्राउज़र द्वारा समर्थित नहीं है। यह कैसे पता चलता है जो ब्राह्मणों ने http://caniuse.com/stream का समर्थन किया है

और यह लिंक आपको एक विचार देता है कि आप इसे कैसे उपयोग कर सकते हैं (नमूना कोड)। http://www.html5rocks.com/en/tutorials/getusermedia/intro/

— माइकल सुल्ताना
स्रोत

2

WebRTC और getUserMediaओवरकिल है, <input type="file" accept="image/*">चाल चलेगा।

— ऑक्टेवियन नाइकू

4

ऐपमॉबी एचटीएमएल 5 एसडीके ने एक बार देशी डिवाइस की कार्यक्षमता का उपयोग करने का वादा किया था - कैमरे सहित - एक एचटीएमएल 5-आधारित ऐप से, लेकिन अब Google के स्वामित्व वाली नहीं है। इसके बजाय, इस पोस्ट में HTML5- आधारित उत्तर आज़माएँ ।

— डेव एवरिट
स्रोत

1

मुझे विश्वास नहीं है कि Google का AppMobi या उनके उत्पादों पर कोई स्वामित्व है।

— नकलीगुश्रीश्रीपवुड 1

आह - मेरी गलती, क्योंकि यह क्रोम वेब स्टोर पर है - Google संदर्भ हटा दिया गया। यहाँ असली भागीदार हैं: appmobi.com/?page_id=468

— डेव एवरिट

3

आप getUserMedia का उपयोग करना चाहते हैं कैमरे का ।

यह ट्यूटोरियल ब्राउज़र से डिवाइस कैमरा एक्सेस करने की मूल बातें बताता है: https://medium.com/@aBenjamin765/make-a-camera-web-app-tutorial-part-1-ec284af8dddf

नोट: यह ज्यादातर एंड्रॉइड डिवाइसों पर, और iOS में सफारी में ही काम करता है।

— हारून बेंजामिन
स्रोत

1

यह ध्यान दिया जाना चाहिए कि सुरक्षा सुविधाओं को लागू किया गया है, जिसके लिए या तो ऐप को स्थानीयहोस्ट के तहत स्थानीय रूप से चलाया जाना चाहिए, या काम के लिए एसएसएल के लिए SSL के माध्यम से।

मुझे यह पता चला जब उपलब्ध डेमो में से कई की कोशिश कर रहा था और जब वे काम नहीं करते थे, तो वे निराश हो गए थे! देखें: नई सुरक्षा प्रतिबंध

— एंथोनी ग्रिग्स
स्रोत

0

मुझे नहीं लगता कि आप कर सकते हैं - एक W3C मसौदा एपीआई है ऑडियो या वीडियो प्राप्त करने के लिए कर सकते हैं, लेकिन किसी भी प्रमुख मोबाइल ओएस पर अभी तक कोई कार्यान्वयन नहीं हुआ है।

~~दूसरा सबसे अच्छा~~ एकमात्र विकल्प फोनगैप का उपयोग करने के लिए डेनिस के सुझाव के साथ जाना है। इसका मतलब यह होगा कि आपको एक मूल ऐप बनाने और इसे मोबाइल ऐप स्टोर / बाज़ार में जोड़ने की आवश्यकता है।

— केविन
स्रोत

repost to repost - मैं देख रहा था कि क्या आपको एंड्रॉइड पर जर्सी क्लाइंट के साथ NPE अपवाद मिला है। अटक :(

— नेक्रोमन्ट

0

मैं बिना किसी अतिरिक्त तंत्र के वेब ब्राउज़र से मोबाइल फोन के कैमरे तक पहुंचने के किसी भी तरीके के बारे में नहीं जानता (यानी फ्लैश या कंटेनर के कुछ प्रकार जो हार्डवेयर एपीआई तक पहुंच की अनुमति देता है)

बाद के लिए PhoneGap पर एक नज़र डालें: http://docs.phonegap.com/phonegap_camera_camera.md.html

इसके साथ आपको कम से कम आईओएस और एंड्रॉइड-आधारित उपकरणों पर कैमरे का उपयोग करने में सक्षम होना चाहिए।

— डेनिस ट्रब
स्रोत

4

अभी भी यह आवश्यक है कि मोबाइल डिवाइस पर एक ऐप इंस्टॉल किया जाए, जो मुझे लगता है कि ओपी बचना चाहता है।

— माइकल पेट्रोत्ता

@MichaelPetrotta क्या आप एक बेहतर तरीका जानते हैं?

— डेनिस ट्रब

2

मुझे विश्वास नहीं हो रहा है कि ओपी क्या पूछ रहा है।

— माइकल पेट्रोत्ता

@MichaelPetrotta यही मुझे भी लगता है। और सबसे अच्छा तरीका मुझे लगता है कि PhoneGap होगा, क्योंकि यह iOS पर काम करता है (जो फ्लैश नहीं करता है)। अभी भी यह देशी है, सच है, लेकिन कम से कम एक वेब पेज से कैमरों को क्रॉस-प्लेटफॉर्म एक्सेस करने की अनुमति देता है।

— डेनिस ट्रब