Upload gambar langsung dari webcam – Dalam kasus tertentu kita sangat perlu menggunakan foto langsung dari pengguna, salah satunya sistem registrasi peserta seminar atau sistem mahasiswa pada kampus. Saat pengguna melakukan registrasi kita mengambil gambar terkini dari pengguna, ini bisa dijadikan sistem validasi bahwa yang mendaftar benar-benar mahasiswa yang terdaftar pada kampus tersebut. Mumpung ada waktu luang beberapa jam, saya mencoba membuat
form yang bisa mengambil gambar user langsung dari webcam. Pada tutorial ini saya menggunakan library webcam.js dan menggunakan teknik ajax untuk meng-upload gambar tersebut. Untuk backend supaya lebih cepat saya gunakan framework php yakni codeigniter. Baca Juga: Cara Mengambil Lokasi Dengan Menggunakan PHP dan Ajax Pertama,
siapkan framework dan silahkan kalian konfigurasi database dan yang lainnya. Saya buat form yang akan menyimpan username, email, password dan nama file gambar dari hasil capture. Kurang lebih struktur tablenya seperti di bawah ini.
Kedua, buat file view terserah seperti apa kalian buat tampilannya kalau punya saya seperti di bawah ini.
Untuk source codenya seperti ini:
Setelah tampilan dibuat sekarang kita buat dibagian backend nya, buat sebuah controller dan isi kodingannya seperti di bawah ini :
Bagaimana sangat mudah dan cepat kan buatnya? dan gambar tersebut langsung tersimpan pada sistem yang kalian buat.
Bagi kalian yang ingin langsung download source code nya silahkan langsung kunjungi github saya pada link berikut : //github.com/arigates/upload_webcam silahkan download yang capture.zip
Jika ada pertanyaan silahkan tinggalkan dikolom komentar.
Tentu anda pernah melihat banyak website yang mempunyai pilihan untuk mengganti gambar profile langsung dengan web camera.
Misalnya seperti situs situs besar seperti facebook, dimana anda bisa mengambil foto dari komputer anda sendiri atau melalu web camera. Tutorial ini kita akan belajar cara sederhana membuat fitur tersebut menggunakan webcam.js dan PHP, untuk melakukan itu anda
harus mendownload terlebih dahulu plugin webcam.js disini. Download webcam.js atau webcam.min.js yang sudah di minify dan download juga webcam.swf – index.php Ambil Gambar
WebcamJS Test Page
input {
margin-top: 10px;
}
// konfigursi webcam
Webcam.set[{
width: 320,
height: 240,
image_format: 'jpg',
jpeg_quality: 100
}];
Webcam.attach[ '#camera' ];
function preview[] {
// untuk preview gambar sebelum di upload
Webcam.freeze[];
// ganti display webcam menjadi none dan simpan menjadi terlihat
document.getElementById['webcam'].style.display = 'none';
document.getElementById['simpan'].style.display = '';
}
function batal[] {
// batal preview
Webcam.unfreeze[];
// ganti display webcam dan simpan seperti semula
document.getElementById['webcam'].style.display = '';
document.getElementById['simpan'].style.display = 'none';
}
function simpan[] {
// ambil foto
Webcam.snap[ function[data_uri] {
// upload foto
Webcam.upload[ data_uri, 'upload.php', function[code, text] {} ];
// tampilkan hasil gambar yang telah di ambil
document.getElementById['hasil'].innerHTML =
'
Hasil :
' +'';
Webcam.unfreeze[];
document.getElementById['webcam'].style.display = '';
document.getElementById['simpan'].style.display = 'none';
} ];
}
Sekarang kita membutuhkan file php untuk memproses upload gambar yang telah di ambil ke folder
– upload.php
Source codenya dapat anda download disini