Cara Mengambil Gambar dari Webcam dengan PHP

Jika Anda ingin mengambil gambar dari webcam atau kamera ponsel maka Anda dapat menggunakan library webcam javascript dan menyimpannya di php.

Pada tutorial kali ini, saya akan menunjukkan kepada Anda bagaimana cara mengimplementasikan pengambilan gambar dari webcam dan menyimpan gambar di server dalam aplikasi php.

Kita akan menggunakan library webcam untuk menangkap gambar secara langsung. library webcam akan membantu untuk menampilkan kamera desktop dan kamera handphone Anda sehingga pengguna dapat melihat dan mengambil gambar dari sana.’

Pertama kita buat folder webcam_php dan di folder tersebut buat file dengan nama index.php. Buka file index.php di text editor kesukaan kalian. Kemudian kita tambahkan code berikut untuk tampilan mengambil gambar dari webcam.

<!DOCTYPE html>
<html>
<head>
    <title>Capture webcam image with php and jquery - leravio.com</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.25/webcam.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
    <style type="text/css">
        #results { padding:20px; border:1px solid; background:#ccc; }
    </style>
</head>
<body>
  
<div class="container">
    <h1 class="text-center">Capture webcam image with php and jquery - leravio.com</h1>
   
    <form method="POST" action="storeImage.php">
        <div class="row">
            <div class="col-md-6">
                <div id="my_camera"></div>
                <br/>
                <input type=button value="Take Snapshot" onClick="take_snapshot()">
                <input type="hidden" name="image" class="image-tag">
            </div>
            <div class="col-md-6">
                <div id="results">Your captured image will appear here...</div>
            </div>
            <div class="col-md-12 text-center">
                <br/>
                <button class="btn btn-success">Submit</button>
            </div>
        </div>
    </form>
</div>
  
<!-- Configure a few settings and attach camera -->
<script language="JavaScript">
    Webcam.set({
        width: 490,
        height: 390,
        image_format: 'jpeg',
        jpeg_quality: 90
    });
  
    Webcam.attach( '#my_camera' );
  
    function take_snapshot() {
        Webcam.snap( function(data_uri) {
            $(".image-tag").val(data_uri);
            document.getElementById('results').innerHTML = '<img src="'+data_uri+'"/>';
        } );
    }
</script>
 
</body>
</html>

Berikut penjelasan terkait code diatas:

Kita akan memakai cdn untuk menggunakan library webcamjs.
Selanjutnya buat <form> untuk menangkap gambar dari webcam atau ponsel.
Pada <script> kita configurasi webcamjs dari tingi, lebar, format gambar, dan kualitas gambar.

Setelah itu, kita buat file baru lagi dengan nama storeImage.php untuk menyimpan hasil tangkapan gambarnya dengan menggunakan PHP.

<?php
    
    $img = $_POST['image'];
    $folderPath = "upload/";
  
    $image_parts = explode(";base64,", $img);
    $image_type_aux = explode("image/", $image_parts[0]);
    $image_type = $image_type_aux[1];
  
    $image_base64 = base64_decode($image_parts[1]);
    $fileName = uniqid() . '.png';
  
    $file = $folderPath . $fileName;
    file_put_contents($file, $image_base64);
  
    print_r($fileName);
  
?>

Terakhir, Anda harus membuat folder “upload” di folder project Anda sebagai tempat penyimpanan hasil tangkapan gambar dari webcam atau ponsel.

Selamat sekarang kita telah berhasil mengambil gambar dari webcam atau kamera ponsel. Jika ada pertanyaan, Anda bisa langsung tulis di kolom komentar di bawah ini.

Cara Mengambil Gambar dari Webcam dengan PHP

Baca Juga

Leave a Comment Cancel Reply