contact
WA: 0822-8846-7823
SMS: 0822-8846-7823
Call: 0822-8846-7823
BBM: D7DB3491
ebsofmail@gmail.com

Mengambil foto webcam dengan webcam.js dan PHP

Posted in PHP MYSQLi Life at 22 Februari 2017 With 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.

mengambil foto di web

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

Artikel Rekomendasi

Artikel Terkait

Diskusi