Pada tutorial kali ini kita akan mencoba memanfaatkan kamera handphone untuk menangkap gambar, rekam suara dan video lalu langsung menguploadnya dengan menggunakan PHP.
Biasaya kita ambil gambar dulu disimpan di memori baru lalu di browse, baru di upload. Kali ini kita coba ganti browse dengan langsung ambil gambar melalui kamera Handphone.
Emang bisa ya halaman web kita langsung konek dengan kamera atau speaker di handphone? Jawabannya bisa, dengan HTML kita bisa memanfaatkan fitur HTML Media Capture dengan menambahkan sedikit script pada form input.
Oke langsung saja, kita buat form seperti ini, dengan nama file capture.html
Bisa dilihat pada script diatas kita menambahkan accept="image/*" capture
pada input file.
Untuk bisa merekam suara atau video tambahkan kode seperti ini
Cek mobilehtml5.org untuk melihat kompatibilatas saat ini.
Agar file bisa diupload kita menggunakan PHP untuk menangani upload file ke server, beri nama file tersebut proses.php
Silahkan akses file capture.html melalui handphone dan browse file, maka yang akan terbuka adalah aplikasi kamera di handphone anda, ambil foto dan langsung tekan tombol submit untuk mengupload foto.
Jika ingin lebih keren lagi anda bisa memanfaatkan ajax, agar seketika setelah anda mengambil foto dengan kamera handphone maka langsung akan terupload ke server.
Demo | Downlaod Source Code
Sekian tutorial singkat kali ini, tentunya ini hanya contoh dan semoga bisa menginspirasi anda untuk membuat aplikasi yang lebih berguna dengan memanfaatkan kamera atau perekam suara / video yang ada di handphone, semisal untuk aplikasi parkir, data pegawai, aplikasi web seperti instagram, dll.
Terima kasih, nantikan artikel menarik berikutnya hanya di JurnalWeb.COM
kk mau tanya nih , tu kan penerapan nya di Hp, gmn kalu penerapan nya di laptop. atau komputer yang mempunyai kamera dan recordsound, caranya gmn agar ketika kita foto trus di teruskan ke upload,tanpa harus di simpan ke memori terlebih dahulu.tolong penjelasan dan solusi nya kk, makasih
coba ini – http://www.html5rocks.com/en/tutorials/getusermedia/intro/
artikel kk sangat bagus dan menarik , sy sudah coba demo nya.
maaf mau tanya gimana caranya agar pas kita klik browse langsung ke camera
(tidak ada pilihan camera/dokumen) jadi set default langsung kamera, tidak ada opsi lain.
terima kasih
Gan kalau baca ar code gimana?
Trims gan
Coda ini https://github.com/schmich/instascan
Gan kalau baca qr code gimana?
Trims