Cara menggunakan javascript webcam

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.

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 : https://github.com/arigates/upload_webcam silahkan download yang capture.zip
Jika ada pertanyaan silahkan tinggalkan dikolom komentar.

1. Home
2. PHP MYSQLi
3. Mengambil foto webcam dengan webcam.js dan PHP

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

    
Capture
        

        
    

    

        
        
    
     
     
    
    

Sekarang kita membutuhkan file php untuk memproses upload gambar yang telah di ambil ke folder

– upload.php

$nama_file = time().'.jpg';
$direktori = 'uploads/';
$target = $direktori.$nama_file;
move_uploaded_file($_FILES['webcam']['tmp_name'], $target);
?>

Source codenya  dapat anda download disini

Artikel Rekomendasi

Artikel Terkait

• Setting Ukuran Kertas di Ezpdf PHP
• Fungsi Mengubah Format Tanggal Detepticker
• Free Download toko online PHP MYSQL
• Cara Input Jam Indonesia di PHP
• Download Portal Berita Sederhana dengan HTML, PHP CSS bootsrap
• Script PHP dasar Mengirim SMS Gateway
• Validasi Email dengan PHP dan Mysqli
• Cara Split atau Membagi Habis Bilangan dengan PHP
• Cara Menampilkan Waktu Realtime dengan PHP
• Menjumlahkan record / field numerik di database MYSQL