কীভাবে একটি ওয়েব অ্যাপ্লিকেশন থেকে একটি মোবাইলের ক্যামেরা অ্যাক্সেস করবেন?


191

মোবাইলগুলির জন্য আমার ওয়েব অ্যাপে (নেটিভ অ্যাপ্লিকেশন নয়) আমি একটি ফটো তুলতে এবং এটি আপলোড করতে চাই, তবে আমি অ্যাডোব ফ্ল্যাশ ব্যবহার করতে চাই না। এই কাজ করতে কোন উপায় আছে কি?


2
"ওয়েবপেজ" এর অর্থ এটি যে কোনও ধরণের ক্লায়েন্ট / ডিভাইস থেকে সহজেই অ্যাক্সেস করতে সক্ষম হওয়া উচিত। সুতরাং, আমি কি বিধিনিষেধ নির্ধারণ করব?
期 劇場

1
আমি ধরে নিলাম, আপনি হার্ডওয়্যার ক্যামেরাটি অ্যাক্সেস করতে চান, তাই না?
ডেনিস ট্রাব

হুম .. ওয়েবপৃষ্ঠা থেকে মোবাইল স্মার্ট ফোন / ইত্যাদি এর "ক্যামেরা"।
期 劇場

হাই, এটি এমন একটি বিষয় যা আমি বর্তমানে আমার নিজের প্রকল্পের জন্য অধ্যয়ন করছি। পিডব্লিউএগুলি আপনাকে আধুনিক ব্রাউজারগুলিতে নেটিভ ডিভাইস বৈশিষ্ট্যগুলি ব্যবহার করতে সক্ষম করে: ডেভেলপারস
google.com/web/updates/2016/12/imagecapture

উত্তর:


260

আইফোন আইওএস 6 এবং অ্যান্ড্রয়েড আইসিএসের পরে, এইচটিএমএল 5 এর নীচে নিম্নলিখিত ট্যাগ রয়েছে যা আপনাকে আপনার ডিভাইস থেকে ছবি তুলতে দেয়:

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

Capture ক্যামেরা, ক্যামকর্ডার এবং অডিওর মতো মান নিতে পারে।

আমি মনে করি এই ট্যাগটি অবশ্যই iOS5 এ কাজ করবে না, এটি সম্পর্কে নিশ্চিত নয়।


32
এখানে মহান টিউটোরিয়াল এর html5rocks.com/en/tutorials/getusermedia/intro
মীখা

2
GetUserMedia এখানে প্রয়োজন হয় না।
রায় নিকোলাস

আমি একটি "getUserMedia () এই ডিভাইস দ্বারা সমর্থিত নয়" পেয়েছি - তবে আমি সাফারিতে আছি এবং আইওএস 7 আছে - কেন? - ড্যান এখনই সম্পাদনা করুন
ড্যান

10
আমি মনে করি এর <input type="file" accept="image/*;capture=camera">পরিবর্তে কোডটি হওয়া উচিত । এমডিএন অনুসারে, captureকোনও inputউপাদানের কোনও বৈশিষ্ট্য নেই ।
কেনি এভিট

9
capture="camera"(স্ট্রিং) এবং বয়স্ক উভয়কেই accept="image/*;capture=camera"2012 সালে capture="capture"(বুলিয়ান) দিয়ে প্রতিস্থাপন করা হয়েছে । বৈশিষ্ট্যটি লাইব্রেরি থেকে নির্বাচন করার পরিবর্তে ক্যাপচার করার জন্য ব্যবহৃত হয়। দেখুন বৈশিষ্ট এবং এইচটিএমএল মিডিয়া ক্যাপচার জন্য সঠিক সিনট্যাক্স
Octavian Naicu

36

আজকাল কমপক্ষে অ্যান্ড্রয়েডের সাথে এটি তুলনামূলক সহজ। কেবলমাত্র সাধারণ ফাইল ইনপুট ট্যাগ ব্যবহার করুন এবং ব্যবহারকারী এটি ক্লিক করলে ফোনটি জিজ্ঞাসা করবে যে ব্যবহারকারী কোনও ফাইল আপলোড করতে ক্যামেরা (বা ফাইল পরিচালকদের ইত্যাদি) ব্যবহার করতে চায় কিনা। কেবল ক্যামেরা সহ একটি ছবি তুলুন এবং এটি স্বয়ংক্রিয়ভাবে যুক্ত এবং আপলোড হবে।

আইফোন সম্পর্কে কোন ধারণা। হতে পারে যে কেউ আলোকিত করতে পারেন। সম্পাদনা: আইফোন একইভাবে কাজ করে।

ইনপুট ট্যাগের নমুনা:

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

আপনি একাধিক ফাইলের জন্য এটি করতে পারেন যেমন: একাধিক = "একাধিক"
পার্সেগুয়ে

উদাহরণস্বরূপ: <ইনপুট টাইপ = "ফাইল" গ্রহণ = "চিত্র / *" একাধিক = "একাধিক" ক্যাপচার = "ক্যামেরা">
পার্সেগুয়ে

multipleঅ্যান্ড্রয়েড এবং আইওএস উভয় ক্ষেত্রেই কাজ করে, এইচটিএমএল মিডিয়া ক্যাপচারের জন্য সঠিক সিনট্যাক্স
অক্টোবিয়ান নাইকু

অন্যান্য অ্যাপল ডিভাইসের জন্য নিশ্চিত নয়, অন্তত এই সমাধানটি এখন আইপ্যাডেও কাজ করে।
cytsunny

29

কেবল এটি আপডেট করার জন্য, মান এখন:

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

পরিবেশ-মুখী (পিছন) ক্যামেরা অ্যাক্সেস করতে এবং

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

ব্যবহারকারী-মুখী (সামনের) ক্যামেরার জন্য। ভিডিও অ্যাক্সেস করতে, নামে "চিত্র" এর জন্য "ভিডিও" বিকল্প করুন।

আইফোন 5 সি-তে পরীক্ষিত, আইওএস 10.3.3, ফার্মওয়্যার 760 চলছে fine

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


23

আইওএস 6+ এবং অ্যান্ড্রয়েড 2.2+ এ সাফারি ও ক্রোম এইচটিএমএল মিডিয়া ক্যাপচারকে সমর্থন করে যা আপনাকে আপনার ডিভাইসের ক্যামেরা দিয়ে ছবি তুলতে বা একটি বিদ্যমান চিত্র নির্বাচন করতে দেয়:

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

এটি আইওএস 10 এ কীভাবে কাজ করে তা এখানে:

এখানে চিত্র বর্ণনা লিখুন

আইওএস 10.3 + এ অ্যান্ড্রয়েড 3.0+ এবং সাফারি captureএট্রিবিউটটিকে সমর্থন করে যা সরাসরি ক্যামেরায় ঝাঁপিয়ে পড়তে ব্যবহৃত হয়।

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

capture="camera"(স্ট্রিং) এবং accept="image/*;capture=camera"(প্যারামিটার) পুরানো চশমাগুলির অংশ ছিল captureএবং ডাব্লু 3 সি পরীক্ষার্থীর সুপারিশ দ্বারা (বুলিয়ান) দ্বারা প্রতিস্থাপিত হয়েছিল ।

সমর্থন ডকুমেন্টেশন: এই 2013 ও'রিলি বই এবং আমার পরীক্ষা


অ্যান্ড্রয়েডের উপর খনিগুলি সরাসরি ফটো নির্বাচন করতে লাফ দেয়, তবে আমি ক্যাপচার = "ক্যামেরা" সেট করেও আমাকে ক্যামেরার বিকল্প
দিচ্ছি না

@ বেনায়মন এর captureপরিবর্তে চেষ্টা করুন capture="camera"। কি ডিভাইস এবং অ্যান্ড্রয়েড সংস্করণ কৌতূহল।
অক্টাভিয়ান নাইকু

অ্যান্ড্রয়েড 5.০-তে আমি স্পষ্টতই ফোনগ্যাপে এইচটিএমএল ক্যাপচার তৈরি করেনি So সুতরাং এটি জিনিসগুলি, কোনও ক্যামেরকার্ড, কোনও অডিও, কোনও ক্যামেরা ক্যাপচার করতে পারে না। আমাকে চারপাশে একটি কাজ তৈরি করতে হয়েছিল।
বেনিয়ামান

5

ভাল, নেটিভ ডিভাইস ক্যামেরা অ্যাক্সেসের জন্য একটি নতুন এইচটিএমএল 5 বৈশিষ্ট্য রয়েছে - "গেট ইউজারমিডিয়া এপিআই"

দ্রষ্টব্য: এইচটিএমএল 5 অ্যান্ড্রয়েড ডিভাইসে কোনও ওয়েব পৃষ্ঠা থেকে ফটো ক্যাপচার পরিচালনা করতে পারে (হানিকম্ব ওএস দ্বারা চালিত কমপক্ষে সর্বশেষতম সংস্করণগুলিতে; তবে এটি আইফোনগুলিতে কিন্তু আইওএস 6 এ পরিচালনা করতে পারে না)।


ওহ দুঃখিত, কল সেটউজারমিডিয়া এপিআই
লুই

4

আপনি ডাব্লুইবিআরটিসি ব্যবহার করতে পারেন তবে দুর্ভাগ্যক্রমে এটি সমস্ত ওয়েব ব্রাউজার দ্বারা সমর্থিত নয়। ব্রাউজাররা এটি সমর্থন করার নীচে নীচের লিঙ্কটি রয়েছে: http://caniuse.com/stream B

এবং এই লিঙ্কটি আপনাকে কীভাবে এটি অ্যাক্সেস করতে পারে তার একটি ধারণা দেয় (নমুনা কোড)। http://www.html5rocks.com/en/tutorials/getusermedia/intro/


2
WebRTC এবং getUserMediaওভারকিল, <input type="file" accept="image/*">কৌশলটি করবে।
অষ্টাভিয়ান নাইকু

4

অ্যাপমোবি এইচটিএমএল 5 এসডিকে একবার এইচটিএমএল 5-ভিত্তিক অ্যাপ্লিকেশন থেকে দেশীয় ডিভাইস কার্যকারিতা - ক্যামেরা সহ - অ্যাক্সেসের প্রতিশ্রুতি দিয়েছিল, তবে এটি আর Google- এর মালিকানাধীন নয়। পরিবর্তে, এই পোস্টে এইচটিএমএল 5-ভিত্তিক উত্তরগুলি চেষ্টা করে দেখুন ।


1
আমি বিশ্বাস করি না অ্যাপমবি বা তাদের পণ্যগুলির উপরে গুগলের কোনও মালিকানা রয়েছে।
ভুয়াগুব্রূশথ্রিপউড

আহ - আমার ভুল, কারণ এটি ক্রোম ওয়েব দোকানে রয়েছে - গুগল রেফারেন্স সরানো হয়েছে। এখানে আসল অংশীদাররা রয়েছে: appmobi.com/?page_id=468
ডেভ এভারিট

3

আপনি getUserMedia ব্যবহার করতে চাইবেন ক্যামেরা অ্যাক্সেস ।

এই টিউটোরিয়ালটি ব্রাউজার থেকে একটি ডিভাইস ক্যামেরা অ্যাক্সেসের মূল বিষয়গুলি রূপরেখা দেয়: https://medium.com/@aBenjamin765/make-a-camera-web-app-tutorial-part-1-ec284af8dddf

দ্রষ্টব্য: এটি বেশিরভাগ অ্যান্ড্রয়েড ডিভাইসে এবং কেবল সাফারিতে আইওএস এ কাজ করে।


1

এটি লক্ষ করা উচিত যে সুরক্ষা বৈশিষ্ট্যগুলি প্রয়োগ করা হয়েছে যার জন্য অ্যাপ্লিকেশনটি স্থানীয়ভাবে স্থানীয়ভাবে হোস্টের অধীনে চালিত করা প্রয়োজন, অথবা এসএমএস-এর মাধ্যমে গেটউজারমিডিয়া () এর কাজ করা উচিত।

বেশ কয়েকটি ডেমো উপলভ্য করার চেষ্টা করার সময় আমি এটি আবিষ্কার করেছি এবং যখন তারা কাজ না করেছিল তখন হতাশ হয়ে পড়েছিল! দেখুন: নতুন সুরক্ষা বিধিনিষেধগুলি


0

আমি মনে করি না আপনি পারবেন - একটি ডাব্লু 3 সি খসড়া এপিআই রয়েছে অডিও বা ভিডিও পেতে , তবে প্রধান মোবাইল ওএসগুলির কোনওটিতে এখনও কোনও বাস্তবায়ন হয়নি।

দ্বিতীয় সেরা একমাত্র বিকল্প ডেনিসের ফোনগ্যাপ ব্যবহারের পরামর্শ নিয়ে যাওয়া with এর অর্থ হ'ল আপনাকে একটি নেটিভ অ্যাপ্লিকেশন তৈরি করতে হবে এবং এটি মোবাইল অ্যাপ স্টোর / মার্কেটপ্লেসে যুক্ত করতে হবে।


পুনরায় পোস্ট করার জন্য দুঃখিত - আমি অ্যান্ড্রয়েডে জার্সি ক্লায়েন্টের সাথে এনপিই ব্যতিক্রম পেয়েছিলাম কিনা তা সন্ধান করছিলাম। আটকে গেছে :(
নেক্রোমেন্সার

0

কিছু অতিরিক্ত প্রক্রিয়া ছাড়াই ওয়েব ব্রাউজার থেকে মোবাইল ফোনের ক্যামেরা অ্যাক্সেস করার কোনও উপায় আমি জানি না (যেমন ফ্ল্যাশ বা কোনও ধরণের ধারক যা হার্ডওয়্যার এপিআইতে অ্যাক্সেসের অনুমতি দেয়)

পরেরটির জন্য ফোনগ্যাপটি একবার দেখুন: http://docs.phonegap.com/ iPhonegap_camera_camera.md.html

এটির সাথে আপনার কমপক্ষে আইওএস এবং অ্যান্ড্রয়েড-ভিত্তিক ডিভাইসে ক্যামেরাটি অ্যাক্সেস করা উচিত।


4
তার জন্য এখনও মোবাইল ডিভাইসে একটি অ্যাপ্লিকেশন ইনস্টল করা দরকার যা আমি মনে করি ওপি এড়াতে চায়।
মাইকেল পেট্রোটা

@ মিশেলপেট্রোটা কি আরও ভাল উপায় জানেন?
ডেনিস ট্রাব

2
আমি বিশ্বাস করি না যে ওপি যা চেয়েছে তা সম্ভব হয়।
মাইকেল পেট্রোটা

@ মিশেলপেট্রোটা এটি আমারও মনে হয়। এবং আমি যেভাবে ভাবতে পারি তার সেরা উপায়টি ফোনগ্যাপ হবে, যেহেতু এটি iOS এ কাজ করে (যা ফ্ল্যাশ দেয় না)। এখনও এটি নেটিভ, সত্য, তবে একটি ওয়েব পৃষ্ঠা থেকে ক্যামেরায় কমপক্ষে কিছুটা ক্রস-প্ল্যাটফর্ম অ্যাক্সেসের অনুমতি দেয়।
ডেনিস ট্রাব
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.