author Ahmad Muhardian

Cara Mengakses Webcam dari HTML dan Mengambil Gambar


Html5 Webcam

Biasanya pada web-web tertentu kita membutuhkan Webcam untuk mengambil gambar, misalnya pada web yang mimiliki fitur Video Call seperti Facebook.

Kalau dulu, hal ini mungkin dilakukan dengan bantuan Plug-in seperti Flash dan Silverlight.

Namun, sekarang HTML5 sudah menyediakan API yang bisa kita gunakan untuk mengakses Webcam secara native.

Pada kesempatan ini, kita akan belajar cara mengakses Webcam untuk ditampilkan di dalam halaman web dan mengambil gambar.

Contoh Webcam di HTML

Berikut ini contoh hasil akhir yang akan kita buat.

Jika tidak tampil, pastikan kamu mengizinkan halaman ini mengakses Webcam.

Izin Webcam di Google Chrome:

Izin akses Webcam di Google Chrome

Izin Webcam di Google Chrome Android:

Izin akses Webcam di Google Chrome Android

Izin Webcam di Opera:

Izin akses Webcam di Google Chrome

Bagaimana Cara Kerjanya?

Pertama kita membutuhkan izin user, apakah dia mau memberikan akses webcam atau tidak.

Metode atau method yang digunakan untuk meminta izin user adalah getUserMedia. Method ini tidak hanya untuk mengakses webcam saja, kita juga bisa mengakses media lain seperti mikrofon.

Setelah user memberikan izin, selanjutnya kita tinggal render gambar dari webcam ke elemen <video>.

Elemen <video> merupakan elemen baru yang ditambahkan pada HTML 5 untuk menampilkan video.

Untuk lebih jelasnya, mari kita coba dalam kode…

Menampilkan Video Webcam di HTML

Pertama silahkan buat sebuah file HTML.

<div>
    <video autoplay="true" id="video-webcam">
        Browsermu tidak mendukung bro, upgrade donk!
    </video>
</div>

Pada file HTML di atas, kita memberikan atribut autoplay="true" agar videonya diputar secara otomatis dan id="video-webcam" untuk memudahkan pemilihan elemen di Javascript.

Setelah itu, silahkan buat kode Javascript-nya:

<script type="text/javascript">
    // seleksi elemen video
    var video = document.querySelector("#video-webcam");

    // minta izin user
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;

    // jika user memberikan izin
    if (navigator.getUserMedia) {
        // jalankan fungsi handleVideo, dan videoError jika izin ditolak
        navigator.getUserMedia({ video: true }, handleVideo, videoError);
    }

    // fungsi ini akan dieksekusi jika  izin telah diberikan
    function handleVideo(stream) {
        video.srcObject = stream;
    }

    // fungsi ini akan dieksekusi kalau user menolak izin
    function videoError(e) {
        // do something
        alert("Izinkan menggunakan webcam untuk demo!")
    }
</script>

(Kode lengkapnya silahkan cek di Gist)

Silahkan simpan di dalam direktori htdocs atau /var/www/html, lalu buka melalui alamat http://localhost/namafile.html.

Kenapa harus disimpan di sana?

Karena jika tidak disimpan di server web, videonya tidak akan mau di-render.

Mengambil Gambar dari Webcam

Kita baru saja membuat kode HTML dan Javascript untuk menampilkan video dari webcam.

Lalu…

Bagaimana kalau kita ingin mengambil gambar?

Gampang.

Kita tinggal buat sebuah tombol dan saat tombol tersebut diklik, kita eksekusi fungsi untuk mengambil gambar.

Berikut ini kode fungsi untuk mengambil gambar:

function takeSnapshot() {
    // buat elemen img
    var img = document.createElement('img');
    var context;

    // ambil ukuran video
    var width = video.offsetWidth
            , height = video.offsetHeight;

    // buat elemen canvas
    canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;

    // ambil gambar dari video dan masukan 
    // ke dalam canvas
    context = canvas.getContext('2d');
    context.drawImage(video, 0, 0, width, height);

    // render hasil dari canvas ke elemen img
    img.src = canvas.toDataURL('image/png');
    document.body.appendChild(img);
}

Fungsi di atas akan membuat sebuah elemen <img> untuk menampung gambar Snapshot dari elemen Video.

Kita memanfaatkan Canvas untuk mengambil gambarnya.

Setelah itu tinggal ditampilkan ke dalam elemen <img>.

Selanjutnya silahkan buat sebuah tombol untuk mengeksekusi fungsi tersebut.

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

Selesai, silahkan dicoba.

Untuk menyimpan gambarnya, tinggal klik kanan kemudian pilih save image as…

Simpan Gambar dari Web

Gampang kan?

Akhir Kata…

Begitulah cara mengakses Webcam dari HTML atau halaman web.

Selanjutnya kamu bisa melakukan eksperimen yang lebih menarik, seperti:

  • Menerapkan Algoritma Computer Vision atau Pengolahan Citra.
  • Membuat Aplikasi Video Call.
  • Membuat Sistem Login dengan Mendeteksi Wajah.
  • Menebak Umur berdasarkan Wajah.
  • _______ (dll. tambahkan sendiri)

Referensi:

Baca Juga ini

Mengenal HTML5 Vibration API untuk Membuat Getaran di HP

Mengenal HTML5 Vibration API untuk Membuat Getaran di HP

Artikel kali ini terinspirasi dari pembicaraan teman-teman di grup Pojok Programmer tentang link download palsu yang mengarahkan ke link iklan. Sebagian halaman web menggunakan getaran untuk mengambil perhatian dari pengunjungnya, terutama halaman web yang penuh dengan iklan. Membaca komentar-komentar mereka membuat saya teratrik ingin tahu cara membuat getaran di web. Langsunga saja saya menuju ke Google dan memasukan kata kunci “js vibrate phone” dan hasilnya ternya menggunakan HTML5 Vibration API.

Menggambar Objek dengan Perulangan dan Fungsi Random di HTML5 Canvas

Menggambar Objek dengan Perulangan dan Fungsi Random di HTML5 Canvas

Pada artikel pengenalan HTML5 Canvas sebelumnya, kita sudah belajar cara menggamabar objek-objek dasar seperti titik, garis, persegi, lingkaran, dan segitiga. Obejek digambar hanya sekali saja. Bagaiaman kalau kita ingin menggambar banyak objek dan digambar secara acak? Untuk menjawab pertanyaan ini, kita harus menggunakan perulangan dan fungsi random(). Lebih jelasnya, mari kita bahas… Menggambar Objek dengan PerulanganPada contoh di artikel sebelumnya, kita sudah pernah menggamabar persegi dua kali. <script type="text/javascript"> var canvas = document.

Mengenal HTML5 Canvas untuk Pemrograman Grafis dan Game

Mengenal HTML5 Canvas untuk Pemrograman Grafis dan Game

Sebelum kedatangan HTML5, Game dan elemen multimedia lainnya disajikan dalam browser menggunakan Flash. Banyak game berbasis Flash yang bisa dimainkan melalui browser. Bahkan Flash juga digunakan untuk memutar video. Seingat saya dulu…tanpa Flash Player, kita tidak bisa memutar video di Youtube. Namun semuanya berubah setelah kedatangan HTML5… 1 HTML5 membawa banyak elemen baru yang menggantikan tugas Flash dalam browser. Salah satunya adalah canvas. Apa itu Canvas?Dalam dunia nyata, canvas sering digunakan untuk menggambar dan melukis.

Belajar HTML: Cara Validasi Form di HTML agar Websitemu Lebih Aman

Belajar HTML: Cara Validasi Form di HTML agar Websitemu Lebih Aman

Validasi data itu penting! Mengapa? Karena jika kita tidak melakukan validasi, user bisa sembarangan mengisi data dan akibatnya website kita menjadi error. Dampak terburuknya: Website kita bisa diambil alih atau di-hack. Ngeri kan. Karena itu.. Jangan percaya 100% dengan data yang diinputkan user. Bisa saja itu script jahat. Nah, biar terhindar dari kejadian ini.. kita disarankan melakukan validasi sebelum data itu dikirim ke server. Dulu.. validasi data di sisi client dilakukan dengan Javascript.

15 Tag HTML yang tidak Memiliki Pasangan Penutup

15 Tag HTML yang tidak Memiliki Pasangan Penutup

Sebuah elemen dalam HTML terdiri dari tag pembuka dan tag penutup. Namun, ada juga yang tidak memiliki tag penutup. Kasihan juga ya, hehe 😄 Meskipun demikian, elemen ini tetap valid dan dapat dibaca browser. Elemen yang tidak memiliki tag penutup ini juga disebut void element, karena tidak memiliki isi. Apa saja tag-tag yang tidak memiliki penutup itu? mari kita simak… 1. Tag <area>Tag <area> fungsinya untuk mendefinisikan area pada image map.

Cara Membuat Halaman Github untuk Repositori

Cara Membuat Halaman Github untuk Repositori

Pada tulisan sebelumnya, saya pernah membahas tentang cara membuat halaman Github untuk profil individu dan organisasi. Nah, kali ini kita akan membuat halaman github untuk proyek atau repositori. Jadi sebenarnya, setiap proyek atau respositori di Github itu bisa dijadikan halaman Github (Github Pages). Pastikan di dalam proyek berisi file web statis seperti HTML, CSS, dan Javascript. Membuat repositoriBuatlah repositori dengan nama apa saja, kemudian di dalamnya berisi file web statis. Setelah itu, upload ke github.