Mengambil foto webcam dengan webcam.js dan PHP

Publish Date : 22-02-2017 , dibaca 30303 kali, Hari ini dibaca : 3 kali ,0 comments

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

<!doctype html>
<html>
<head>
    <title>WebcamJS Test Page</title>
    <style>
        input {
            margin-top: 10px;
        }
    </style>
 
</head>
<body>
    <p>Ambil Gambar</p>
    <div id="camera">Capture</div>
    
    <div id="webcam">
        <input type=button value="Capture" onClick="preview()">
    </div>
    <div id="simpan" style="display:none">
        <input type=button value="Remove" onClick="batal()">
        <input type=button value="Save" onClick="simpan()" style="font-weight:bold;">
    </div>
 
    <div id="hasil"></div>
 
    <script src="webcam.min.js"></script>
    <script language="Javascript">
        // 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 = 
                    '<p>Hasil : </p>' + 
                    '<img src="'+data_uri+'"/>';
                
                Webcam.unfreeze();
            
                document.getElementById('webcam').style.display = '';
                document.getElementById('simpan').style.display = 'none';
            } );
        }
    </script>
    
</body>
</html>

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

– upload.php

<?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

Membuat Link Halaman Dinamis dengan PHP
Previous Post

Ebook PHP Cepat OOP Bahasa Indonesia
Next Post