Bagaimana cara mengakses kamera ponsel dari aplikasi web?

191

Di aplikasi web saya (bukan aplikasi asli) untuk ponsel, saya ingin mengambil foto dan mengunggahnya, tetapi saya tidak ingin menggunakan Adobe Flash. Apakah ada cara untuk melakukan ini?

html mobile camera 夏 期 劇場
sumber
2
"Laman web" berarti, ia harus dapat diakses dengan mudah dari segala jenis klien / perangkat. Jadi, haruskah saya menetapkan batasan?
夏 期 劇場
1
Saya berasumsi, Anda ingin mengakses kamera perangkat keras, kan?
Dennis Traub
Hmm .. "Kamera" dari Ponsel Pintar Seluler / dll. Dari halaman web.
夏 期 劇場
Hai, ini adalah subjek yang sedang saya pelajari untuk proyek saya sendiri. PWA memungkinkan Anda untuk menggunakan fitur perangkat asli di browser modern: developers.google.com/web/updates/2016/12/imagecapture
palmaone

Jawaban:

260

Di iPhone iOS6 dan dari Android ICS dan seterusnya, HTML5 memiliki tag berikut yang memungkinkan Anda mengambil gambar dari perangkat Anda:

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

Capture dapat mengambil nilai seperti kamera, camcorder dan audio.

Saya pikir tag ini pasti tidak akan berfungsi di iOS5, tidak yakin tentang hal itu.

Ashish
sumber
32
Inilah tutorial yang bagus: html5rocks.com/en/tutorials/getusermedia/intro
Micah
2
GetUserMedia tidak diperlukan di sini.
Ray Nicholus
Saya mendapatkan "getUserMedia () yang tidak didukung oleh perangkat ini" - tetapi saya menggunakan safari dan memiliki ios7 - mengapa? - Dan baru saja mengedit
Dan
10
Saya pikir mungkin kode yang seharusnya <input type="file" accept="image/*;capture=camera">. Menurut MDN, tidak ada captureatribut untuk inputelemen.
Kenny Evitt
9
Baik capture="camera"(String) dan yang lebih lama accept="image/*;capture=camera"telah diganti pada tahun 2012 dengan capture="capture"(Boolean). Atribut ini digunakan untuk memaksa pengambilan alih-alih memilih dari perpustakaan. Lihat spesifikasi dan Sintaks yang Benar untuk Tangkapan Media HTML
Oktavianus Naicu
36

Setidaknya saat ini dengan android relatif mudah. Cukup gunakan tag input file normal dan ketika pengguna mengkliknya ponsel akan bertanya apakah pengguna ingin menggunakan kamera (atau manajer file dll.) Untuk mengunggah file. Ambil saja foto dengan kamera dan secara otomatis akan ditambahkan dan diunggah.

Tidak tahu tentang iphone. Mungkin seseorang bisa mengetahui hal itu. EDIT: Iphone bekerja dengan cara yang sama.

Contoh dari tag input:

<input type="file" accept="image/*" capture="camera">
Tuxie
sumber
Anda dapat melakukan ini untuk banyak file seperti: multiple = "multiple"
parseguy
contoh: <input type = "file" accept = "image / *" multiple = "multiple" capture = "camera">
parseguy
multipleberfungsi baik di Android dan iOS, lihat Sintaks yang Benar untuk
Pengambilan
Tidak yakin untuk perangkat apple lain, setidaknya solusi ini juga berfungsi di iPad sekarang.
cytsunny
29

Untuk memperbarui ini, standarnya sekarang adalah:

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

untuk mengakses kamera (belakang) yang menghadap lingkungan, dan 

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

untuk kamera (depan) yang menghadap pengguna. Untuk mengakses video, gantikan "video" dengan "image" dalam nama.

Diuji pada iPhone 5c, menjalankan iOS 10.3.3, firmware 760, berfungsi dengan baik.

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

pengguna3204365
sumber
23

Safari & Chrome di iOS 6+ dan Android 2.2+ mendukung HTML Media Capture yang memungkinkan Anda mengambil gambar dengan kamera perangkat Anda atau memilih yang sudah ada:

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

Begini cara kerjanya di iOS 10:

masukkan deskripsi gambar di sini

Android 3.0+ dan Safari di iOS10.3 + juga mendukung captureatribut yang digunakan untuk melompat langsung ke kamera.

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

capture="camera"(String) dan accept="image/*;capture=camera"(Parameter) adalah bagian dari spesifikasi lama dan digantikan oleh capture(Boolean) Rekomendasi Kandidat W3C.

Dokumentasi dukungan: buku O'Reilly 2013 ini dan pengujian saya

Oktavian Naicu
sumber
Milik saya di Android hanya melompat langsung ke Memilih foto, tetapi tidak memberi saya pilihan untuk Kamera bahkan ketika saya telah mengatur capture = "camera" .... benar-benar macet
Benyaman
@Benyaman Cobalah dengan capturebukan capture="camera". Ingin tahu apa perangkat & versi Android.
Octavian Naicu
Ya, pada Android 5.0 ternyata Phonegap tidak memiliki tangkapan HTML bawaan. Jadi tidak dapat menangkap hal-hal, tidak ada perekam video, tidak ada audio, tidak ada kamera. Saya harus membangun pekerjaan di sekitar.
Benyaman
5

baik, ada fitur HTML5 baru untuk mengakses kamera perangkat asli - "getUserMedia API"

CATATAN: HTML5 dapat menangani pengambilan foto dari halaman web di perangkat Android (setidaknya pada versi terbaru, dijalankan oleh OS Honeycomb; tetapi tidak dapat mengatasinya di iPhone kecuali iOS 6).

Louis
sumber
oh maaf panggil setUserMedia API
Louis
4

Anda dapat menggunakan WEBRTC tetapi sayangnya itu tidak didukung oleh semua browser web. DI BAWAH INI ADALAH Tautan UNTUK MENUNJUKKAN YANG BROWSER mendukungnya http://caniuse.com/stream

Dan tautan ini memberi Anda gambaran tentang bagaimana Anda dapat mengaksesnya (kode sampel). http://www.html5rocks.com/en/tutorials/getusermedia/intro/

Michael Sultana
sumber
2
WebRTC dan getUserMediaberlebihan, <input type="file" accept="image/*">akan melakukan trik.
Oktavianus Naicu
4

AppMobi HTML5 SDK pernah menjanjikan akses ke fungsionalitas perangkat asli - termasuk kamera - dari aplikasi berbasis HTML5, tetapi tidak lagi milik Google. Alih-alih, coba jawaban berbasis HTML5 di pos ini .

Dave Everitt
sumber
1
Saya tidak percaya Google memiliki kepemilikan atas AppMobi atau produk mereka.
fakeguybrushthreepwood
Ah - kesalahan saya, karena ada di toko web Chrome - referensi Google dihapus. Berikut adalah mitra nyata: appmobi.com/?page_id=468
Dave Everitt
1

Perlu dicatat bahwa fitur keamanan telah diterapkan yang mengharuskan aplikasi dijalankan secara lokal di bawah localhost, atau melalui SSL agar GetUserMedia () berfungsi.

Saya menemukan ini ketika mencoba beberapa demo yang tersedia dan kecewa ketika mereka tidak bekerja! Lihat: Pembatasan Keamanan Baru

Anthony Griggs
sumber
0

Saya rasa Anda tidak bisa - ada draft API W3C untuk mendapatkan audio atau video, tetapi belum ada implementasi pada salah satu OS seluler utama.

Terbaik kedua Satu-satunya pilihan adalah mengikuti saran Dennis untuk menggunakan PhoneGap. Ini berarti Anda harus membuat aplikasi asli dan menambahkannya ke toko aplikasi / pasar seluler.

Kevin
sumber
maaf untuk memposting ulang - saya ingin melihat apakah Anda berhasil melewati pengecualian NPE dengan klien jersey di android. terjebak :(
necromancer
0

Saya tidak tahu cara apa pun untuk mengakses kamera ponsel dari browser web tanpa mekanisme tambahan (mis. Flash atau beberapa jenis wadah yang memungkinkan akses ke API perangkat keras)

Untuk yang terakhir lihat di PhoneGap: http://docs.phonegap.com/phonegap_camera_camera.md.html

Dengan ini, Anda harus dapat mengakses kamera setidaknya di perangkat berbasis iOS dan Android.

Dennis Traub
sumber
4
Itu masih mengharuskan aplikasi diinstal pada perangkat seluler, yang menurut saya ingin dihindari OP.
Michael Petrotta
@MichaelPetrotta apakah Anda tahu cara yang lebih baik?
Dennis Traub
2
Saya tidak percaya apa yang diminta OP itu mungkin.
Michael Petrotta
@MichaelPetrotta itulah yang saya pikirkan juga. Dan cara terbaik yang bisa saya pikirkan adalah PhoneGap, karena itu berfungsi di iOS (yang Flash tidak). Masih asli, benar, tetapi memungkinkan setidaknya sedikit akses lintas platform ke kamera dari halaman web.
Dennis Traub