ब्राउज़र के माध्यम से कैमरे का उपयोग

150

हम मोबाइल के लिए एक एचटीएमएल 5 वेबसाइट बना रहे हैं और एक मूल ऐप के बिना वेब ब्राउज़र के माध्यम से कैमरा एक्सेस प्राप्त करने की आवश्यकता है। हमें iOS में यह काम करने में परेशानी हो रही है। क्या किसी को इसके समाधान के बारे में पता है?

ios html camera

— जूलिया
स्रोत

124

आप यह कोशिश कर सकते हैं:

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

लेकिन यह काम करने के लिए iOS 6+ होना चाहिए । यह आपको एक तस्वीर लेने या अपने एल्बम से एक अपलोड करने के लिए चुनने के लिए एक अच्छा संवाद देगा

Screenhot

एक उदाहरण यहां पाया जा सकता है: PhoneGap के बिना कैमरा / चित्र डेटा कैप्चर करना

— Xeroxoid
स्रोत

5

यह Android पर भी भयानक है!

— मैट

1

सर्वर पर अपलोड करने के लिए अच्छा डेमो। किसी को पता है कि डिवाइस पर स्थानीय एल्बम में तस्वीर को बचाने के लिए इसे कैसे संशोधित किया जाए?

— K.Niemczyk

2

एकमात्र समस्या यह है कि कम से कम iPhone (ios 7.0.4) पर कम से कम यह एक अस्थायी छवि बनाता है जिसका नाम हमेशा होता है 'image.jpg'। इसलिए यदि आप एक ही रूप में कुछ चित्र अपलोड करते हैं, तो वे एक ही नाम के कारण एक-दूसरे को ओवरराइट करते हैं जब तक कि आप उनका नाम बदलने के लिए कुछ न करें, सावधान रहें!

— परिवर्तन

@ K.Niemczyk: क्या आपने कभी इसका पता लगाया है? यदि हां, तो मुझे समाधान में दिलचस्पी होगी। मुझे यह मिला: dev.w3.org/2009/dap/camera (स्थानीय भंडारण के लिए 6-7 उदाहरण देखें)

— lamarant

1

प्रतिभाशाली। यहाँ किसी को भी इस कोड को अपने डिवाइस पर एक परीक्षण चलाने देना चाहते हैं के लिए एक बेला है।

— साइमन ईस्ट

33

2015 तक, यह अब सिर्फ काम करता है ।

<input type="file">

यह किसी भी फाइल के अपलोड के लिए उपयोगकर्ता से पूछेगा। IOS 8.x पर यह एक कैमरा वीडियो, कैमरा फोटो या फोटो लाइब्रेरी से एक फोटो / वीडियो हो सकता है।

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

यह ऊपर की तरह है, लेकिन केवल कैमरे या लाइब्रेरी से फ़ोटो पर अपलोड को सीमित करता है , कोई वीडियो नहीं।

— साइमन पूर्व
स्रोत

1

क्या फोटो लाइब्रेरी से फाइल चुनने से उपयोगकर्ताओं को प्रतिबंधित करने का कोई तरीका है? मैं केवल एक नई ली गई छवि को स्वीकार करना चाहता हूं।

— डेरिल

@Daryl iOS पर नहीं। एंड्रॉइड उस captureविशेषता का समर्थन करता है जो बस ऐसा करता है। HTML मीडिया कैप्चर के लिए सही सिंटैक्स

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

उपयोगकर्ता द्वारा इस पर क्लिक न करने के कुछ समय बाद मैं इसे टेक फोटो या वीडियो और फोटो लाइब्रेरी पॉपअप बंद कर दूंगा।

— प्रीतीश

ऐसा लगता है कि वीडियो फ़ंक्शंस कहीं नहीं हैं?

— Martian2049

25

IOS6 में, Apple <input type="file">टैग के माध्यम से इसका समर्थन करता है । मुझे Apple के डेवलपर दस्तावेज़ में एक उपयोगी लिंक नहीं मिला, लेकिन यहां एक उदाहरण है ।

यह ओवरले जैसा दिखता है और अधिक उन्नत कार्यक्षमता अभी तक उपलब्ध नहीं है, लेकिन यह बहुत सारे उपयोग के मामलों के लिए काम करना चाहिए।

EDIT: w3c का एक अनुमान है कि iOS6 Safari एक सबसेट को लागू करता है। captureविशेषता विशेष रूप से याद आ रही है।

— user295691
स्रोत

10

मुझे लगता है कि यह काम कर रहा है। वीडियो या ऑडियो रिकॉर्ड करना;

<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">

या (नई विधि)

<device type="media" onchange="update(this.data)"></device>
<video autoplay></video>
<script>
  function update(stream) {
    document.querySelector('video').src = stream.url;
  }
</script>

यदि यह नहीं है, तो शायद ios6 पर काम करेगा, उपयोगकर्ता मीडिया को प्राप्त करने पर अधिक विवरण मिल सकता है

— siniradam
स्रोत

4

पीआईसीयूपी एप्लिकेशन एक HTML5 पेज से चित्र लें और उन्हें अपने सर्वर पर अपलोड करने के लिए एक तरीका है। इसे सर्वर पर कुछ अतिरिक्त प्रोग्रामिंग की आवश्यकता होती है, लेकिन PhoneGap के अलावा, मुझे दूसरा रास्ता नहीं मिला है।

— rakensi
स्रोत

5

IOS8 में आपको अब Picup की आवश्यकता नहीं है। HTML5 <इनपुट प्रकार = "फ़ाइल" स्वीकार = "छवि / *" आईडी = "कैप्चर" कैप्चर = "कैमरा"> का समर्थन करता है। सफारी और क्रोम में सत्यापित।

— राकेंसी

1

यह प्रश्न पहले से ही कुछ साल पुराना है, लेकिन उस समय में कुछ अतिरिक्त संभावनाएं विकसित हुई हैं, जैसे सीधे कैमरे तक पहुंचना, पूर्वावलोकन प्रदर्शित करना और स्नैपशॉट कैप्चर करना (जैसे QR कोड स्कैनिंग के लिए)।

Google डेवलपर्स का यह लेख सभी को (-?) तरीके बताता है कि वेब एप्लिकेशन में इमेज / कैमरा डेटा कैसे प्राप्त किया जाए, "काम हर जगह" (यहां तक कि डेस्कटॉप ब्राउजर में भी) "केवल आधुनिक, अप-टू-वर्क पर -डिवाइट मोबाइल डिवाइस विथ कैमरा ”। साथ ही कई उपयोगी टिप्स।

समझाया तरीके:

एक URL के लिए पूछें
फ़ाइल इनपुट (यहां अधिकांश अन्य पदों द्वारा कवर)
ड्रैग एंड ड्रॉप (डेस्कटॉप ब्राउज़र के लिए उपयोगी)
क्लिपबोर्ड से चिपकाएं
अंतःक्रियात्मक रूप से कैमरे तक पहुंचें (आवश्यक है यदि एप्लिकेशन को "कोड", जैसे कि क्यूआर कोड्स पर तुरंत प्रतिक्रिया देने की आवश्यकता हो)

— क्रिस्टोफ
स्रोत