Cara menggunakan contoh webcam javascript

Tentunya Anda telah melihat banyak situs web yang memiliki opsi untuk mengganti foto profil langsung dengan kamera web. Misalnya seperti situs besar seperti Facebook, tempat Anda dapat mengambil foto dari komputer Anda sendiri atau melalui kamera web

Table of Contents Show

1. Membuat Database dan Tabel
2. Buat indeks Folder dan File. php
3. Buat tindakan File. php
4. Membuat file data. php
5. Memuat Folder Unggahan

Dalam tutorial ini kita akan mempelajari cara sederhana untuk membuat fitur menggunakan webcam. js dan PHP, untuk melakukan itu Anda harus mengunduh plugin webcam terlebih dahulu. js di sini. Unduh webcam. js atau kamera web. min. js yang sudah diperkecil dan download juga webcamnya. swf

Halo semuanya, kembali lagi di sahretech. Nah pada kesempatan kali ini kita akan membahas tutorial programming yang sangat keren yaitu cara mengakses dan menggunakan webcam untuk mengambil gambar dengan php, javascript, dan mysql. Penasaran?, yuk ikuti tutorial berikut ini

Dalam kasus tertentu, kami memerlukan akses ke webcam untuk mendapatkan foto pengguna. Akses ke webcam dan direct capture sangat memudahkan pengguna untuk mengambil gambar dan menguploadnya langsung ke website yang kami buat. Di beberapa web chat, web video conference, bahkan terkadang website test online juga mengharuskan kita menyalakan webcam dan merekam aktivitas yang kita lakukan.

Pada kesempatan kali ini kita akan belajar cara mengakses webcam di laptop atau komputer, lalu cara capture image, cara menyimpannya ke database, dan cara menampilkannya kembali.

Studi kasus yang akan kita kembangkan kali ini adalah membuat sebuah aplikasi galeri sederhana, dimana pada halaman website yang akan kita buat ini terdapat 2 bagian, yaitu di sebelah kiri terdapat form input dan di sebelah kanan terdapat data gambar. Menggunakan php, jquery, mysql dan bootstrap. Untuk melihat hasil akhirnya, silahkan scroll ke bagian bawah artikel

Baca Artikel Lainnya ✨📰 1. Cara Cepat Membuat Restful API Back-end Tanpa Coding dengan Typicode Json Server read more📰 2. Cara Menggunakan Library Serverside Datatable di Laravel Moodle read more📰 3. Cara Import Data Excel ke Database Mysql dengan php baca selengkapnya📰 4. Cara Membuat Peta Digital dengan Leafletjs, Alternatif Peta Digital Tanpa Google Maps API read more

Cara Mengunggah Foto Langsung dari Webcam

1. Membuat Database dan Tabel

Buat tabel baru dengan nama latihan, dan buat tabel baru di dalamnya dengan nama galeri. Dan untuk struktur field dan table dapat dilihat pada gambar dibawah ini

Membuat database dan tabel

2. Buat indeks Folder dan File. php

Buat folder baru di folder htdocs dengan nama training-webcam, lalu buat file baru di dalamnya dengan nama index. php. Silakan salin skrip di sini dan tempelkan ke file indeks. php



<!DOCTYPE html>
<html>
<head>
    <!-- bootstrap  -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
        integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>

<body>
    <div class="container">
        <br>
        <div class="alert alert-success">
            <h1>Aplikasi Galeri</h1>
            <h5>Belajar capture gambar dengan webcam, menyimpan data ke database, dan menampilkan hasilnya</h5>
        </div>
        <hr>
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <!-- form  -->
                        <form id="form">
                            <div class="form-group">
                                <label>name</label>
                                <input type="text" class="form-control" name="name" id="name" required>
                            </div>

                            <!-- kamera webcam akan ditampilkan di dalam id="my_camera" -->
                            <div id="my_camera">
                            </div>
                            <br>
                            <hr>
                            <button type="submit" class="tombol-simpan btn btn-primary">Register</button>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div id="data">

                </div>
            </div>
        </div>
    </div>
    <!-- jquery  -->
    <script src="https://code.jquery.com/jquery-3.5.1.js"
        integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
        integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous">
    </script>
    <!-- bootstrap js  -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
        integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous">
    </script>
    <!-- webcamjs  -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.25/webcam.js"></script>
    <script language="JavaScript">
        // menampilkan kamera dengan menentukan ukuran, format dan kualitas 
        Webcam.set({
            width: 320,
            height: 240,
            image_format: 'jpeg',
            jpeg_quality: 90
        });

        //menampilkan webcam di dalam file html dengan id my_camera
        Webcam.attach('#my_camera');

    </script>

    <script type="text/javascript">
        // saat dokumen selesai dibuat jalankan fungsi update
        $(document).ready(function () {
            update();
        });

        // jalankan aksi saat tombol register disubmit
        $(".tombol-simpan").click(function () {
            event.preventDefault();

            // membuat variabel image
            var image = '';

            //mengambil data uername dari form di atas dengan id name
            var name = $('#name').val();

            //mengambil data email dari form di atas dengan id email
            var email = $('#email').val();

            //memasukkan data gambar ke dalam variabel image
            Webcam.snap(function (data_uri) {
                image = data_uri;
            });

            //mengirimkan data ke file action.php dengan teknik ajax
            $.ajax({
                url: 'action.php',
                type: 'POST',
                data: {
                    name: name,
                    email: email,
                    image: image
                },
                success: function () {
                    alert('input data berhasil');
                    // menjalankan fungsi update setelah kirim data selesai dilakukan 
                    update()
                }
            })
        });


        //fungsi update untuk menampilkan data
        function update() {
            $.ajax({
                url: 'data.php',
                type: 'get',
                success: function (data) {
                    $('#data').html(data);
                }
            });
        }

    </script>
</body>

</html>

Penjelasan

Gunakan CTRL + F untuk menemukan sintaks/skrip di bawah ini. Oh iya sudah saya cantumkan juga keterangan penjelasannya di bagian atas script, jika masih kurang paham silahkan langsung tanyakan di kolom komentar di bawah

NoSyntax/ScriptExplanation1 Webcam. mengatur({. }) digunakan untuk menyetel webcam dengan ukuran, format, dan kualitas2Webcam. attach('#my_camera') digunakan untuk menampilkan webcam di dalam tag dengan id="my_camera"3 $(". tombol simpan"). click(function () { } adalah tindakan yang akan dijalankan saat tombol simpan diklik. 4 acara. preventDefault(); digunakan agar halaman tidak dimuat ulang saat formulir mengirimkan data5$('#name'). val(); digunakan untuk mengambil data yang diinput oleh user pada form input dengan id="name"6Webcam. jepret(fungsi(data_uri){. }) Mengambil gambar dan menyimpannya dalam variabel image7$. ajax({. }) Teknik CRUD dengan ajax

3. Buat tindakan File. php

Selanjutnya buat file baru dengan nama action. php. File ini berfungsi untuk mengolah data yang diinput oleh user untuk dimasukkan ke dalam database. Silahkan copy script di bawah ini dan paste di file

        

<?php
        //mendefinisikan folder
        define('UPLOAD_DIR', 'upload/');
    
        //koneksi ke database
        $koneksi = new mysqli('localhost', 'root', '', 'latihan');
    
        //menangkap variabel
        $img        = $_POST['image'];
        $name       = $_POST['name'];
    
        $img        = str_replace('data:image/jpeg;base64,', '', $img);
        $img        = str_replace(' ', '+', $img);
    
        //resource gambar diubah dari encode
        $data       = base64_decode($img);
    
        //menamai file, file dinamai secara random dengan unik
        $file       = uniqid() . '.png';
        
        //memindahkan file ke folder upload
        file_put_contents(UPLOAD_DIR.$file, $data);
    
        //memasukkan data ke dalam tabel biodata
        mysqli_query($koneksi, "insert into galeri set name='$name', gambar='$file'");
    ?>

4. Membuat file data. php

Selanjutnya buat file baru dengan nama data. php, file ini berfungsi untuk menampilkan data gambar yang tersimpan di database. Dan kami sertakan dengan teknik ajax di file index. php

        

<div class="row">
    <?php
        //koneksi ke database
        $koneksi    = new mysqli('localhost', 'root', '', 'latihan');
    
        //mengambil data ke tabel biodata
        $select     = mysqli_query($koneksi, 'select * from galeri');
    
        //melakukan looping dengan while
        while ($hasil = mysqli_fetch_array($select)) {
    ?>
    <div class="col-4">
        <!-- data ditampilkan dalam bentuk gambar -->
        <img src='upload/<?php echo $hasil['gambar'];?>' width="100%" />
        <!-- data ditampilkan dalam bentuk text  -->
        <p style="text-align:center"><?php echo $hasil['name']; ?></p>
    </div>
    <?php } ?>
</div>

5. Memuat Folder Unggahan

Langkah terakhir silahkan buat folder baru dengan nama upload di folder training-webcam atau sesuai dengan file yang sudah kita buat sebelumnya. Kami menggunakan folder unggahan ini untuk menyimpan file yang diambil dengan webcam

Struktur folder kamera web

Selanjutnya, simpan proyek Anda. Nyalakan layanan xampp jika belum dinyalakan sebelumnya. Kemudian buka browser dan akses proyek Anda di alamat http. //localhost/webcam-pelatihan. Tampilan akan terlihat seperti gambar di bawah ini

Hasil akhir

Sekian tutorial cara upload gambar dari webcam dan prosesnya dengan php, jquery, dan mysql. Semoga tutorial singkat ini bermanfaat untuk kalian semua, jika ada yang membingungkan silahkan tanyakan langsung pada kolom komentar di bawah dan mari kita bahas bersama. Sampai jumpa di tutorial pemrograman keren lainnya