Cara Membuat Program Webcam Dengan Javascript Dan HTML Terbaru

Cara Membuat Program Webcam Dengan Javascript Dan HTML Terbaru

Pada kali ini panduancode akan membuat tutorial Cara Membuat Program Webcam Dengan Javascript Dan HTML Terbaru, program ini nantinya bisa Anda kembangkan lagi untuk membuat sebuah website yang membutuhkan akses untuk mengambil gambar atau video.


Contoh website yang menggunakan program webcam dengan javascript dan html salah satunya adalah facebook, karena facebook dapat mengakses webcam untuk video call, dan mengambil gambar (foto selfie).

Program webcam dengan javascript dan html terbaru ini dapat kita buat dengan memanfaatkan API yang sudah ada dari HTML5.

Penasaran bagaimana cara kerja program webcam dengan javascript dan html?

Jika ya, mari kita bahas terlebih dahulu cara kerja program webcam dengan javascript dan html dibawah ini.

Cara Kerja Program Webcam Dengan Javascript Dan Html

Cara Membuat Program Webcam Dengan Javascript Dan HTML Terbaru

Pada pertama kali program webcam dengan javascript dan html ini di run (dijalankan), program akan meminta izin terlebih dahulu kepada user.

Apakah user mengizinkan program webcam dengan javascript dan html ini berjalan atau tidak.

Cara untuk membuat notifikasi seperti itu sangat mudah, kita akan menggunakan method getUserMedia.

Method getUserMedia ini tidak hanya berfungsi untuk mengakses webcam saja melainkan Anda bisa menggunakan method ini untuk mengakses media lain seperti mikrofon.

Nah setelah user memberikan izin kepada program untuk dapat dijalankan, maka selanjutnya kita render gambar dari webcam ke elemen <video>.

Perlu Anda ketahui juga bahwa elemen <video> adalah elemen baru yang ada pada html5 yang berfungsi untuk menampilkan video.

Sekarang setelah Anda mengetahui cara kerja dari program webcam dengan javascript dan html ini, mari kita buat programnya dibawah ini.

Cara Membuat Program Webcam Dengan Javascript Dan Html

1. Coding Html5 Untuk Menampilkan Video

 Berikut ini adalah coding html5 untuk menampilkan video.

<div>
    <video autoplay="true" id="video-webcam">
        Izinkan program webcam dengan javascript dan html ini untuk melihat demo.
    </video>
</div>

Coding diatas adalah coding html5, kenapa html5 karena terdapat method <video>...</video> yang merupakan bagian dalam html5.

keterangan method yang digunakan pada coding html5 diatas:

1. autoplay="true" berfungsi untuk memutar video otomatis.

2. id="video-webcam" adalah variable yang telah ditentukan untuk mempermudah pemilihan elemen di javascript.

Namun Anda juga dapat merubah isi id nya sesuai dengan keinginan Anda, dengan catatan isi id nya harus sama dengan elemen di javascript dibawah ini.

2. Coding Javascript Untuk Mengambil Video


<script type="text/javascript">
    // elemen untuk menyeleksi video, dan variable #video-webcam harus sama seperti pada atribut id="video-webcam"
    var video = document.querySelector("#video-webcam");

    // Berfungsi untuk meminta izin terlebih dahulu kepada user
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;

    // jika user memberikan izin pada program webcam panduancode
    if (navigator.getUserMedia) {
        // run fungsi handleVideo, dan videoError jika user tidak memberikan izin
        navigator.getUserMedia({ video: true }, handleVideo, videoError);
    }

    // fungsi ini hanya akan di run jika user telah memberi izin kepada program webcam
    function handleVideo(stream) {
        video.srcObject = stream;
    }

    // jika user tidak memberikan izin maka fungsi ini akan di run
    function videoError(e) {
        // do something
        alert("Izinkan program webcam dengan javascript dan html ini untuk melihat demo.!")
    }
</script>

Untuk penjelasan atau keterangan coding javascript pada program webcam ini silahkan lihat, baca pada baris komentar pada coding javascript diatas.

3. Coding Html5 Untuk Mengambil Gambar

Berikut ini adalah coding html5 untuk mengambil gambar pada program webcam dengan javascript dan html ini.

 <button onclick="takeSnapshot()">Ambil Gambar</button>

Kemudian berikut ini adalah fungsi javascript untuk mengambil gambar pada program webcam dengan javascript dan html.

4. Coding Javascript Untuk Mengambil Gambar


function takeSnapshot() {
    // Ini berfungsi untuk membuat gambar
    var img = document.createElement('img');
    var context;

    // ini berfungsi untuk mengambil ukuran video
    var width = video.offsetWidth
            , height = video.offsetHeight;

    // Ini berfungsi untuk membuat elemen canvas
    canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;

    // mengambil gambar dari video dan memasukannya kedalam canvas
    context = canvas.getContext('2d');
    context.drawImage(video, 0, 0, width, height);

    // gambar yang dimasukan kedalam canvas di render ke dalam format gambar png
    img.src = canvas.toDataURL('image/png');
    document.body.appendChild(img);
}

Penjelasan mengenai coding diatas sudah dijelaskan pada baris komentar.

Sekarang waktunya untuk menggabungkan beberapa bagian coding diatas menjadi satu file html5 yang utuh.

Program Webcam Dengan Javascript Dan Html Sederhana

Berikut inilah hasilnya jika sudah digabungkan menjadi satu.

<html>
    <head>
    <title>Program Webcam Panduancode</title>
    </head>
    <body>
        <div class="">
            <video autoplay="true" id="video-webcam">
                Izinkan program webcam dengan javascript dan html ini untuk melihat demo!
            </video>
            <button onclick="takeSnapshot()">Ambil Gambar</button>
        </div>
        <script>
            var video = document.querySelector("#video-webcam");
            navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
            if (navigator.getUserMedia) {
                navigator.getUserMedia({ video: true }, handleVideo, videoError);
            }
            function handleVideo(stream) {
                video.src = window.URL.createObjectURL(stream);
                console.log(stream);
            }
            function videoError(e) {
                // do something
                alert("Izinkan program webcam dengan javascript dan html ini untuk melihat demo!")
            }
            function takeSnapshot() {
                var img = document.createElement('img');
                var context;
                var width = video.offsetWidth
                        , height = video.offsetHeight;
                canvas = document.createElement('canvas');
                canvas.width = width;
                canvas.height = height;
                context = canvas.getContext('2d');
                context.drawImage(video, 0, 0, width, height);
                img.src = canvas.toDataURL('image/png');
                document.body.appendChild(img);
            }
        </script>
    </body>
</html>

Copy coding program webcam dengan javascript dan html diatas dan save dengan nama program-webcam-panduancode.html.

Kemudian simpan file program webcam tersebut di direktori htdocs, nah karena disimpan pada direktori htdocs, maka Anda harus mengaktifkan xampp terlebih dahulu.

Kenapa harus disimpan pada direktori htdocs? padahal file html dan javascript bisa dijalankan tanpa mengaktifkan xampp.

Alasannya Karena jika tidak disimpan pada direktori htdocs, maka videonya tidak akan muncul, atau tidak akan mau dirender.

Bagaimana sangat mudah bukan tutorial Cara Membuat Program Webcam Dengan Javascript Dan HTML Terbaru dari panduancode?

Sampai disini dulu pembelajaran kita pada kesempatan kali ini, semoga tutorial ini dapat bermanfaat bagi Anda.

Akhir kata dari panduancode jangan lupa titik koma.

Berlangganan Artikel Terbaru Via E-mail:

0 Response to "Cara Membuat Program Webcam Dengan Javascript Dan HTML Terbaru"

Posting Komentar

Terimakasih telah berkomentar di Panduan Code, semoga komentar anda dapat membangun situs ini menjadi lebih baik lagi.

Iklan Atas Artikel

Iklan Atas Artikel1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Donasi

Hallo sobat panduan code, Anda dapat memberikan suport kepada kami dengan cara memberikan donasi, yang mana nantinya donasi tersebut akan digunakan untuk memperpanjang Domain Panduan code.



BANK BRI:401101013389533 a/n ARIF NOERWAHIDIN
PULSA : 082126546564
PAYPAL : panduancode
Done