Langsung ke konten utama

CAPTURE WEBCAM DENGAN HTML5 & JAVASCRIPT DOM

Salam sahabat fittraferdiansyah.info!

Kali ini kita akan mempelajari cara men-capture image/gambar menggunakan HTML5. Sebelumnya saya ingin menanyakan kepada Anda para pembaca blog ini. Sudahkah Anda pernah menggunakan fitur capture camera atau penangkap foto yang dimiliki oleh facebook untuk mengambil foto profil? Jika Anda sudah pernah menggunakannya, program yang kita buat ini akan mirip seperti itu hanya saja kali ini, kita belum menyimpannya kedalam database amaupun folder upload.

Yang kita pelajari disini adalah cara dasar untuk menghidupkan dan mengakses kamera webcam di PC/Laptop Anda, dan sekedar mengcapturenya menggunakan bantuan Javascript DOM. Bagaimana struktur kodenya?? Mari kita lihat!

Pertama buat struktur dasar HTMLnya seperti berikut ini :

<!DOCTYPE html>
<html>
<head>
<title>Capture Gambar</title>
</head>
<body>

</body>
</html>


Kemudian tambahkan kedalam bagian body beberapa "div" untuk mengakses kamera dan untuk menampilkan hasil tangkapan kamera.

<div id="awal">
<video id="video" width="200" height="150" autoplay></video>
Ambil Foto
</div>

<div id="hasil">
<h2>Hasil Foto</h2>
<canvas id="canvas" width="400" height="300"></canvas>
</div>

Kemudian tambahkan lagi sebuah style untuk memperindah tampilan div yang telah dibuat sebelumnya :

<style type="text/css">
#awal{
box-shadow: 0px 0px 3px #000;
padding :5px;
text-align:center;
width:210px;
margin:auto;
cursor:pointer;
}
#video{
border:1px solid #AEAEAE;
padding:2px;
}
#hasil{
box-shadow: 0px 0px 3px #000;
padding :5px;
text-align:center;
width:410px;
margin:auto;
cursor:pointer;
}
#canvas{
border:1px solid #AEAEAE;
padding:0px;
}
</style>

Nah yang terakhir kita tambahkan Javascript DOM yang digunakan untuk menangkap dan memproses camera webcam Anda!

<script type="text/javascript">
//Menambahkan daftar setelah konten selesai di load
window.addEventListener("DOMContentLoaded", function() {

 // menyeleksi elemen canvas dan video untuk membuat pengaturan awal
 var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function(error) {
 console.log("Video capture error: ", error.code);
};

// event saat tombol Ambil foto ditekan
document.getElementById("video").addEventListener("click", function() {
 context.drawImage(video, 0, 0, 400, 300);
});

// ambil video untuk div kanvas awal
 if(navigator.getUserMedia) {
navigator.getUserMedia(videoObj, function(stream) {
 video.src = stream;
 video.play();
}, errBack);
//pengaturan untuk webkit atau chrome browser
 } else if(navigator.webkitGetUserMedia) {
navigator.webkitGetUserMedia(videoObj, function(stream){
 video.src = window.webkitURL.createObjectURL(stream);
 video.play();
}, errBack);
 }
}, false);

</script>

Oke, sekarang coba jalankan dan hasilnya seperti dibawah ini.
Jangan lupa untuk meng Allow kan akses ke webcamnya!

Webcame HTML SUKSES


Label:

Komentar

  1. Habib kurniawan1 Agustus 2016 pukul 14.16

    sayang web cam saya suka eror

    BalasHapus
  2. INFO BARU1 Agustus 2016 pukul 16.23

    mantap postingannya...

    mau download musik gampang silahkan kunjungi
    http://goo.gl/91mzbH

    BalasHapus
  3. Dipta1 Agustus 2016 pukul 16.49

    wah bermanfaat sekali thanks

    BalasHapus
  4. Wahyu Rizky1 Agustus 2016 pukul 16.51

    webcam tanpa aplikasi , keren gan

    BalasHapus
    Balasan
    1. Fittra Ferdiansyah1 Agustus 2016 pukul 16.53

      terima kasih om, :)
      jika ada masalah jgn segan" ya!!!

      Hapus
  5. Unknown1 Agustus 2016 pukul 16.55

    Wow baru kali ini saya tau cara begituan om ,thanks :D

    BalasHapus
  6. hsa29 November 2017 pukul 10.33

    Gan gemana caranya klo disatukan dengan data misalkan keterangan photo?
    saya udh buat udh bisa simpan ke database tetapi gambat tidak tersimpan ke folder gambar. contohin gan. trimakasih .

    BalasHapus
    Balasan
    1. Fittra Ferdiansyah29 November 2017 pukul 19.42

      Terima kasih sebelumnya mas karna sudah mampir. Untuk masalah yang seperti ini Insya Allah akan di update pada artikel selanjutnya jgn lupa ya untuk subcribe agar dapat menerima pembaruan update dari kami! Thanks

      Hapus

Posting Komentar

Postingan populer dari blog ini

MEMUTAR AUDIO DAN VIDEO DENGAN HTML5

Halo sahabat www.fittraferdiansyah.info ! Pada postingan kali ini kita akan membahas mengenai HTML5 yang digunakan untuk memutar Audio dan Video. Sebab pada versi HTML sebelumnya fitur tersebut tidak bisa kita jumpai, jadi kali ini kita akan bahas mengenai fitur tersebut! Pada versi sebelumnya untuk menampilkan/memutar video dan audio, kita bisa menggunakan <embed></embed> yang penulisan lengkapnya sangatlah panjang. Namun kali ini kita gunakan tag <audio></audio> untuk audio dan <video></video> untuk menampilkan/memutar video. Format dasar penulisannya seperti berikut ini : Audio  <audio controls="controls"> <source src=" nama lagu.mp3 " type=" audio/mp3 "> </audio> sedangkan untuk Video ada 3 cara berdasar 3 format video yang di dukung oleh HTML5 yaitu ogg , webm , dan mp4 : <video controls="controls"> <source src=" Nama Video.mp4 "...
31 komentar
Selengkapnya »

MENAMPILKAN REFFERAL URL

PHP Bismi-llāhi r-raḥmāni r-raḥīm... Assalamu'alaikum Warohmatullohi Wabarokatuh... PHP :: Menampilkan Refferal URL Sebelum mempelajari PHP pada tahap ini Anda diharuskan sudah memahami apa itu php, dan dasar-dasar php. Ini dikarenakan tahap ini adalah tahapan tambahan di dalam php yang bisa Anda gunakan sebagai pemanis program dari website yang telah Anda buat... CODEX :: Code Xample Seperti biasa sebelum menuliskan struktur php yang akan di proses, tulislah terlebih dahulu kode pembuka dan penutup pada php. <?php #struktur kode dasar ?> Kemudian untuk menampilkan URL Refferal yang mengarah ke halaman ini, gunakan  $_SERVER[''] ; dengan tambahan  HTTP_REFERER  sehingga menjadi seperti berikut ini. <?php #struktur kode dasar $_SERVER['HTTP_REFERER']; ?> Sekarang coba jalankan, hheeeeeheheheee... Masih kosong ya! :D Sekarang tambahkan echo dengan tambahan kalimat " Anda menuju ke halaman ini da...
22 komentar
Selengkapnya »

CARA MENGGUNAKAN FUNGSI FOREACH DI PHP

Salam sahabat setia www.fittraferdiansyah.info ! PHP: Function Foreach Merupakan sebuah fungsi yang biasa digunakan khusus untuk data yang bersifat array, dengan Foreach kita dapat menampilkan data array dan melakukan perulangan pada data array tersebut. Struktur Dasar Penulisan Foreach Dalam penulisannya foreach tergolong sangat simple karena hanya menggunakan sedikit struktur dalam penulisannya. <?php foreach ($variable as $key => $value) { # code... } ?> Keterangan : $variabel merupakan kumpulan data yang telah dibuat/ditentukan dalam bentuk array. $key merupakan pengurutan array secara otomatis biasanya dimulai dari 0-sekian. $value merupakan nilai dari key yaitu data yang akan di urutkan. Contoh Penggunaan : <?php $data= array("Andi", "Sulaiman", "Kimberly", "Thomson", "Fittra", "Ferdiansyah"); foreach ($data as $key => $value) { echo "Data dengan nomor {$key} b...
19 komentar
Selengkapnya »