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

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:

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

3

Anda ingin menggunakan getUserMedia untuk mengakses kamera.

Tutorial ini menguraikan dasar-dasar mengakses kamera perangkat dari browser: https://medium.com/@aBenjamin765/make-a-camera-web-app-tutorial-part-1-ec284af8dddf

Catatan: Ini berfungsi pada sebagian besar perangkat Android, dan hanya di iOS di Safari.

— Aaron Benjamin
sumber

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