Akses kamera melalui browser

150

Kami membuat situs web HTML5 untuk seluler dan perlu mendapatkan akses kamera melalui browser web tanpa menjadi aplikasi asli. Kami mengalami masalah dalam membuat ini berfungsi di iOS. Adakah yang mengetahui solusi untuk ini?

ios html camera Julia
sumber

Jawaban:

124

Anda bisa mencoba ini:

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

tetapi harus iOS 6+ agar berfungsi. Itu akan memberi Anda dialog yang bagus bagi Anda untuk memilih untuk mengambil gambar atau mengunggah satu dari album Anda yaitu

Tangkapan layar

Contohnya dapat ditemukan di sini: Mengambil data kamera / gambar tanpa PhoneGap

Xeroxoid
sumber
5
Ini mengagumkan di Android juga!
Matt
1
Demo yang bagus untuk mengunggah ke server. Adakah yang tahu cara memodifikasi ini untuk menyimpan gambar ke album lokal di perangkat?
K.Niemczyk
2
Satu-satunya masalah adalah bahwa, setidaknya pada iphone (ios 7.0.4) setidaknya pada saat itu menciptakan gambar sementara bernama selalu 'image.jpg'. Jadi, jika Anda mengunggah beberapa gambar dalam bentuk yang sama, mereka menimpa satu sama lain karena nama yang sama kecuali Anda melakukan sesuatu untuk mengubah nama mereka, hati-hati!
aleation
@ K.Niemczyk: apakah Anda pernah memikirkannya? jika demikian saya akan tertarik dengan solusinya. Saya menemukan ini: dev.w3.org/2009/dap/camera (lihat contoh 6-7 untuk penyimpanan lokal)
lamarant
1
Cemerlang. Berikut biola bagi siapa pun yang ingin memberikan kode ini uji coba pada perangkat mereka.
Simon East
33

Pada 2015, sekarang hanya berfungsi .

<input type="file">

Ini akan meminta pengguna untuk mengunggah file apa pun. Pada iOS 8.x ini dapat berupa video kamera, foto kamera, atau foto / video dari Photo Library.

Unggah foto / video / file iOS / iPhone

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

Ini seperti di atas, tetapi membatasi unggahan ke foto hanya dari kamera atau perpustakaan, tidak ada video.

Simon Timur
sumber
1
Apakah ada cara untuk membatasi pengguna dari memilih file dari perpustakaan foto? Saya hanya ingin menerima gambar yang baru saja diambil.
Daryl
@Daryl bukan di iOS. Android mendukung captureatribut yang melakukan hal itu. Lihat Sintaks yang Benar untuk Tangkapan Media HTML
Oktavianus Naicu
haruskah saya menutup popup Ambil Foto atau Video dan Perpustakaan Foto ini setelah beberapa saat pengguna tidak mengkliknya.
Pritish
Sepertinya fungsi video sudah tidak ada lagi?
Martian2049
25

Di iOS6, Apple mendukung ini melalui <input type="file">tag. Saya tidak dapat menemukan tautan yang berguna dalam dokumentasi pengembang Apple, tetapi ada contoh di sini .

Sepertinya hamparan dan fungsionalitas yang lebih canggih belum tersedia, tetapi ini harus bekerja untuk banyak kasus penggunaan.

EDIT: W3c memiliki spesifikasi yang tampaknya Safari iOS6 menerapkan subset dari. The captureatribut terutama hilang.

pengguna295691
sumber
10

Saya pikir ini bekerja. Merekam video atau audio;

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

atau (metode baru)

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

Jika tidak, mungkin akan bekerja pada ios6, detail lebih lanjut dapat ditemukan di media pengguna dapatkan

siniradam
sumber
4

The picup app adalah cara untuk mengambil gambar dari halaman HTML5 dan upload ke server Anda. Ini memerlukan beberapa pemrograman tambahan di server, tetapi selain PhoneGap, saya belum menemukan cara lain.

rakensi
sumber
5
Di iOS8 Anda tidak perlu Picup lagi. HTML5 mendukung <input type = "file" accept = "image / *" id = "capture" capture = "camera">. Terverifikasi di Safari dan Chrome.
rakensi
1

Pertanyaan ini sudah berusia beberapa tahun tetapi pada saat itu beberapa kemungkinan tambahan telah berkembang, seperti mengakses kamera secara langsung, menampilkan pratinjau dan mengambil foto (misalnya untuk pemindaian kode QR).

Artikel Google Developers ini memberikan penjelasan mendalam tentang semua (?) Cara bagaimana memasukkan data gambar / kamera ke dalam aplikasi web, dari "bekerja di mana saja" (bahkan di browser desktop) hingga "bekerja hanya pada modern, hingga ke - perbarui perangkat seluler dengan kamera ". Seiring dengan banyak tips bermanfaat.

Metode yang dijelaskan:

  • Minta URL
  • Input file (dicakup oleh sebagian besar posting lain di sini)
  • Seret dan lepas (berguna untuk browser desktop)
  • Tempel dari clipboard
  • Akses kamera secara interaktif (diperlukan jika aplikasi perlu memberikan umpan balik instan tentang apa yang "dilihatnya", seperti kode QR)
Christoph
sumber